Dotychczas, w wielu wpisach na temat React na tym blogu, jako punkt startowy dla przedstawianych przykładów używałem generatorów Yeoman. Nadal uważam, że jest to świetne, bardzo przydatne narzędzie, jednak czasem przychodzi taki moment, że to nie wystarcza. Jedną z alternatyw dla tego podejścia jest wykorzystanie gotowych “starter-kitów”. Jest ich na GitHubie całkiem sporo, tak więc jest w czym wybierać. Ja przedstawię Ci dziś 2 startery React, z których sam miałem okazję już korzystać i mogę Ci je z czystym sumieniem polecić!

Czym jest starter-kit?

Zanim przejdę do przedstawienia moich propozycji, warto wyjaśnić czym w ogóle jest taki starter-kit… Jak na pewno wiesz, sam React to tylko biblioteka pozwalająca budować interfejsy użytkownika za pomocą komponentów.

Jeśli jednak połączymy React z takimi bibliotekami jak na przykład react-router i Redux, otrzymujemy coś bliższego klasycznej definicji frameworka JavaScript. Nie są to jednak jedyne możliwości - zamiast wspomnianych bibliotek można użyć, na przykład, universal-routera oraz MobX. To jest duża zaleta (choć też pewne utrudnienie) świata React, że mamy możliwość samodzielnego doboru bibliotek, z których zbudujemy nasz stos technologiczny.

W opozycji do tego podejścia stoją klasyczne frameworki JavaScript, takie jak na przykład Angular. W tego typu podejściu ktoś już o wszystkim pomyślał, dzięki czemu takie problemy jak “routing” aplikacji czy kwestie architektoniczne są poniekąd narzucone przez sam framework. Po angielsku mówi się że taki framework jest “opinionated” - nie wiem jak to dobrze na polski przetłumaczyć… jakieś propozycje?

zestaw narzędzi

I tutaj dochodzimy do sedna, czyli tego czym jest starter-kit Reacta. Otóż myślę, że można powiedzieć, że jest to pełny, “opinionated” framework zbudowany w oparciu o technologie Reactowe. Jest to zebrany do kupy, przemyślany przez kogoś doświadczonego, zestaw bibliotek pozwalających zbudować zaawansowaną aplikację. Zresztą nie ogranicza się to tylko do doboru bibliotek. Tego rodzaju starter-kit posiada też, na przykład, gotową strukturę katalogów, pełen zestaw komend pozwalających uruchamiać, testować i “deployować” aplikację itd.

Jest to więc świetny punkt startowy do budowy czegoś fajnego. A, że nadal jest to React to zawsze mamy możliwość wymiany jakiejś biblioteki na inną, jeśli akurat będzie taka potrzeba.

Za chwilę więc przedstawię Ci 2 startery React - oba pozwalają na tworzenie uniwersalnych/izomorficznych aplikacji React i oba mogę polecić!

React Starter Kit

Pierwszym z omawianych dziś starter-kitów jest ten, którego nazwa mówi sama za siebie - po prostu React Starter Kit. Starter ten zastosowałem między innymi do zbudowania front-endu dla mojego agregatora polskich blogów o front-endzie.

Głównym kryterium jakim się kierowałem przy wyborze tego starter-kita było to, aby był on przystosowany do tworzenia aplikacji izomorficznej. Starter ten posiada dobrze skonfigurowany server-side rendering oparty standardowo, na bibliotece express.js.

Poza tym cały build process oparty jest na webpacku (w połączeniu z Babelem, więc kod tworzymy z użyciem najświeższej wersji języka JavaScript) i skryptach npm. Do naszej dyspozycji oddano cały szereg komend ułatwiających pracę, łącznie ze skryptami deploymentowymi, które łatwo skonfigurować do współpracy zGitHub Pages, Heroku oraz Azure. Możliwy jest tez łatwy deployment dla dockera.

Warto wiedzieć, że w tym starterze zamiast najpopularniejszego react-routera, zastosowano bibliotekę universal-router (tego samego autora co cały starter). Dla wielu osób może to być więc małe utrudnienie - trzeba poznać nowe narzędzie. Sama biblioteka jest całkiem prosta i przyjemnie się jej używa.

React Starter Kit nie jest standardowo zintegrowany z Reduxem. Dostępny jest jednak specjalny branch, w którym ta integracja jest dodana. Dlatego, jeśli chcesz użyć tej biblioteki to sklonuj wersję z brancha z Reduxem zamiast z mastera.

Zaletą (albo wadą, zależy jak na to spojrzeć) tego startera są też dość restrykcyjne reguły ESLint - nie do końca “moje” więc musiałem trochę czasu poświęcić na dostosowanie ich do swoich potrzeb. Dobrze jednak, że są i nas pilnują.

narzędzia front-end developera

Este

Drugim starterem, których chciałbym Ci dziś polecić jest Este. Startera tego używałem już jakiś czas temu i widzę, że mocno się od tego czasu rozwinął.

Główną zaletą tego stosu technologicznego jest podejście: “One stack for browser, mobile, server”! Możemy więc za jego pomocą zbudować zarówno zwykłą aplikacją client-side, aplikację izomorficzną (uniwersalną) jak i jej wersję mobilną.

Build process w Este również oparty jest na webpacku ale do automatyzacji użyto Gulpa, w którym skonfigurowano mnóstwo przydatnych tasków. Tutaj także mamy też dostępne skrypty deploymentu wspierające takie popularne platformy jak: Heroku, Now oraz Firebase.

W Este, podobnie jak w React Starter Kit zrezygnowano z react-routera na rzecz biblioteki found. Jest to zmiana od czasu kiedy ja używałem tego startera i tutaj, szczerze mówiąc, trudno mi cokolwiek powiedzieć o tym wyborze.

W odróżnieniu od wcześniej omawianego startera, Este jest na dzień dobry oparty na Reduxie. Do tego dodano też wsparcie dla Flow, mamy więc setup wspierający statyczną kontrolę typów!

Ogólnie w moim odczuciu Este jest trochę bardziej rozwiniętym starterem, dedykowanym do trochę większych zadań. Z drugiej strony wsparcie dla urządzeń mobilnych w jednym projekcie jest całkiem kuszące i z tego powodu warto rozważyć ten starter-kit.

2 startery React - podsumowanie

Korzystanie ze starter-kitów ma pewne wady… Rozpoczęcie pracy z nimi polega na sklonowaniu do siebie danej wersji startera i budowaniu na niej swojej aplikacji. W tym czasie autorzy starter-kitu mogą intensywnie go rozwijać i dużo w nim zmieniać. Niestety nie ma łatwego sposobu na wciągnięcie tych aktualizacji do siebie. Dlatego też wybór startera trzeba rozpatrywać jako wybór stosu technologicznego na dany moment - późniejsze zmiany w nim trzeba wykonywać we własnym zakresie.

W sieci dostępnych jest całe mnóstwo tego typu starter-kitów. Opisane wyżej 2 startery React należą do tych mocno “opinionated”. Nie zawsze jest to nam potrzebne warto więc zrobić porządny przegląd użytych w danym rozwiązaniu bibliotek i na tej podstawie podjąć świadomą decyzję. Ze swojej strony mogę tylko powiedzieć, że opisane dziś startery są godne polecenia do “cięższych” zastosowań.

P.S. Spory przegląd starter-kitów React znajdziesz tutaj - myślę, że może się to przydać przy wyborze…