/ react

Gatsby JS

Generator stron statycznych Gatsby.js

To generator stron statycznych oparty o bibliotekę React.js oraz GraphQL. Jest to framework zbudowany z myślą o deweloperach korzystających z tej popularnej biblioteki User Interface. Jeżeli jesteś deweloperem pracującym w React to będziesz się czuł z Gatsby jak w domu. Nie ma zbyt wielkich róznic w procesie rozwijania lub pisania aplikacji pomiędzy Gatsby.js a popularnym i preferowanym trybem CRA (Create React App) od Facebook'a.

Z czym to się je ?

Gatsby.js w wersji produkcyjnej tworzy czyste pliki HTML. Jak pewnie większość z was wie, czysty HTML jest potrzebny do właściwego i szybkiego pozycjonowania strony. Większość aplikacji React tworzonych za pomocą CRA (Create React App) jest zupełnie nieprzystosowana do tego zadania. React tworzy większość elementów "on the go" co oznacza, że kod źródłowy strony z aplikacja React może zaczynać się i kończyć na

<div class="id"></div>

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.

gats

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, jakie 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ła tak jak potrzeba. 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 nie zapisano odpowiednio działa, to przy wersji produkcyjnej głowiłem się przez pare minut, o co chodzi.

Deployment

Gatsby produkje pliki statyczne, ale czy to znaczy, że możemy je wcisnąć na każdy serwer hostingowy jaki jest dostępny w Polsce ? Na pewno potrzebny będzie wam serwer obsługujący node.js i to najlepiej z kontrolą wersji.

Sam "stawiając" taką 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, jako ż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.

Produkt końcowy i szybkość

Gatsby.js użeka 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.

Gatsby.js chwali się swoją niezawrotną szybkością i jest ona rzeczywiście odczuwalna szczególnie przy ładowaniu oraz nawigowaniu stron aplikacji. Nie znaczy to jednak, że z automatu osiągniemy wynik 100 / 100 w Google Page Speed Insights. Na tym wynikiem będziemy musieli sami opracować, 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.

Pozdrawiam
SpaceGhost