Jamstack - Javascript, API's og Markup

JAM i Jamstack står for Javacript, API's og Markup. Det handler om at reducere sit website til kun at bestå af pre-renderet Javascript, HTML og CSS og så benytte API'er til at udveksle data med diverse services. Simplificeringen medfører at man kan drive sit website på højtydende Content Delivery Networks (CDN'er), og dermed undgå webservere og alt det bøvl der kan følge med sådanne. Læs med her...

Det simple website

Der er intet nyt i at websites bygges ved hjælp af Javascript, HTML og CSS. Sådan har det været siden slutningen af 90'erne, og det ser bestemt også ud til at det kommer til at foregå sådan i fremtiden. Jamstack er egentlig en form for "back to basics", hvor man for at simplificere og optimere tingene, fokuserer på de grundlæggende "why's" og tilpasser teknologier og metodikker hertil.

For længe siden var et website blot en stor eller mindre samling af statiske HTML-dokumenter, som man via HTTP-protokollen forespurgte på relativt simple webservere. Disse samlinger af dokumenter var svære at vedligeholde - ikke mindst for personer uden teknisk indsigt - og ud af behovet for at sætte ikke-tekniske redaktører i stand til at håndtere indhold, blev Content Management Systemerne opfundet. Det dynamiske website baseret på et CMS, var født.

Det komplicerede website

CMS'erne har i mange år været grundplatformen i stort set alle websites, men som CMS-platformene har vokset sig større og større og mere og mere dominerende, bliver de også til nogle avancerede applikationer. De kan være komplicerede at udvikle, vedligholde og drifte, og ofte har man udfordringer med sikkerhed, skalering og performance. Som "CMS-ejer" kigger man ind i en fremtid med endeløse opdateringer og omkostninger til vedligehold og udvikling.

Det typiske CMS fungerer groft sagt som følger:

  1. En bruger forespørger et dokument (en "side") i sin browser. Webserveren modtager forespørgslen

  2. Webserveren sender forespørgslen videre til CMS-platformen. Ud fra forespøgslen (og evt. andre faktorer som personalisering etc.) skal CMS'et nu generere et output bestående af HTML, Javascript og CSS

  3. Webserveren modtager resultatet fra CMS-platformen og sender responset tilbage til klienten (browseren)

Det som kan drille her, er især punkt 2 - hver gang en klient forespørger noget, så skal webserveren på arbejde og generere et output. Det kan være kompliceret at få til at performe, og en stor del af moderne CMS-platforme indeholder forskellige former for caching (pregenereret respons) for at lykkes med tingene. Nogle gange kan det også være nødvendigt at øge antallet af webservere for at de kan deles om at håndtere forespørgslerne. Det kaldes "load-balancering" og kan også være kompliceret. Måske man endda ønsker at have webservere i hele verden, så alle brugere for et hurtigt respons fra en webserver geografisk tæt på?

Hvad går Jamstack ud på?

Hvad hvis man "cuttede" punkt 2 ud af ovenstående? Det er præcis tanken bag Jamstack. I stedet for at have komplicerede webservere, CMS'er og caching-mekanismer til dynamisk at generere output, så pre-genererer man hele sit website (som Javascript og Markup) og placerer det på et verdensomspændende Content Delivery Network (CDN). CDN'ets eneste funktion er at modtage forespørgsler og sende svar retur - det går hurtigt (meget hurtigt!), er uden sikkerhedshuller og ukompliceret (i hvert fald i forhold til loadbalancerede webservere og CMS'er). Det komplicerede i Jamstack er primært at generere/pre-rendere disse statiske sites, men det findes der rigtig mange gode værktøjer (Static Site Generators, SSG'er) og metodikker til. Sekundært skal man være meget opmærksom, hvis de sider som bliver forespurgt indeholder personaliseret eller på anden måde dynamisk indhold. Det kunne f.eks. være en indkøbskurv, brugerspecifikt indhold, udvalgte artikler/produkter etc. Eftersom siderne som udgangspunkt er pregenerede, så vil man skulle forholde sig til hvordan man vil levere dynamisk data ved siden af det som er pregenereret. Det er her specialiserede microservices kommer ind i billedet. F.eks. til login, e-handel, personalisering, recommandations osv.

lait.dk er bygget på Jamstack principper

Hjemmesiden du kigger på lige nu - lait.dk - er bygget efter Jamstack principper. Som CMS bruger vi et headless CMS ved navn Contentful, mens frontend er en Single Page Application baseret på Javascript framework'et Vue.js med Nuxt som Static Site Generator (SSG). Hele molevitten er hosted på Netlify.

Resultaterne:

  1. Performance i top via pregenereret markup på Netlify CDN

  2. Afledt af punkt 1: Den tekniske søgemaskineoptimering, Google Pagespeed, GT Metrix etc. er helt i top

  3. Single Page Application = Asynkron dataindlæsning hvor brugeren oplever en hurtig og flydende frontend med lækre animationer

  4. Topmoderne headless CMS SAAS-løsning - Contentful. Redaktøren er glad!

  5. Ingen sikkerhedsmæssige udfordringer

  6. Struktueret videreudvikling og automatiseret deployment via Git og Netlifys CI/CD miljø

Og i øvrigt er driften gratis og der er ingen licensomkostninger. Contentful og Netlify's gratis versioner er rigeligt til lait.dk.

Vil du høre mere om hvordan Jamstack kan hjælpe din forretning? Kontakt her!