Jak szybko zacząć z frontendem do aplikacji?

Jest poniedziałek, a więc ukazuje się u mnie wpis dotyczący projektu konkursowego Uśmiech

Obecnie mamy mnóstwo technologii ułatwiających pisanie frontendu do aplikacji webowej. Od frameworków JavaScriptowych  (Angular, React), przez parsery CSS (Sass, Less, Stylus), narzędzia do zarządzania zależnościami (npm, bower, yarm) narzędzia do automatyzacji budowania (Gulp, Grunt) po różne odmiany JavaScriptu (TypeScript, CoffeScript). Zanim zaczniemy tworzyć frontend do aplikacji, musimy wybrać z czego będziemy korzystać, oraz tak to skonfigurować, aby to działało ze sobą. Czasami mamy ograniczony czas, a czasami brakuje nam chęci, i nie chcemy się tym zajmować, wolimy zająć się pisaniem działającego kodu. Opiszę świetne narzędzie pozwalające w kilka minut wystartować, i zacząć pisanie właściwego kodu, unikając lub też minimalizując konieczność konfiguracji narzędzi jakich będziemy używać. A jest nim Yeoman.

 

Instalacja

Jak większość narzędzi, Yeoman wymaga instalacji, nie wymaga natomiast konfiguracji, ponieważ w niej właśnie on ma pomóc Uśmiech

Aby zainstalować Yeoman, należy najpierw zaopatrzyć się w NodeJS. Razem z nim, najczęściej instaluje się również npm (Node Package Manager) za pomocą którego zainstalujemy Yeoman. A więc aby to zrobić, wykonujemy:

npm install –g yo

Po wykonaniu polecenia, będziemy mieli dostęp do narzędzia “yo”, czyli do Yeomana. Jednakże, sam Yeoman jest w zasadzie bezużyteczny, warto więc dodatkowo wyposażyć go w jakikolwiek generator.

Pokażę to na przykładzie generatora FountainJS. Jest to generator, który potrafi wygenerować projekt oparty o Angular 1, Angular 2 oraz React. Aby zainstalować generator, wykonujemy:

npm install -g yo generator-fountain-webapp

Po wykonaniu tej komendy zakładamy pusty katalog na nasz projekt, i przechodzimy do niego. W tym katalogu uruchamiamy narzędzie yo. Za pierwszym razem zapyta ono o wysyłanie anonimowych danych dot. użycia, po czym wyświetli listę dostępnych generatorów. Narzędzie obsługujemy strzałkami Góra/Dół, a wyboru dokonujemy klawiszem Enter. Spacja służy do modyfikacji list wielokrotnego zaznaczania. Każdy generator działa podobnie, najpierw zadawane są pytania, a po uzyskaniu wszystkich odpowiedzi, generowany jest projekt. W przypadku FountainJS są to pytania m.in. O framework, parser CSS, rodzaj Javascriptu, narzędzie do budowania itp. Po wygenerowaniu projektu, komendą “npm run build” budujemy projekt, a za pomocą “npm run serve” uruchamiamy serwer na porcie 3000, który odświeża projekt w przeglądarce, gdy wykryje zmiany w plikach źródłowych. Świetnie się nadaje, aby przyspieszyć proces tworzenia frontendu, testując zmiany niemal natychmiast. Przykładowa strona wygenerowana przez FountainJS:

FireShot Screen Capture #001 - 'FountainJS' - localhost_3000

Na stronie z listą generatorów znaleźć można inne, mniej lub bardziej rozbudowane generatory. Wśród nich jest np. JHipster, który nie tylko generuje frontend taki jak FountainJS, ale także backend oparty na Javie i Spring Boot. Jest przy tym naprawdę bardzo zaawansowany, i zadaje bardzo dużo pytań.

 

Wady generatorów

Opisałem zalety wynikające ze stosowania generatorów, trzeba przyjrzeć się również wadom. Niestety, nie zawsze wszystko działa tak jakbyśmy tego oczekiwali, generatory są różnej jakości. Ciągle wypuszczane są ich aktualizacje, które coś naprawiają, ale czasem też coś psują. W efekcie, możemy mieć pecha, i w specyficznych przypadkach (felerna wersja generatora, niefortunne zestawienie odpowiedzi na pytania) nasz projekt się nie zbuduje, bądź nie wygeneruje. Czasem da się to szybko naprawić, poprzez np. zaktualizowanie bibliotek w package.json, ale nie zawsze jest to takie proste. No a poza tym nigdy nie wiemy, czy twórca zadbał o odpowiednie zabezpieczenie, i czy projekt który został wygenerowany jest zgodny z konwencjami, i dobrymi praktykami.

 

Co mają generatory do projektu?

Na początku napisałem, że post jest o projekcie, jednakże do tej pory pisałem o generatorach. Jest to nawiązanie do tego, że na projektowym GitHubie znajduje się katalog “frontend” którego zawartość pochodzi właśnie z generatora FountainJS, a więc jest to technologia, którą zastosowałem w swoim projekcie.

 

Co jeszcze zrobiłem w projekcie?

Oprócz wygenerowanego frontendu, jest też szkielet projektu opartego o Spring Boot z wykonaną konfiguracją połączenia z bazą danych, oraz dokonana została konfiguracja Mavena, tak aby podczas budowania całego projektu, uruchamiany był również proces budowania frontendu.

 

Dziękuję tym którzy dotrwali do końca, innym również dziękuję za chęci do przeczytania tego wpisu. Do zobaczenia w piątek.

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s