Szybkie i Nowoczesne Strony
4 godz. 29 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorI tak i nie! Gatsby to faktycznie React wzbogacony o pewne supermoce. Na początku kursu dowiesz się, jak poprawnie ich używać. Opowiem Ci w jaki sposób zaszyto Reach Router we wnętrze Gatsbyego – zobaczysz, że to bardzo intuicyjne i wygodne rozwiązanie. Ponadto opowiem Ci, w jaki sposób tworzyć uniwersalne, globalne style i layouty dla naszej aplikacji, aby zaoszczędzić sobie pracy. W tym wszystkim pomogą nam pluginy przygotowane specjalnie dla Gatsbyego (psst! Czy wiesz, że Gatsby posiada ich ponad 1500?).
Nie masz konta na fejsie? Nie szkodzi! Facebook stworzył nie tylko popularną platformę społecznością (i Reacta 😎), ale także przełomową specyfikację dla GraphQL – języka służącego do komunikacji między klientem a serwerem. To właśnie GraphQL zasila Gatsbyego w warstwę danych. Nie ważne czy mówimy o obrazkach, plikach markdown, json, yaml czy po prostu API – aby to wszystko ze sobą pogodzić musisz znać GraphQL. A ja w tym kursie pokażę Ci, że korzystanie z niego to czysta przyjemność.
Na początku pomysł importowania obrazów przez GraphQL może Ci się wydawać przerostem formy nad treścią. Dlatego poświęciłem w tym kursie cały dział na to, aby pokazać Ci, jak potężne możliwości stoją przed developerem wyposażonym w GraphQL, Sharp Image Transformer oraz Gatsbyego. Zapomnij o skalowaniu, przerabianiu i dostosowywaniu obrazków ręcznie w programach graficznych. Sprytne rozwiązania w Gatsbym pozwolą Ci za pomocą paru linijek zoptymalizować zasoby wizualne dla twojej strony.
Zarządzanie treścią to krytyczny punkt wielu produktów cyfrowych – z jednej strony CMS (content management system) musi być użyteczny dla developera przygotowującego całą strukturę treści, ale z drugiej strony ich końcowym użytkownikiem zawsze jest edytor, który nie musi znać się na programowaniu. W tym kursie pokażę Ci, jak w dosłownie kilku krokach stworzyć wygodną w użyciu strukturę dla bloga w oparciu o pliki markdown. Z małym udziwnieniem. Będą to pliki MDX łączące prostotę plików markdown z potężnymi możliwościami Reacta.
HeadlessCMS to podejście, które może przywoływać na myśl horrory klasy B, natomiast ich działanie przyprawia o zachwyt rodem z komedii romantycznej. Gdy zobaczysz jak proste, intuicyjne i wygodne (zarówno dla developera i edytora) jest korzystanie z podejścia headless, już nigdy nie wrócisz do klasycznych CMS-ów. W tym kursie pokażę Ci to na przykładzie fenomenalnego produktu jakim jest DatoCMS, którego odkryłem podczas budowania dużej struktury informacji dla strony mojej firmy.
Deployment strony w Gatsbym zajmuje dosłownie kilka sekund, zwłaszcza jeśli użyjemy do tego odpowiednich narzędzi. W tym kursie dowiesz się, w jaki sposób Gatsby przygotowuje zasoby przed wysłaniem ich na serwer, skąd biorą się dane w Gatsbym oraz w jaki sposób wdrożyć gotową stronę za pomocą serwisu Netlify.
Ten kurs powstał z myślą o osobach, które chcą być na bieżąco ze zmieniającym się ekosystemem frontendowym. Kurs koncentruje się nie tylko na Gatsby.js, ale także na technologiach orbitujących wokół tej technologii, korespondujących z nowym trendem nazwanym JAMStack.
2.19.12+
Okej zaczynamy trzecią lekcję i tym samym ostatnią lekcję teoretyczną
chciałbym tylko jeszcze szybko wytłumaczyć dlaczego i kiedy warto
korzystać z gatsbiego jakie są jego wady jakie są zalety uważam że to wszystko
trzeba wiedzieć żeby po prostu świadomie poruszać się po ekosystemie i
javascript i react generalnie wyrabianie sobie opinii na temat
każdej technologii jest po prostu dobre próbowanie nowych rzeczy jest dobre bo
dzięki temu wiemy co do czego służy i to jest podstawa w dzisiejszych czasach ponieważ
ten przybornik frontendowca ten zasób narzędzi jest
naprawdę ogromny i trzeba wiedzieć z czego korzystać więc spójrzmy sobie
na taki prosty wykres i weźmy pod uwagę cztery
rzeczy przede wszystkim łatwość utrzymania czyli to jaką mamy infrastrukturę
jaki mamy kod jaki mamy próg wejścia do tego projektu czyli
jak prosto pisze się w danej technologii drugą rzeczą jest wydajność czyli
to jak szybko nasza aplikacja działa jak szybko się ładuje to wszystko
co związane z performancem znajdziemy właśnie w drugim rzędzie dalej
mamy seo tego chyba nie trzeba tłumaczyć search engine optimization
i na końcu mamy często modyfikowanie danych tutaj bardziej to jest czynnik
niż cecha po prostu wprowadzamy tutaj taką
zmienną na zasadzie jak często nasze dane w na przykład
blogu na stronie są modyfikowane jak często muszą być
zaczytywane właśnie przez naszą aplikację więc teraz przechodzimy już do łatwości
utrzymania i tutaj bezapelacyjnie moim zdaniem najłatwiejszą technologią
ze wszystkich trzech wymienionych w tym kursie jest gatsby przede
wszystkim dlatego że ma swoje cli czyli narzędzie do
tworzenia wstępnej konfiguracji wstępnego szkieletu projektu
nie jest to tak jak w przypadku create-react-app jakaś taka
dziwna paczka którą trzeba ejectować jeśli chcemy zrobić jakieś dziwne rzeczy
w webpacku tutaj do webpacka mamy wjazd bez problemu właśnie za
pomocą api gatsby możemy się do niego dołączyć po prostu więc jest to na
pewno łatwiejsze niż create-react-app z drugiej strony w
next musimy jednak trochę ogarniać node to jak działa właśnie routing na serwerze
i tak dalej więc to też nie jest najprostsza rzecz
next ma bardzo niski próg wejścia jeśli chodzi o początki natomiast później im dalej
w las tym więcej drzew i robi się naprawdę dość trudno natomiast gatsby
moim zdaniem od początku do końca fajnie prowadzi nas za rękę a do tego dokumentacja
tej technologii jest naprawdę doskonale przygotowana chyba najlepiej z tej całej trójki
więc jeśli chodzi o łatwość pisania kodu o próg wejścia
to jest to najprostsze rozwiązanie jeśli chodzi o infrastrukturę
czyli serwer to react i gatsby mają podobnie czyli możemy jest
zhostować na takich najprostszych serwerach to już mówiłem poprzedniej lekcji natomiast next
oczywiście tutaj się wybija tutaj musi mieć instancje w eps i no
trzeba sobie zdawać sprawę z tego że to jest bardzo droga impreza w porównaniu
do takiego prostego serwera tutaj jednak ten koszt będzie dużo wyższy jeśli
chodzi o wydajność to tutaj znowu gatsby wygrywa moim zdaniem ponieważ w
porównaniu do next on nie musi nic renderować na serwerze w porównaniu do
reacta nie musi nic renderować po stronie klienta no chyba że sobie tego
życzymy i robimy to celowo ale trzeba sobie z tego zdawać sprawę natomiast
większość rzeczy będzie wyrenderowana w trakcie tego builda i
wrzucana jako wyrenderowane pliki serwer więc te dwie technologie
nie mogą równać się z gatsbym pod tym względem jeśli chodzi
o wydajność o jakieś tam efekty w light housie na przykład który
sprawdza nam robi nam audyt naszej strony i sprawdza jak szybka jest nasza strona
pod wieloma względami to w wielu przypadkach out-of-the-box
w ogóle bez żadnego problemu gatsby będzie nam dawał stówę
na 100 punktów w tym light housie od samego początku i naprawdę
trzeba się postarać żeby te wyniki zepsuć bo wszystko co gatsby robi robi
po to właśnie żeby optymalizować od razu naszą stronę praktycznie za nas
tworzenie manifestu do pwa tworzenie
pluginów które optymalizują działanie offline naszych aplikacji
to wszystko jest dostępne od ręki automatycznie w gatsby praktycznie
od zaraz więc pod tym względem pod względem wydajności jest
to po prostu najlepsze narzędzie później mamy nexta który oczywiście ma
ssr server side rendering przez co jest wydajniejszy niż react
w bardzo wielu przypadkach chociaż tutaj też nie jest to aż tak jasne i
są przypadki kiedy react będzie szybszy wszystko trzeba tutaj
rozważyć to nie jest kurs na tego typu dywagacje to jest taki nazwijmy
to uproszczony wykres po prostu chciałem tutaj zaznaczyć że gatsby
z tej trójki jeśli chodzi o wydajność na pewno bezapelacyjnie wygrywa
jeśli chodzi o seo to next i gatsby są na tym samym poziomie
ponieważ w jednym i w drugim przypadku wyrenderowane pliki trafiają
do naszej przeglądarki to że stąd idąc z serwera z nexta to praktycznie
nic nam nie zmienia no bo nasza przeglądarka widzi to samo a seo to po prostu roboty
czy google czy jakiejś innej wyszukiwarki które przeszukują nasze strony i dostanie
dosłownie to samo co nasza przeglądarka czyli wyrenderowany html gorzej
jest przypadku reacta który mimo że jest renderowany przez
przez roboty google jest odczytywany to
nie dość że ten odczyt ma opóźnienie około dwóch tygodni to jeszcze mimo
wszystko robot google nie jest głupi i wie że jest to aplikacja reactowa
jest to aplikacja która ma client side rendering i przez to dostaje
trochę gorsze indeksowanie w porównaniu do wyrenderowanych od razu aplikacji
i być może tutaj ten odstęp jest zbyt wielki może ten react nie radzi
sobie aż tak tragicznie jak to zaznaczyłem ale chciałem zaznaczyć że te dwie technologie
na prawdę odsadziły react pod tym względem dość mocno i
jedyną rzeczą w której gatsby przegrywa jest częste modyfikowanie danych ponieważ w
przypadku reacta dane są pobierane podczas wyświetlania naszej strony
w przypadku nexta dane są pobierane podczas renderowania naszej
strony na serwerze natomiast w przypadku gatsbiego dane są pobierane w momencie
builda czyli jeszcze przed wrzuceniem plików na serwer w momencie kiedy coś się zmieni
w naszym cms to musimy niestety przebudować całą naszą stronę
i wysłać ją ponownie na serwer to zajmuje kilka minut to zajmuje tak od 3 do 10
minut zależnie od tego jak dużą mamy stronę im większa tym dłużej się renderuje
ale jednak zajmuje to czas nie zawsze jest to ogromny minus jeśli wrzucamy
jeden post na 3 dni jeśli wrzucamy jakąś aktualność raz na 3
dni jeśli nasze treści nie muszą natychmiast pojawiać się u klientów
mogą pojawić się za parę minut jeśli nie jest to jak to się mówi mission critical to
można spokojnie wybrać tego gatsbiego ale jest to rzecz którą oczywiście trzeba
dla uczciwości zaznaczyć w tym kursie więc jakie są zalety
gatsbiego przede wszystkim bardzo niski próg wejścia ponieważ piszemy tutaj w react
react jest przyjemną technologią bezapelacyjnie jeśli widziałeś widziałaś
moje poprzednie kursy na to na pewno o tym wiesz że jest to po prostu fajna
technologia do pisania na frontendzie poza tym przyjemność
pracy i konfiguracji w przeciwieństwie do react mamy tutaj naprawdę bardzo prostą
konfigurację dodawanie pluginów jest bajecznie proste nawet jeśli chcemy
coś zmienić w webpacku możemy to zrobić korzystanie z api gatsby jest po
prostu bajeczne i wszystko w dokumentacji gatsbiego jest opisane doskonale
także naprawdę polecam doskonała dokumentacja
to jest kolejny krok setki pluginów w tej chwili gatsby
ma około 1500 pluginów z tego co pamiętam jest to jeszcze więcej
i to mówi jedno jeśli jest jakiś problem z którym
sobie nie możesz poradzić to prawdopodobnie jest na to plugin kolejną rzeczą
jest reaktywność na zawołanie bo tak jak mówiłem gatsby co prawda
renderuje nam pliki statyczne które później wrzucamy na serwer ale
to nadal jest react który po wyświetleniu naszej strony nawadnia ją
czyli to jak już mówiłem rehydration następuje tak zwane to jest dobrze opisywane
właśnie w dokumentacji gatsbiego działa to w ten sposób że jeśli
chcemy żeby coś w naszym kodzie było reaktywne to po prostu trzymamy się tego na przykład jeśli
chcemy pobrać jakieś dane asynchronicznie to zamiast używania graph ql
o którym później opowiem w tym kursie używamy po prostu na przykład axiosa
który asynchronicznie pobierze nasze rzeczy do aplikacji
a następnie gatsby to wyświetli nie ma tutaj żadnego problemu gatsby
jest api agnostic chodzi tutaj o to że dane może pobierać naprawdę
skądkolwiek to może być cms to mogą być pliki
markdown to moga być pliki json to może być jakieś api na przykład nie
wiem instagrama to może być dowolny api to może być wordpress który
po prostu wysyła nam za pomocą json api dane cokolwiek chcemy
gatsby sobie z tym na pewno poradzi i bardzo prawdopodobne że będzie na to
plugin co też pokażę ci w tym kursie wydajność strony jest tutaj praktycznie od
ręki to już mówiłem wcześniej na light house wyniki z
sto na sto nie są niczym dziwnym w gatsby i polecam ci to sprawdzić po tym kursie i
jak ten performance zachowuje się właśnie w przypadku stron i aplikacji i
to co najważniejsze to to co działa w react zadziała też w gatsby ponieważ gatsby
pod płaszczykiem optymalizacji jest tak naprawdę reactem
i to jest właśnie fajne w nim oczywiście gatsby nie jest
pozbawiony wad tak jak każda technologia ma swoje wady i ma swoje zalety przede
wszystkim trzeba znać react jeśli ktoś nie zna react to nie ma co się brać
za gatsbiego może natomiast zacząć uczyć się react od gatsby bo to api jest całkiem
podobnie tylko że wtedy dość ciężko będzie przejść na samego reacta bo
będzie przyzwyczajona do tych wygodnych rzeczy które same działy się w gatsby kolejną
wadą gatsbiego jest to że sporo rzeczy gdzieś tutaj auto magicznie to jest
taki fajny termin który lubię stosować zapożyczyłem go gdzieś
z sieci w każdym razie chodzi tutaj o to że część rzeczy będą będzie
się działa pod silnikiem pod maską właściwie gatsbiego i nie będziemy
za bardzo o nich wiedzieć dopóki nie wywali nam jakiegoś dziwnego błędu i
debugowanie większych stron w gatsby bywa czasami problematyczne
ale z czasem idzie się z tym oswoić i po prostu wiemy już czego szukać
i w którym miejscu więc nie jest jakiś ogromny problem ale na początku ta
magia po prostu nam pomaga no bo zdejmuje z nas ciężar pewnych
optymalizacji które inaczej musielibyśmy wykonać sami problemem
gatsbiego jest też to że ten build czyli to budowanie właśnie ten proces
tworzenia wyrenderowanych plików ogromnych stron trwa dość długo może
trwać naprawdę bardzo długo jeśli to są na przykład setki tysięcy stron więc
zależy od skali projektu czy tego gatsbiego warto wybrać bo jeśli mamy setki
tysięcy stron no to lepiej pewnie wybrać next który wyrenderuje tylko te
o które zapytamy a nie wyrenderuje wszystkie tak zrobi to gatsby bo on musi
przygotować absolutnie wszystko co tylko może się wyświetlić na stronie wcześniej
właśnie na etapie builda i konieczność przebudowywania
strony po zmianie w cms to jest ostatnia wada którą bym tutaj wyróżnił w
przeciwieństwie do reacta czy nexta nie jest to tak szybkie i nie jest to instant nie jest to natychmiast
po prostu musimy chwilę poczekać na to aż gatsby się przebuduje
i to zajmuje czas nie zawsze to jest ogromna wada już o tym mówiłem ale warto
o tym pamiętać i to tyle jeśli chodzi o wstęp teoretyczny do tego kursu
teraz zaczynamy już tworzyć projekt w gatsby zapraszam