Jamstack - nowy wymiar tworzenia aplikacji i stron internetowych

Czym tak naprawdę jest Jamstack? Myślę, że spora część osób związanych z Web Developmentem spotkała się z tym terminem, jednak nie wszyscy zdają sobie sprawę z licznych zalet jakie niesie ze sobą to podejście do tworzenia stron i aplikacji.

13 sierpnia 2021

Czym jest Jamstack?

Jamstack to podejście do tworzenia aplikacji i stron internetowych, które zapewnia lepszą wydajność, szybkość działania oraz bezpieczeństwo. Nie narzuca ono konkretnych technologii, a jedynie pewny zarys koncepcyjny. Co zatem kryje się za akronimem JAM?

  • JavaScript - dynamiczne funkcjonalności są obsługiwane przez JavaScript, ale jak zostało wspomniane wcześniej - nie ma żadnych ograniczeń odnośnie stosowanych frameworków czy bibliotek
  • API - do zbudowania strony/aplikacji można wykorzystać dowolną ilość zewnętrznych API, z których każde odpowiada za inną funkcjonalność np. uwierzytelnianie czy wyszukiwanie
  • Markup - pre-renderowany HTML, który jest tworzony w czasie deploymentu przy użyciu generatorów stron statycznych lub narzędzi do budowania aplikacji. Pliki te są dostępne bardzo szybko dzięki wykorzystaniu CDN (Content Delivery Network). Jest to rozproszona po całym świecie sieć serwerów, która umożliwia wyświetlanie treści przy pomocy serwera zlokalizowanego najbliżej użytkownika

Głównymi założeniami podejścia Jamstack jest pre-rendering oraz decoupling:

  • Pre-rendering - polega na wygenerowaniu plików strony na etapie jej budowania. Wpływa to bardzo mocno na wydajność, ponieważ w przeciwieństwie do “klasycznego” podejścia nie musimy wysyłać do serwera zapytań np. o każde zdjęcie czy font na stronie, tylko są one przygotowywane wcześniej i gotowe do wyświetlenia
  • Decoupling - jest to proces oddzielania od siebie różnych systemów czy serwisów - w tym wypadku oddzielenie frontendu od backendu

Integracje

Na rynku dostępnych jest mnóstwo integracji możliwych do wykorzystania w stronach i aplikacjach Jamstack. Dwie największe grupy to Site Generators oraz Headless CMS:

  • Site Generators - służą do budowania statycznych plików HTML na podstawie danych wykorzystywanych dla strony (np.CMS, Markdown). Spośród najbardziej popularnych generatorów można wymienić:
    • Gatsby
    • Next.js
    • Hugo
    • Nuxt
    • Jekyll
  • Headless CMS - narzędzie do wykorzystania zarówno dla edytorów jak i programistów. Edytorzy przy użyciu interfejsu mogą uzupełniać treści jakie mają zostać wyświetlone na stronie, natomiast programiści mogą je pobrać za pomocą API. W przeciwieństwie do klasycznych systemów CMS wygląd aplikacji nie jest determinowany przez uzupełnione treści. Najbardziej popularne systemy to:
    • Dato CMS
    • CraftCMS
    • Strapi
    • Contentful
    • Sanity

Jamstack w praktyce

Poniżej przedstawiony jest schemat, według którego tworzone i aktualizowane są strony oraz aplikacje Jamstack:

Istnieją dwie ścieżki wprowadzania zmian do naszej strony. Pierwszą z nich jest przesłanie przez programistę nowej wersji kodu do repozytorium, druga to wprowadzenie zmian w treści przez edytorów. Dzięki odpowiedniej konfiguracji i zastosowaniu tzw. webhooków nowa wersja jest automatycznie budowana i udostępniana dla użytkowników. W tym artykule opisaliśmy konkretny case-study przy wykorzystaniu takich narzędzi i technologii jak Gatsby, Gatsby Cloud oraz DatoCMS - zachęcamy do lektury!

Zalety podejścia Jamstack

Przedstawiliśmy już ogólne założenia podejścia Jamstack oraz najczęściej stosowane integracje wraz z ich zastosowaniem. Natomiast jakie są w praktyce plusy korzystania z niego w praktyce?

  • Wydajność (performance) - ponieważ pliki naszej strony/aplikacji są budowane na etapie deploymentu, ograniczamy potrzebę wysyłania zapytań do serwera (które oczywiście zajmują określony czas). Dodatkowo dzięki zastosowaniu sieci CDN maksymalnie skracamy czas w jakim pliki są dostępne dla użytkownika.
  • Bezpieczeństwo - za bezpieczeństwo i funkcjonowanie wykorzystywanych przez nas zewnętrznych narzędzi odpowiedzialni są ich dostawcy. Oznacza to, że nie musimy się martwić np. o bazy danych czy serwery w systemach CMS. Jeżeli zdarzy się awaria jakiegoś systemu możemy być pewni, że jego dostawcy będzie zależało, aby jak najszybciej ją usunąć.
  • Koszty - hosting statycznych plików jest tani lub nawet darmowy (w zależności od wykorzystanego rozwiązania)
  • Skalowalność - jest zapewniona dzięki wykorzystaniu sieci CDN.
  • Łatwość w utrzymaniu oraz obsłudze dla programistów - z punktu widzenia programisty jest to bardzo wygodne podejście. Nie ma potrzeby robienia kopii zapasowych czy obsługi serwera, a przerzucenie zmian przy odpowiedniej konfiguracji polega jedynie na przesłaniu zmian na repozytorium. Dodatkowo uruchomienie projektu lokalnie jest mniej złożone (np. przez brak konieczności klonowania baz danych itd.)

Ograniczenia

Podejście Jamstack niewątpliwie ma wiele zalet i eliminuje potencjalne problemy w niektórych obszarach. Jednak jak każdy inny system, technologia czy rozwiązanie również Jamstack ma pewne ograniczenia:

  • przerzucenie odpowiedzialności za funkcjonowanie zewnętrznych narzędzi na ich dostawców może być zarówno zaletą jak i wadą, ponieważ jesteśmy zależni od kogoś innego i nie jesteśmy w stanie nic zrobić gdy jakaś część naszej aplikacji przestanie działać
  • potrzeba ponownego zbudowania strony/aplikacji nawet w przypadku małej zmiany
  • dane pojawiające się w czasie korzystania z aplikacji (pochodzące z zewnętrznych API) nie mogą być pre-renderowane - w przypadku niewielu takich danych nie stanowi to problemu, natomiast jeśli chcemy zbudować aplikację korzystającą głównie z danych dostarczanych z zewnętrznych API, lepiej rozważyć inne rozwiązania

Podsumowanie

Analizując charakterystykę, wszystkie zalety i wady Jamstack możemy dojść do wniosku, że nie dla wszystkich typów aplikacji będzie ono najlepszym wyjściem. Prawdopodobnie jednak będzie ono zyskiwać na popularności w przyszłości dzięki swojej elastyczności, wydajności oraz skalowalności. W PLEO wykorzystaliśmy to podejście do stworzenia stron Apius (https://apius.pl/) oraz Smart Security (https://getsmartsec.com/). Z punktu widzenia programisty mogę przyznać, że były to dwie strony, przy których wdrożeniu praca była wyjątkowo rozwijająca.