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 zanim zaczniemy sobie pisać właściwy kod w graphql
to najpierw wypadałoby właśnie wytłumaczyć na czym on w ogóle polega jeśli
nie miałeś nie miałaś kontaktu wcześniej z graphql to nie przejmuj się
nie musimy tutaj być mistrzami graphql żeby korzystać z gatsby zresztą jeden
z feature'ów gatsby właśnie będzie nam pomagał w tym żeby pisać to query ja
przyznaję się jak pisze produkcyjny kod to też nie piszę tego z pamięci
tylko właśnie wykorzystuje to narzędzie które pokażę ci już za chwilkę natomiast zanim w ogóle to
zrobię to krótki wstęp czym jest graphql w dużym
uproszczeniu graphql jest po prostu specyfikacją języka który pozwala
nam komunikować się z serwerami lub też tworzyć po prostu api które
później możemy odpytywać i tutaj są właśnie takie dwie strony medalu z
jednej strony mamy tutaj graphql który stoi po stronie serwera i
graphql który stoi po stronie frontu gdzie po prostu piszemy
sobie query jakie dane chcemy zaczytać i czym to się różni od takiego zwykłego
api jeśli spojrzymy sobie na konstrukcję takiego rest api
to zawsze mamy tak że mamy jakiś faktycznie taki root
adres do którego możemy uderzać a później po slashu mamy kolejne jakby rooty
kolejne tak zwane end pointy które odpowiadają za inne części danych
naszej aplikacji to znaczy że w inne end pointy uderzymy kiedy chcemy zaczytać
na przykład informacje o graczach inne o zespołach inne
o meczach które były odbyte i podobnie jeśli chcielibyśmy modyfikować jakoś dane
na przykład związane z graczami no to wtedy zamiast geta wysyłalibyśmy
post request właśnie na endpoint players i to
właśnie charakteryzuje rest api że mamy wiele adresów na które możemy uderzać i co
więcej te adresy bardzo często wypluwają nam nawet
te dane których nie do końca potrzebujemy to znaczy że jeśli na przykład chcemy dostać dane o
graczach ale załóżmy że chcielibyśmy dostać tylko imiona to uderzając do endpointu
players dostaniemy imiona nazwiska numer porządkowy jakieś
tam może mecze powiązane może zespoły powiązane wszystko co dotyczy tych graczy
zostanie wyplute w naszym request to powoduje że dostajemy
często bardzo dużo więcej danych niż właściwie byśmy potrzebowali no bo wyobraźmy sobie że mamy
5000 graczy i dostajemy oprócz ich imion jeszcze właśnie te wszystkie
dane o których powiedziałem to jest naprawdę sporo danych transferowych które trzeba przerzucić
jakby do nas żeby po prostu dostać ten tę jedną odpowiedź na request
w graphql wygląda to zupełnie inaczej mamy jeden endpoint do
którego kierujemy nasze zapytania mówimy słuchaj endpoint my chcemy dostać
informację o graczach o zespołach i o meczach wysyłamy
jeden request dostajemy jedną odpowiedź z tymi danymi o które prosiliśmy
co więcej zaraz ci pokażę że jeśli chcemy dostać tylko
imiona naszych graczy to wystarczy że delikatnie zmodyfikujemy nasz request i
zawrzemy tam informacje słuchaj ja potrzebuję tylko i wyłącznie imiona nie chcę nic
więcej nie dawaj mi nic więcej i graphql to dla nas załatwi i dlatego jest
tak fajny jest naprawdę wygodny do korzystania a co więcej wykorzystanie
go po stronie klienta jest na prawdę bajecznie proste ale wróćmy jeszcze na sekundkę
do strony graphql ponieważ powiedziałem że to
jest specyfikacja języka to jest w ogóle język który został zaprojektowany przez
facebooka i niektórzy mogliby pomyśleć ale ja nie chcę przecież korzystać z facebookowych
narzędzi otóż graphql sam sobie nie jest narzędziem on jest tylko specyfikacją
to znaczy że implementacja tej specyfikacji leży po stronie niezależnych narzędzi
i jednym z nich jest na przykład apollo który jest implementacją graphql
zarówno dla serwerów jak i dla klientów jeśli wejdziemy
sobie w code wejdziemy do javascript to możemy zobaczyć że mamy tutaj cała listę graphql
narzędzi które możemy wykorzystać właśnie do używania graphql
w naszym projekcie to może być graphql js express graphql apollo server
to o czym mówiłam przed chwilą i wiele wiele innych tak
więc nawet jeśli ktoś ma obiekcje wobec facebooka to nie powinien graphql bezpośrednio z nim
kojarzyć ani się go obawiać bo tak jak mówię jest to tylko specyfikacja
wynaleziona przez tychy deweloperów dobra i to tyle jeśli chodzi o wstęp teoretyczny
a teraz przejdźmy sobie do strony która bardzo fajnie pokazuje właśnie
jak działa graphql można się trochę z tym pobawić i z racji że wykorzystuje
taki typ danych który jest bardzo popularny to łatwo sobie wyobrazić jakie typy
właśnie informacji możemy sobie wyciągnąć z tego api mowa
oczywiście o api gwiezdnych wojen które zostało napisane właśnie specjalnie
w graphql i strona na której teraz się znajdujemy do złudzenia przypomina
narzędzie graphql które będziemy wykorzystywać w gatsby więc
jest to też taki fajny wstęp do tego właśnie jak to wszystko działa po prawej stronie
mamy schema i documentation więc możemy sobie podglądać jakie
typy danych możemy sobie zaciągnąć z tego api to na początku wygląda dość skomplikowanie
więc na chwilkę to sobie jeszcze schowam później ci pokażę jak z tego korzystać
natomiast teraz napiszmy sobie nasze pierwsze query i obiecuję ci jestem naprawdę banalne
pierwsze co musimy zrobić to otworzyć klamry można to trochę traktować jako taki
trochę ładniejszy brat json to znaczy że ta
struktura klamrowa jest w graphql dość podobna teraz
zobacz co możemy zrobić po otwarciu klamer możemy nacisnąć control
i stację i api podpowie nam co my możemy właściwie
tutaj wyciągnąć i załóżmy że my chcemy sobie wyciągnąć all films
chcemy zobaczyć sobie tytuły wszystkich
filmów z gwiezdnych wojen na razie jak włączę
tutaj query to dostaniemy błąd że musimy tutaj dostać
sub selection jakieś czyli musimy jeszcze jeden podzbiór wyróżnić
więc dodajemy po spacji następną klamrę robimy po prostu kolejne
zagnieżdżenie i wewnątrz tutaj znowu mogę nacisnąć sobie control
i spację i poszukać tego o co mi chodzi widzę że mam tutaj
title teraz jak puszczę query to zobacz
że dostaliśmy tablice all films gdzie mamy kilka obiektów z
tytułami filmów o gwiezdnych wojnach oczywiście nie jest ona kompletna
w momencie kiedy ja to nagrywam wyszła właśnie ostatnia część gwiezdnych wojen więc się trochę jarem
ale no działa jak działa w każdym razie to co możemy zrobić
właśnie to zobaczyć sobie wszystkie tytuły możemy na przykład zobaczyć
sobie wszystkich reżyserów możemy sobie dodać
na przykład planety które się znajdowały podczas
tych filmów i tutaj widzę że mamy jakiś błąd więc pewnie planety
mają jakiś podzbiór nazwijmy to na przykład name
tutaj weźmy sobie name okej i mamy informację
że w nowej nadziei kręconej przez george'a lucasa pojawiły
się 3 planety czyli yavin 4 hoth i tatooine teraz
wyobraź sobie sytuację że podobny scenariusz mielibyśmy odegrać w rest api
i prawdopodobnie mielibyśmy po prostu endpoint który nazywałby się films
albo movies i on zwracał by nam wszystkie dane które
po prostu by zawierał pewnie by zawierał jeszcze jakieś id czy został
opublikoany czy na przykład jakie były tam postaci
na przykład po imionach i tak dalej i zauważ że tego by się robiło naprawdę
bardzo bardzo dużo już na sam jeden film przypada sporo danych więc
jest to dość problematyczne i to jest właśnie całe piękno graphql że my możemy
jeśli chcemy pobrać sobie tylko tytuł przez co wyobraź sobie jak
dużo danych zaoszczędzony właśnie pobierając tylko te kilka linijek a
teraz zróbmy sobie coś ciekawszego załóżmy że chcemy tylko pobrać 1
film i chcemy pobrać
sobie postaci ich imiona co tu jeszcze mamy
mamy race nie mamy species może tak
species też można zgadywać czasami species ma jakieś sub
selection pewnie name jeśli
puścimy sobie to query to zobaczymy że mamy tutaj none of the following arguments provided
list id i title więc żeby pobrać
sobie konkretny film graphql oczekuje od nas że podamy jakiś tytuł chociaż
i musimy znaleźć sobie dokumentację właśnie która nam podpowie jak to wszystko napisać
więc teraz jeśli wejdziemy sobie w film to zobaczymy że możemy podać
title i string po prostu więc teraz jeśli otworzę sobie tutaj
nawias okrągły wpiszę title i podam a
new hope to dostaniemy informacje o nowej nadziei w
ten sposób możemy filtrować sobie nasze dane no bo jeśli zrobiłbym
tak to graphql tak naprawdę nie wie o jaki film mi chodzi tych filmów
było naprawdę sporo więc muszę po prostu podać mu jakąś dodatkową informację
dzięki której on po prostu znajdzie mi odpowiedni film trochę jak
w rest api jeśli to by było rest api no to mielibyśmy na przykład movies i tutaj musiałbym podać
id albo na przykład a new hope w taki sposób
albo na przykład movies i query param
name równa się a new hope i tak dalej w graphql wygląda to w ten
sposób że po nawiasach okrągłych przy tego typu zbiorach
możemy sobie po prostu definiować co my tutaj w ogóle czego my tutaj szukamy
i te filtry mogą się stać całkiem skomplikowane nawet ale
w naszym graphql w gatsby nie będzie to aż tak trudne więc
to tyle tytułem wstępu jeśli chodzi o graphql w następnej lekcji pokażę ci jak
gatby korzysta z graphql i w jaki sposób go wykorzystuje czym
jest graphql wbudowany w gatsby