Demistifying JAMstack: wywiad z Philem Hawkworth

Niektórzy z was mogli słyszeć o JAMstack, a może nawet o tym, jak przejść z WordPressa na Hugo, ale czy JAMstack jest realną opcją dla każdego rodzaju projektu?

Rozmawiałem z Philem Hawksworthem, inżynierem front-end, który (po 9 latach pracy w agencjach powrócił do pracy nad samodzielnym produktem) skupia się teraz na opracowywaniu strategii dla technologii JAMstack, aby budowanie dla sieci było prostsze, szybsze i nie tylko. bezpieczne. Phil będzie również współgospodarzem JAM_stack ldn, konferencji poświęconej generatorom stron statycznych, bezserwerowym i JAMstack, która odbędzie się w Londynie w dniach 9–10 lipca.

Witalij: Witam i zapraszam na jedną z naszych rozmów z naszymi prelegentami na Smashing Conf i ogólnie miłymi ludźmi. Być może pamiętasz te czasy, kiedy FTP był wielką rzeczą i być może nadal wdrażasz, dlaczego FTP jest całkowicie bezpieczną przestrzenią, więc nie musisz się o to martwić. Ale zmiany są duże, ponieważ nie używasz już FTP i zamiast tego przechodzisz do przepływów pracy opartych na Git i prawdopodobnie ciągłego wdrażania. Wszystkie te wymyślne gwizdki i dzwonki. Dlatego dzisiaj bardzo się cieszę, że mogę powitać Phila Hawkswortha, który faktycznie pracuje w Netlify, Developer Relations [niesłyszalne 00:10:00]. Witaj Phil. Jak się masz dzisiaj?

Phil: Świetnie, jak się masz Witalij? Miło cię widzieć.

Witalij: Aw, świetnie mi idzie. Zawsze miło cię widzieć. Jesteś jak słońce, które transmituje Netlify, Jump Stack i wszystko inne.

Phil: Próbuję. Nie jestem nawet naznaczony, co za stracona okazja.

Witalij: W porządku, w porządku. Ale musisz mi powiedzieć, więc ten klejnot, jen lub jeet, jak, jem? Czy to jem?

Phil: Dżem. To dżem. Chodzi o dżem.

Witalij: To wszystko dżem. Więc stos JAM. Dla programistów lub projektantów, właściwie nigdy wcześniej nie słyszałem tego terminu. Gdybyś chciał to może podsumować co to jest i dlaczego jest dobre i jakie są z tego korzyści w pierwszej kolejności. Dlaczego miałbyś kiedykolwiek chcieć przejść z tradycyjnego, dobrego stacka na JAMstack. Może mógłbyś to krótko podsumować.

Phil: Zobaczę, czy mogę spróbować, bo kuszące jest powiedzenie: JAMstack, JAM to skrót od JavaScript, API i makiety. Ale to samo w sobie nie wyjaśnia zbyt wiele, wystarczy wiedzieć, co to oznacza. Tak naprawdę JAMstack polega na sposobie wdrażania i obsługi witryn internetowych, które nie opierają się na serwerze pochodzenia, nie polegają na żądaniach trafiających cały czas na aktywny serwer.

Phil: Więc możesz być bardziej zaznajomiony ze stosami, takimi jak stos LAMP, którym były Linux, Apache, MySQL i PHP, to był rodzaj stosu, który obsługiwał tam twoją witrynę. Z JAMstack jest trochę inaczej, ponieważ przesunęliśmy się na wyższy poziom, z dala od serwera i bliżej przeglądarki, więc dużo myśli o jak najszybszym wejściu do przeglądarki, a następnie wykorzystaniu technologii w przeglądarce do ulepszyć i wzmocnić go później. Tak więc JAMstack polega na wstępnym renderowaniu witryn, umieszczaniu ich w przeglądarce, a następnie może ulepszaniu ich, rozszerzaniu, doświadczeniu z JavaScriptem działającym w przeglądarce, może wysyłaniu żądań do interfejsów API i tego typu rzeczach.

Phil: Więc to jest model, próba ucieczki od posiadania serwera, który trzeba konserwować, ponieważ wiem, że utrzymanie serwera jest trudne. Nie wiem jak wy, ale mam wiele stron, które jakby zniknęły, gdy po prostu odwróciłem się od nich na kilka lat. Musiałem zaktualizować PHP, co oznaczało, że musiałem zaktualizować wersję Linuksa, którą zrobiłem raz na niebieskim księżycu. Tak więc utrzymanie serwerów jest trudne, więc ideą JAMstack jest próba jak najprostszego serwowania witryn jako zasobów statycznych, a następnie maksymalne wykorzystanie wszystkich interfejsów API i braków w przeglądarce, aby robić rozszerzenia i robić więcej rzeczy z ich tam.

Witalij: Tak, to ma sens. Cóż, w rzeczywistości przenieśliśmy się do JAMstack 2 lata temu, mniej więcej teraz.

Phil: Dwa lata?

Witalij: Tak, to była dla nas niezła podróż. Oczywiście po drodze nauczyliśmy się kilku lekcji. Ale zastanawiam się, czy powiedziałbyś, że zasadniczo każdy projekt mógłby w jakiś sposób skorzystać na przeniesieniu lub przeniesieniu niektórych jego części do JAMstack lub czegoś podobnego, gdzie widzisz jego ograniczenia? Czy jest to coś, co potencjalnie każdy programista mógłby wykorzystać w projekcie, czy jest to coś, co jest dedykowane określonej grupie stron internetowych lub grupie projektów?

Phil: Tak, mam na myśli, kuszące jest, aby powiedzieć, o tak, możesz go używać do wszystkiego, ale myślę, że powinieneś uważać, mówiąc to o każdej technologii. Wiesz, naprawdę musisz wybrać przypadki użycia i upewnić się, że jest dobrze dopasowany. Powiedziałbym, że pierwszym odruchem jest myślenie o witrynie JAMstack i może myślisz o czymś, co służy jako statyczne zasoby, może bezpośrednio z CDN. Możesz pomyśleć, że jest to dobre tylko dla witryn, które nie zmieniają się zbyt często, są cytowane w cudzysłowie, statyczne, nie zmieniają się. Ale w rzeczywistości tak nie jest, ponieważ istnieje teraz tak wiele narzędzi, które mogą zmniejszyć tarcia podczas wdrażania.

Phil: Możesz wdrażać wiele razy dziennie lub wiele razy na godzinę, jeśli chcesz i faktycznie sprawić, by sprawy wydawały się o wiele bardziej dynamiczne niż wcześniej. Więc niektóre z tych przypadków użycia, w których uważasz, że nie byłyby odpowiednie; one również wchodzą w skład owczarni. Czasami jednak staje się to trudne, gdy tworzymy witryny, które mają wiele stron, wiele setek tysięcy lub wiele milionów stron, ponieważ model JAMstack naprawdę ma sens, gdy możesz wstępnie wygenerować swoją witrynę więc możesz używać statycznego generatora witryn. W tej chwili są one naprawdę modne; te są naprawdę bardzo popularne.

Phil: Ale oczywiście muszą wykonać pewną pracę za każdym razem, gdy wdrażają aktualizację, więc jeśli masz witrynę, na przykład witrynę gazety, która ma wiele milionów stron, pracę wymaganą do ponownego wygenerowania może być dość, wiesz, może to zająć dużo czasu, więc wtedy zaczynasz napotykać pewne ograniczenia, w których JAMstack może być po prostu używany. Możesz zacząć być trochę przebiegły i zacząć to obejść, jeśli wiesz, że jesteś bardzo, bardzo przebiegły, ale na pewno stwarza to pewne wyzwania.

Phil: Jedną z rzeczy, które zaczynam widzieć w różnych generatorach stron statycznych, jak na przykład Gatsby czy React Static, a także Hugo. Zespoły odpowiedzialne za te statyczne generatory witryn zaczynają badać sposoby na progresywne generowanie stron, więc innymi słowy, nie należy ponownie wdrażać całej witryny ani ponownie generować całej witryny za każdym razem, gdy coś się zmienia, ale próbować znaleźć sposoby robić przyrostowe kompilacje. Jest to dość trudny problem do przezwyciężenia, ale w tej chwili trwają prace nad tym, co pomoże również spróbować przełamać tę barierę. Ale z pewnością w tej chwili znalezienie sposobów na wykorzystanie witryny JAMstack dla witryny, która ma wiele milionów stron lub wiele setek tysięcy stron, może być teraz trochę trudne.

Witalij: Och, to interesujące. Więc właściwie pomysł bycia wtedy, aby służyć divowi stanu, który posiadasz, i zasadniczo, że cokolwiek masz zbudować, jak nowy portal, musi być w nim wstawiony, więc interesujące jest obserwowanie, jak to się dzieje. Ponieważ ty też, myślę, że niedawno, dwa tygodnie temu, pojawił się artykuł autorstwa Jasona Pamentala, w którym pomysł był bardzo podobny, w którym faktycznie ładowałeś czcionki, a następnie ładowałeś pierwszą potrzebną stronę, a potem załaduj drugą, a następnie faktycznie scalisz je w taki sposób, aby utworzyć nową czcionkę, jak również przyrostowe ładowanie czcionek.

Phil: Interesujące.

Witalij: Byłoby naprawdę ciekawie to zbadać.

Phil: Tak, i nie chodzi tylko o ładowanie, chodzi o pokolenie-

Witalij: Pokolenie, budowa.

Phil: Tak, dokładnie.

Witalij: Rozumiem. Ale jak myślisz, jakie są typowe wyzwania, z którymi boryka się większość programistów? Cóż, najpierw pozwól mi się cofnąć. Jeśli nigdy wcześniej nie pracowałeś nad JAMstack i czujesz się bardzo komfortowo i zadowolony ze swojego stosu LAMP i chciałbyś może zbadać możliwości i zalety, takie jak bezpieczeństwo i wydajność JAMstack. Jak właściwie byś zaczął? Co byś przeniósł, co oznacza zmiana przepływu pracy?

Phil: Tak więc zmiany w przepływie pracy mogą być w rzeczywistości dość głębokie, ponieważ zabierasz wiele infrastruktury, na której normalnie byś polegał, i mówisz, że możemy się tego pozbyć i zacząć wdrażać rzeczy bezpośrednio do CDN. Ale jeśli chodzi o to, jak ktoś może zacząć z tym eksperymentować, są szanse, że może już używać niektórych aspektów tego. Wiesz, nawet na tradycyjnych sposobach budowania rzeczy w sieci.

Phil: Jeśli myślisz o tym, jak możesz zbudować coś na stosie LAMP, prawdopodobnie masz tam PHP, robisz takie rzeczy, jak pisanie szablonu, który pobiera dane ze źródła danych, w tym przypadku bazy danych MySQL lub innego bazy danych, wyświetlając te rzeczy, a następnie udostępniając je. Przypomina to działanie generatorów statycznych witryn. Mają szablony, pobierają dane z miejsca, które może być rodzajem uporządkowanych danych w plikach lub może uderzać w jakąś bazę danych lub interfejs API treści. Tak czy inaczej, pobiera dane, łączy je z szablonami, generuje widoki, a jedyną różnicą jest to, że nie robi tego na żądanie, robi to z wyprzedzeniem. Tak więc niektóre logiczne kroki w tego rodzaju czynnościach poznawczych dla programisty mogą w rzeczywistości nie być tak duże.

Phil: Największą zmianą jest myślenie o tym, jak wdrażać rzeczy. Ponieważ tak naprawdę to, co wdrażasz, to zbudowane, renderowane zasoby w całości za każdym razem, gdy chcesz przeprowadzić wdrożenie. To zaczyna sprowadzać takie rzeczy jak zarządzanie treścią i zarządzanie kodem w tym samym miejscu, dzięki czemu takie rzeczy jak kontrola wizji we wszystkich tych rzeczach razem. Tak więc zaczyna się nieco inny sposób myślenia o tym, jak możesz rozwijać i zarządzać witrynami i ich zawartością. Więc jest tam kilka zmian. Ale fajną rzeczą jest to, że wiele statycznych generatorów witryn może być całkiem proste, aby zacząć eksperymentować, a fajną rzeczą jest to, że nie potrzebujesz tony infrastruktury, aby to zrobić. Tak więc fajną rzeczą jest to, że naprawdę możesz zacząć budować rzeczy bezpośrednio na swoim lokalnym komputerze. Uruchamiasz statyczny generator witryn bezpośrednio na swoim komputerze i możesz naprawdę dobrze zorientować się, jaki będzie wynik, bez konieczności opierania się na wielu innych infrastrukturze.

Phil: Tak więc ten pierwszy krok, wjazd na rampę, może być dość płytki, abyś zaczął mówić: „cóż, wypróbuję ten konkretny zestaw narzędzi. Mogę je uruchomić lokalnie.” I będziesz mieć pewność, że po rozmieszczeniu gdzieś danych wyjściowych będzie to dokładnie takie samo, jak w miejscu wdrożenia, jak byłoby to lokalnie. To jedna z rzeczy, które uwielbiam w renderowaniu rzeczy, które są statyczne, ponieważ nie polegasz na dużej ilości infrastruktury i ruchomych części, które mają im służyć. Możesz spojrzeć na nie na statycznym serwerze na własnej maszynie i pomyśleć: „tak, tak to będzie działać, gdy trafi do CDN”.

Witalij: Mm-hmm (potwierdzenie); A także infrastruktura, kiedy przyjrzymy się, na przykład, w jaki sposób budujemy single [niesłyszalne 00:10:07], i istnieje ogromna liczba opcji tego, co możesz zrobić. Dla serwera, klienta i wszystkiego pomiędzy.

Phil: Tak.

Witalij: I tak myślę, w naszym przypadku, ponieważ budujemy szkielet, który obsługuje bezpośrednio CDI z treścią i wszystkim, a także wzbogaca się o JavaScript. Właściwie było to całkiem rozsądne i całkiem, nie powiedziałbym, że łatwe, ale sensowne było przejście do tego rodzaju konfiguracji. Ponieważ w końcu na stronie pozostaje tylko treść. To tylko HTML z kilkoma obszarami komentarzy, polem wyszukiwania i kilkoma innymi rzeczami. Ale jeśli zmierzasz w kierunku naprawdę samodzielnej aplikacji, może nawet aplikacji finansowej, bankowości internetowej, tego typu rzeczy. Czy nadal uważasz, że JAMstack byłby dobrą opcją do rozważenia, jeśli masz coś, co wymaga dużo logiki? Czy potrzebuje serwera, czy nie?

Phil: Cóż, nie znoszę powtarzać starego zdania „to zależy”. Ale to trochę zależy. Mając to na uwadze, istnieje wiele aplikacji, które działają równie dobrze jako aplikacja JavaScript, jak i faktycznie posiadają komponent po stronie usługi. Mówię to z pewną dozą ostrożności, ponieważ jestem trochę oldschoolowy, jeśli chodzi o tworzenie stron internetowych i naprawdę lubię umieszczać rzeczy w przeglądarce w formacie HTML tak bardzo, jak to możliwe, a następnie mieć naprawdę wysoki znak wodny, z którego stopniowo poprawiasz od. Więc osobiście nie lubię robić wszystkiego w JavaScript i po prostu wysyłać pusty tag body, a następnie uruchamiać wszystko przez JavaScript.

Phil: Powiedziawszy to, czasami są takie sytuacje, w których jest to całkowicie akceptowalne. Jeśli myślisz o pewnym rodzaju aplikacji, która oczywiście w dużym stopniu byłaby zależna od JavaScript i znasz swoich odbiorców. To może być całkiem rozsądne. Są rzeczy, które zostały niedawno wysłane. Właściwie myślę o czymś, co zostało wysłane do Google IO, na przykład, zespół chrome stworzył grę, która była bardzo mocno JavaScript i działała pięknie, statycznie. Istnieje wiele przypadków użycia, w których może to zadziałać.

Phil: Wracając do twojego przykładu finansowego, kiedyś pracowałem, właściwie moją pierwszą pracą było umieszczanie liczb na ekranach dla traderów, którzy mogli handlować za pomocą technologii internetowych, a to było przed gniazdami sieciowymi, było przed Ajaxem, było przed wszystkim naprawdę to było przydatne, aby ci w tym pomóc i jest to trochę trudne, ale ostatnio robiłeś wiele tego rodzaju rzeczy w JavaScript i to ma sens. Możesz zacząć wysyłać bezpieczne żądania do interfejsów API bezpośrednio z przeglądarki. Obecnie istnieje wiele modeli do uwierzytelniania i autoryzacji bezpośrednio z przeglądarki. Pod wieloma względami może to uprościć stos dla instytucji finansowych, które chcą zbudować niektóre z tych rzeczy, ponieważ sposób, w jaki mogą oddzielić niektóre z tych rzeczy, może znacznie ułatwić zarządzanie nimi. Więc z pewnością pomyślałbym, że model JAMstack mógłby doskonale działać również w tym scenariuszu.

Witalij: Ok, więc może wrócimy teraz, aby odkryć świat JAMstack i frontendu. Co cię najbardziej ekscytuje w tych dniach, Phil? Jeśli spojrzysz ogólnie na JAMstack i frontend, czy jest to coś, co naprawdę nie pozwala ci zasnąć w nocy, kiedy budzisz się rano z nadzieją, że tak, kiedyś nad tym popracuję. Pewnego dnia załatwię to. Czy masz [przesłuch 00:13:33]

Phil: Tak, i to jest rodzaj rzeczy, w których twoja odpowiedź może być inna z dnia na dzień, ponieważ wydaje się, że ten świat porusza się tak szybko. I to samo w sobie jest jedną z rzeczy, które tak bardzo mnie ekscytują. Teraz, gdy zaczynamy widzieć, jak interfejsy API przeglądarki zaczynają naprawdę się rozwijać i jakie rzeczy możemy robić bezpośrednio w przeglądarce, bez konieczności samodzielnego ich implementowania. To dla mnie trochę ekscytujące. Nadal jestem bardzo durny, jeśli chodzi o SVG. Powinienem wyjaśnić słowo duffer, jeśli ktoś, kto nie jest Anglikiem i to ogląda, oznacza głupca. To znaczy, że jestem daleko za zakrętem.

Phil: Ale uważam, że naprawdę chcę robić więcej z SVG, a animacje to rzeczy, z którymi jestem po prostu w tyle i chcę się tym bawić. Ale takie rzeczy jak interfejsy API przeglądarki, niezależnie od tego, czy są to rzeczy do pracy w trybie offline, czy do poprawy wydajności, a zwłaszcza w chwili, gdy ładowanie czcionek wydaje się być coraz bardziej dostępne, dzięki czemu możemy zacząć naprawdę tworzyć rzeczy, które są bardzo bogate wizualnie i bliższe co możemy chcieć zrobić z typografią. Jestem trochę nerdem do tego typu rzeczy, lubię takie rzeczy, więc chcę się nimi bawić coraz więcej.

Witalij: Więc Phil, mówi o konflikcie JAMstack w Londynie. Czy możesz również wyjaśnić w kilku słowach, o czym będzie to miało miejsce, na czym się koncentruje, dla kogo jest i jaka jest twoja rola? Tuż za kulisami, dbając o zawartość i wszystko. Jaka jest tam twoja rola?

Phil: Więc miałem zabawną część pracy. Miałem więc okazję wyjść i znaleźć prelegentów i znaleźć interesujące treści, więc jestem naprawdę podekscytowany tym, jak te programy się łączą. Mamy ludzi takich jak Chris Coia, którzy opowiedzą o wzmocnieniu front-end developerów io tym, jak wiele możemy zrobić z technologiami front-end opartymi na tym modelu JAMstack. Mamy ludzi takich jak Jake Archibald i Surma z zespołu Google Chrome, którzy opowiedzą o takich rzeczach, jak wydajność interfejsu użytkownika i sposoby, w jakie możemy naprawdę zwiększyć wydajność, korzystając ze statycznego hostingu lub infrastruktury lub kodu, który działa bezpośrednio w przeglądarka.

Phil: Będziemy także rozmawiać z Yuną Kravitz o sprawach związanych z CSS, Houdini i innymi tego typu rzeczami. A poza tym o wiele więcej. Porozmawiamy również o rzeczach związanych ze zmianą kulturową, jaką model JAMstack może wywołać w Twojej organizacji i projektach, aby naprawdę dotarł do wszystkich miejsc. Więc jestem tym podekscytowany. Będę miał również okazję przedstawić wszystkich tych ludzi, ponieważ pozwolili mi zaszaleć i być również MC, co oznacza, że ​​mogę z nimi porozmawiać, zadać kilka pytań i tego typu rzeczy. Myślę więc, że powinno to być bardzo interesujące dla każdego, kto interesuje się rozwojem front-endu, a także nowymi modelami dostarczania projektów w sieci w naprawdę efektywny sposób.

Witalij: Och, więc lubisz reflektory na scenie, co?

Phil: Jestem poszukiwaczem uwagi. Powinieneś już to wiedzieć, Witalij.

Witalij: Och, właściwie zawsze myślałem, że jesteś bardzo pokorną, miłą i życzliwą osobą, najwyraźniej byłem-

Phil: To gra, gra.

Witalij: Dobra, w porządku. Phil, spotkamy się za kilka, właściwie jutro.

Phil: Zobaczymy się wkrótce na kolejnym wydarzeniu, ale poza tym do zobaczenia w lipcu, dziewiątego i dziesiątego lipca.

Witalij: [niesłyszalne 00:16:52] Mając to na uwadze, dziękuję Phil i podpisz się. Żegnajcie wszyscy.

Phil: Do zobaczenia wkrótce.

To jest okład!

Z niecierpliwością czekamy na powitanie Phila na SmashingConf Toronto 2019 z sesją na żywo na JAMstack. Chętnie Cię też tam zobaczymy!

Daj nam znać, jeśli uznasz tę serię wywiadów za przydatną i z kim chciałbyś, abyśmy przeprowadzili wywiady lub jakie tematy chciałbyś, abyśmy omówili, a my od razu zabierzemy się do tego!