Snabbare, Säkrare & Roligaremed JAMStack

Vi på PiJa har använt oss av JAMStack i många år, för oss är JAMStack det naturliga valet för skalbarhet och prestanda när man kan separera en plattforms olika delar.

JAMStack är ett revolutionerande sätt att tänka på arbetsflödet genom att ge en tydligare utvecklarupplevelse, bättre prestanda, lägre kostnad och större skalbarhet.

JAMStack står för JavaScript, API och Markup – vi reder ut begreppet och försöker få svar på varför det är så positivt.

• Javascript

Dynamiskt innehåll hanteras av JavaScript i webbläsaren och det finns inga restriktioner för vilka ramverk eller bibliotek man kan använda.

• API

Server och databasförfrågningar sker över återanvändningsbara API:er och ges säker access via HTTPS med JavaScript-anrop. Dessa kan komma från egna system/tjänster eller externa. Med återanvändningsbara API:er menas att de kan användas för att lägga på fler tjänster, som t.ex en app till iOS eller Android.

• Markup

Webbsidor serveras som statiska HTML filer. Dessa kan genereras automatiskt av byggscript som går igenom koden och spottar ut färdiga filer. De färdiga filerna kan sedan dynamisk ändras av Javascript i webbläsaren.

Det låter osannolikt att JAMStack skulle leda till minskade kostnader, ökad säkerhet, högre prestanda, att allt går mycket snabbare och dessutom är enkelt. Allt i ett.

Vi frågade Markus Ekblad på PiJa som tidigt började utveckla efter den nya metoden. - JAMStack är den optimala metoden att bygga snabba sidor på idag, svarade Markus utan att tveka. Vi har länge arbetat efter den metoden, den är genial och logisk, säger Markus och förklarar varför.

JAMStack är ett koncept och process som använder sig av traditionella webbteknologier vi dagligen använder. Eftersom sidorna ligger statiskt behöver man inte en traditionell webbserver utan man kan även servera sidorna från ett CDN (Content Delivery Network) som kan hantera mer trafik. De blir både snabbare och säkrare påpekar Markus. Det blir som ett kluster och en samling av tekniker som samarbetar med varandra. De avlastar och fördelar anropen vilket dessutom leder till högre prestanda. Allt går mycket snabbare.

JAMStack är en teknisk arkitektur för utveckling av webbsidor.

Baserat på innehåll, tjänster och funktioner som webbplatsen består av genereras snabba statiska sidor med hjälp av byggscript.

Genom att separera de olika lagren skapas en tydlighet likt microtjänster.

Ett headless CMS av valfri sort kan användas och bytas ut när ett system/tjänst växer och behovet ändras. Några exempel på populära system som kan användas är Headless Wordpress, Headless Drupal, Firebase, Contentful, butter CMS, Strapi, Netlify eller varför inte ett helt eget custom system byggt på NodeJS/MongoDB/GraphQL.

CMS:ets enda uppgift är att lägga in innehåll och servera det via API:er till hemsidan.

Hemsidan i sin tur använder JavaScript för att hämta data dynamiskt från API:et och måla upp det i Markup/HTML.

Snabbhet uppnås genom att allt som inte måste laddas dynamiskt på plats av användaren kan genereras till statiska filer. Eftersom statiska filer inte behöver en traditionell webbserver kan hela sajten hostas direkt på ett CDN vars uppgift är att snabbt leverera filerna till användaren oavsett position i världen. Exempel på bra CDN för JAMStack är: Netlify, GitHub Pages, Cloudflare, Amazone AWS och Firebase. Ett vanligt webbhotell eller cloud server fungerar också utmärkt då filerna blir lätta och snabba av att vara statiskt genererade i förväg.

Med den nya metoden att arbeta kan vi se att tidigare arbetssätt inte varit optimalt. Varje gång en användare hämtar en sida och vill titta på sidan i en webbläsare, bygger det traditionella serverspråket ihop hemsidan på nytt. Anropet hämtats ifrån en databas och sätts in i en HTML fil. Laddar du om hemsidan kommer servern göra samma sak igen trots att innehållet är detsamma. Wordpress och Drupal var i ständigt behov av cachelösningar för att fungera vilket ofta leder till problematik med dynamisk data/uppdateringar av texter osv.

När en server bygger ihop sidorna vid varje hämtning på det här sättet och får mycket trafik krävs dessutom extra bra hårdvara för att det ska fungera. Det betyder att kostnaderna för att driva hemsidan ökar med antalet besökare till hemsidan.

Fördelarna med JAMStack är att logistiken är smartare. Den går att jämföra med leveranser av paket som utnyttjar alla färdmedel, flyg, tåg, bil, cykel, båt och utan stopp. Dessutom kan JAMStack lätt använda sig av moderna CDN-nätverk (Content Delivery Network) för statiska filer för att effektivare kunna servera hela hemsidor och det är något helt nytt.

• Högre prestanda
• Större säkerhet
• Billigare, enklare skalning
• Bättre utvecklarupplevelse
• Minskade kostnader
• JAMStack består av:
  • Javascript
  • API
  • Markup