Välja rätt tech stack för en modern webbplats

När man ska starta processen att ta fram en digital produkt ställs man inför många val. Det finns flera saker att tänka på som är avgörande för webbplatsens livskraft över tid. Det är svårt att överväga alla aspekter och möjligheter kring det man vill ta fram och ge liv åt, och oftast har man inte all information på plats. Men en av de viktigaste sakerna att ta hänsyn till tidigt i utvecklingsprocessen är att välja rätt tech stack, det vill säga att nyttja rätt teknisk uppsättning som främjar ens syften på bästa möjliga sätt.

En tech stack är infrastrukturen av programvaror, språk, ramverk och andra tekniker.

Oavsett om det gäller sökmotorers algoritmer, val av CMS eller en webbplats laddningstid så är det vi människor och våra förväntningar som styr marknaden. Vi vill ha samma kvalitativa leveranser av alla webbplatser vi möter, oavsett tekniska förutsättningar, och därav konkurrerar alla lösningar och erbjudanden mer eller mindre med varandra.

Varför är detta viktigt för oss som innehållsägare, avsändare och digitala säljare? Jo, skall vi vara konkurrenskraftiga måste vi alltid erbjuda den lösning och funktionalitet som bäst besvarar krav och förväntan hos våra användare.

Men vad är då en tech stack? Jo, en tech stack är infrastrukturen av programvaror, programmeringsspråk, ramverk och andra tekniker som används för att bygga upp en teknisk plattform. Namnet tech stack syftar på de olika teknikernas lager ovanpå varandra, från det mest grundläggande såsom operativsystemet till det översta lagret som innefattar hur en webbplats eller applikation programmeras. Ett exempel på den vanligaste tech stacken är LEMP-stacken enligt följande:

• Linux (operativsystem)
• Nginx/Apache (webserver)
• MariaDB/MySQL (databas)
• PHP (programmeringsspråk)

För beställaren av en webbplats så styrs valet av tech stack oftast utifrån vilket CMS (Content Mangement System) man vill använda. Wordpress, som enligt W3Techs är det vanligaste CMS:et på webben idag, använder just LEMP-stacken. Valet av CMS styr alltså tech stacken på ungefär samma sätt som ett företags IT-struktur styrs av om man använder Windows eller Mac på kontoret, eller huruvida man ska utveckla en mobilapplikation mot Android eller iPhone – eller båda plattformar.

I denna genomgång kommer vi att avgränsa oss till uppsättningar anpassade för webbplatser och hur valet av tech stack påverkar webbplatsen.

För att kunna välja rätt teknisk uppsättning så behöver vi först definiera vad som är en bra och modern webbplats för oss, så att vi vet vilka krav vi kan ställa.

En modern webbplats anser vi på Sould ska vara säker, stabil, kompatibel, optimerad för prestanda och användarvänlig för både besökaren och redaktören i CMS:et. Utifrån dessa aspekter kan man ställa sig följande frågor för att enklare bena ut vilka krav man har – på både sin tekniska uppsättning och sitt CMS.

Säkerhet

• Kommer det finnas någon känslig information kopplad till webbplatsen som skapar en särskild hotbild? Som exempelvis en webbshop eller inloggningsuppgifter.
• Finns det personlig information på webbplatsen som faller under GDPR? Hur sparas och hanteras datan?
• Hur stort problem är det ifall webbplatsen utsätts för ett intrång och fylls med spam eller all data raderas? Hur ofta behövs det göras backups?

Stabilitet

• Hur affärskritisk är webbplatsen? Hur stort problem är det om webbplatsen slutar att fungera över en helg, en dag eller bara några minuter?
• Vilken typ av funktionalitet finns på webbplatsen som kan påverka upplevelsen av en stabil webbplats?

Kompatibilitet

• Behöver webbplatsen kommunicera med andra system såsom CRM, affärssystem eller andra API:er?
• Fungerar webbplatsen i de största moderna webbläsarna och i olika enheter? Kan Google, DuckDuckGo och andra sökmotorer enkelt komma åt och indexera webbplatsen?

Prestanda

• Hur snabb är webbplatsen för besökaren – hur snabb behöver den vara?
• Innehåller webbplatsen många bilder – krävs det extra optimering av bilder?

Användarvänlighet

• Hur lätt är det för redaktörerna att uppdatera och administrera webbplatsen från CMS:et? Eller kräver webbplatsen ens ett CMS?

Varje projekt har olika förutsättningar och olika svar på ovanstående frågeställningar som slutligen ska landa i en kravspecifikation. På Sould arbetar vi huvudsakligen med två riktningar av tech stacks för våra webbplatser, som vi tycker täcker upp de flesta scenarier.

LEMP-stack med Wordpress

Wordpress är open-source och var från början fokuserat på bloggar men har med tiden utvecklats och blivit allt mer kraftfull och populär. En av dess styrkor är i och med detta att många är vana att arbeta i Wordpress användarvänliga administrationsgränssnitt. Andra fördelar är det stora ekosystem som finns samlat runt Wordpress – det finns tusentals utvecklare som är specialiserade på Wordpress men också tillägg där man enkelt kan expandera Wordpress funktionalitet.

Vi bygger upp våra Wordpress-platser på en klassiskt LEMP-stack (beskriven ovan) på dedikerade VM-servrar (Virtual Machine). Detta låter oss styra både tillgängligheten och säkerheten på webbplatsen.

Headless/JAM-stack

Ett av de största paradigmskiftena som har skett på webben på sistone är Headless CMS och Static Site Generators. Denna typ av uppsättning har fått namnet JAM-stack som är en förkortning på Javascript, API och Markup, och är (än så länge) de vanligaste teknikerna för denna tekniska uppsättning.

Som en jämförelse består Wordpress (men även andra CMS som exempelvis Drupal och EpiServer) av två delar: ett administrationsgränsnitt för att hantera innehållet och en samling mallar/funktioner för att dynamiskt hämta och presentera sagda innehåll. Med ett Headless CMS så delas detta upp i flera lager, så att innehållet är separerat från hur det presenteras i designen.

I denna uppdelning passar vi även på att koppla in en Static Site Generator. Med en Static Site Generator så hämtas innehållet från CMS:et bara när det har uppdaterats och hela webbplatsen genereras på nytt, med andra ord så är innehållet helt statiskt.

Fördelar med statiskt innehåll på en webbplats:

• Snabbare webbplats utan anrop till databas vid varje besök
• Säkrare webbplats med ett separerat CMS som SaaS (Software as a Service)
• Specialiserade ramverk för varje tekniklager

Vår vanligaste uppsättning för en Headless-webbplats:

• DatoCMS - CMS
• ReactJS - Ramverk för att bygga upp interaktiva webbplatser
• GatsbyJS - Static Site Generator
• Netlify - Hosting specialiserad på statiska webbplatser
• Github - Versionshantering av källkod

För att sammanfatta: tänk på att även om valet av tech stack kan kännas som en detalj så kommer det att påverka webbplatsen långsiktigt – till och med hur långsiktig webbplatsen blir.