Jeżeli do waszych Reactowych aplikacji podłączaliście niezliczone dodatkowe moduły takie jak serwery (express, koa), klientów lub serwery apollo, konfiguracje webpacka, pisaliście funkcje SSR (sever side render), oraz łączyliście to w całość, to na pewno zdajecie sobie sprawę z czasochłonności całego tego procesu. Gatsby.js może okazać się rozwiązaniem na te wszystkie problemy.
Development
Gatbsy.js to głównie React, Webpack i GraphQL, jeżeli znacie ten stack to właściwe cały system stoi przed was otworem, z automatu mamy dostęp do pisania (develop) w trybie Hot Module Reloading ( ten tryb jednak wymaga czasami restartu) i budowy plików statycznych. Piszemy w react'cie normlanie, dostraczamy dane lub treść za pomocą GraphQL, webpack nam to wszytsko \"bundeluje\" do kupy i tak w ten sposób mam prawie gotowy produkt.
Gatsby zdobył już ogromną popularność i posiada wiele gotowych rozwiązań, ekosystem pluginów jest naprawdę duży. SASS, LESS, CSS Inline, PWA - Offline,Css modules, transformer-remark, gatsby sharp image, tego wszystkiego jest naprawdę dużo. Oficjalna lista pluginów na https://www.gatsbyjs.org/plugins/.
To właśnie ten ekosystem gotowych rozwiązań skusił mnie najbardziej do zastosowania gatsby.js w komercyjnych projektach. Dość szybka implementacja wszystkich niezbędnych funkcji aplikacj React, zautomatyzowaniu procesu podłączenia (service.worker.js) Proggressive Web App, super szybkich przejść pomiędzy stronami (pre-fetch, za pomocą \"native\" gatsby-router-link) oraz wielu innym gotowym rozwiązaniom sprawił, że zakochałem się w tym systemie tworzenia stron internetowych. Jest on kompilacją wszystkich moich ulubionych narzędzi, jakich używałam wcześniej, ale teraz nie muszę się nimi opiekować i aktualizować na bieżąco.\
Muszę też przyznać, że dokumentacja techniczna jest dość dobrze i przejrzyście zorganizowana. I wszystko dział, jak trzeba. Nie doświadczyłem większych problemów przy tworzeniu aplikacji webowych w ten sposób. Z szybkich rad mogę tylko zwrócić uwagę na to, że przy stosowaniu css modules, pliki muszą mieć końcówke cośtam.modules.css (lub .scss). W wersji developerskiej plik bez koncówki \"modules\" działa zaś przy wersji produkcyjnej nie. Spędziłem trochę czasu zanim wychwyciłem o co chodzi.
Gatsby produkuje pliki statyczne, ale czy to znaczy, że możemy je wcisnąć na każdy serwer hostingowy, jaki jest dostępny w Polsce ? Polecałbym zastosowanie serwera z silnikiem node.js. Jednakże wszytsko także zależy od pluginów i naszej strony. Może okazać się, że zwykła strona na gatsby, pojdzie na każdy serwerze.\n\nSam stawiając stronę wybrałem operatora https://netlify.com. Możemy na nim postawić \"mniejszą\" stronę za darmo (do 100 000 wejśc w mieśiącu) wraz z certyfikatem SSL( za darmo Let's Encrypt), oraz możliwą integracją z ich dość prostym system CMS, Netlify CMS. To dość prosty panel do obsługi treści, będzię wymagał od nas konfiguracji, zrobienia podglądu wpisów. Działa on zasadzie edycji projektu przez wersji GIT, a dokładnie na edycji plików markdown, które są jednym ze sposobów dostarczania treści w frameworku Gatsby.
Jednakże, dlatego że GraphQL jest głównym silnikiem treści w Gatsby.js, mamy dowolność w podłączaniu jakichkolwiek danych, jakie będą nam potrzebne, z automatu mamy dostęp do pluginów, które pomagają połączyć się z Wordpressem, Drupal, GraphCMS, itd.
Beyond Static
Warto zauważyć, że pomimo tego, iż jest to generator stron statycznych, nasza aplikacja nie musi być statyczna, co często chyba się zdarzać mysleć deweloperom.\nCiągle możemy zstosować gatsby.js do sklepów, czatów ... i bardziej dynamicznych aplikacji. Ciągle mamy dostęp do wszystkich component life cycles w React. Musimy wtedy dostarczyć baze pod aplikacje, a resztę doładujemy w Component Did Mount na bieżąco. Jednakże ze względu na SEO, musimy pamiętać że ta dynamiczna treśc nie będzie czytna przez roboty i crawlery.
Produkt końcowy i szybkość\nGatsby.js urzeka szczególnie swoją prostotą obsługi oraz tym, że za pomocą dużego systemu pluginów skraca pracę deweloperom. Może się okazać bardzo cennym narzędziem nawet przy budowie dużych aplikacji webowych.\n\nGatsby.js chwali się swoją zawrotną szybkością i jest ona rzeczywiście odczuwalna, szczególnie przy ładowaniu czy nawigowaniu stron aplikacji. Nie znaczy to jednak, że z automatu osiągniemy wynik 100 / 100 w Google Page Speed Insights. Nad tym wynikiem będziemy musieli sami pracować, używając własnych narzędzi lub niektórych z pluginów gatsby (Uncss, Css-inline, Gatsby-Image).
Jeżeli lubicie pracować z React.js, a chcielibyście sobie skrócić czas robienia aplikacji webowych to gorąco polecam gatsby.js. Na moim koncie w github, znajdziecie parę projektów zbudowanych o gatsby.js wraz z mini starterem gatsby.js z trochę większa ilością pluginów niż tzw golas.