En helt ny webb

Det är lätt att konsultbolags webbar blir lite av skomakarens barn. Så var det även för oss på Arkido under flera år. Med det i åtanke behövde vi tänka till när vi byggde nytt. Om vi nu inte lagt ner tid de senaste åren kunde vi inte förvänta oss något extra den här gången heller.

Kravbilden landade i en webb där det ska vara enkelt att uppdatera innehåll och en teknisk plattform som kräver minimalt underhåll. Vi behövde alltså någon form av innehållssystem och en minimal webbplattform. Vi valde då att titta på ett headless-CMS och bygga en statiskt genererad sajt.

Vi behöver ingen backend

De flesta info-webbarna idag består av en backend som baseras på ett CMS. När en besökare vill se en sida skickas en fråga till backend som hämtar den senaste informationen från CMS-systemet, skapar en HTML-fil och sedan svarar besökaren genom att skicka filen. Istället för allt detta kan vi se till att HTML-filen redan finns och skicka den direkt när besökaren frågar. Det enda vi behöver göra är att skapa HTML-filerna och uppdatera dem när innehållet uppdateras. Detta kallas "static site generation" (SSG)

Valet av CMS föll på Contentful. Det är ett verktyg där det är enkelt att sätta upp en informationsstruktur. Contentful har också smidiga APIer och färdiga paket för flera språk och plattformar. Den tekniska plattformen byggdes på Astro som är ett JavaScript-ramverk där SSG är standarduppsättning men där det enkelt går att bygga om till en full backend vid behov.

Smarta komponenter

Komponenter är i princip standard för all frontend-utveckling idag. En komponent är en isolerad del av en webbsida som har egen style och funktionalitet. Komponenter kan enkelt återanvändas på olika sidor eller flera gånger på samma sida. Astro har inbyggt stöd för många ramverk, så som React, preact, Vue, Angular eller Svelte. Det går även att hålla sig helt till Astros egna ramverk. Vårt val föll dock på Solid.js som har en syntax som liknar React men som i många fall visat sig vara ett snabbare ramverk.

En komponent behöver ofta en del logik för att renderas korrekt givet de parametrar som skickas in i komponenten. Denna logik följer sedan med komponenten till sidan där den används. Om en sida har många komponenter som har mycket logik kan det bli tungt för besökarens webbläsare att ladda sidan. Sidan kan då kännas långsam, speciellt på mobila enheter. Dessutom finns en risk att sidans SEO-ranking försämras då laddtider räknas in i sökmotorernas algoritmer.

Ofta används logiken bara för att rendera komponenten en gång, sedan används inte logiken igen. Detta har Astro löst genom att endast exekvera logiken just när sidan genereras, sedan skickas inte koden vidare till besökaren. Dessa uppdateras alltså inte när sidan laddats.

Det finns såklart komponenter som ska vara dynamiska och uppdatera sig själva när besökaren interagerar med sajten. I Astro måste dessa markeras som "islands" och Astro förstår då att för just denna komponent ska JavaScript optimeras och skickas vidare till besökaren. Resultatet blir att besökaren får bara det JavaScript som faktiskt behövs för just den sidan som besöks. Sidan blir så lätt och snabb som den kan bli, utan att upplevelsen blir sämre. (Läs mer om islands i vårt Strawberry-case).

Hosting och uppdateringar

Även om vi inte behöver en backend-server måste vi ha någonstans att lagra filerna så de blir tillgängliga på webben. Här kan egentligen vilket webbhotell som helst fungera. Vi valde dock att använda en molntjänst. I detta fall valde vi AWS där vi använder tjänsterna S3 för lagring och CloudFront som CDN.

När koden uppdateras måste HTML-filerna bytas ut. Detta görs snabbt med Github-Actions. Varje gång ny kod skickas upp på Github körs ett bygge som skapar nya filer, laddar upp de nya filerna på S3 och rensar cachen på CloudFront. Nya byggen kan även skapas när innehåll uppdateras i Contenful med en webhook som anropar Github.

Billigt, billigt, billigt!

En extra bra egenskap med vårt val av infrastruktur är att det blir väldigt billigt.

• Då vi har begränsat med innehåll klarar vi oss på Contentfuls gratisnivå.
• Astro och Solid är gratis att använda
• Ett bygge på Github-Actions tar under en minut så vi kan uppdatera sajten upp till 2000 gånger i månaden gratis.
• Kostnader för S3 och CloudFront beror på hur många besökare sajten har och hur ofta nya filer laddas upp men vi kan uppskatta dessa till någon enstaka dollar i månaden.

Sådär! Då har vi en blixtsnabb webb som är enkel att uppdatera och underhålla med en infrastruktur som är i princip gratis.

Bygg din egen sajt

Om du vill bygga en egen sajt med samma recept har vi skapat ett bas-repo på Github. Det är enkelt att byta ut Contentful och Solid om du föredrar andra verktyg.