Pelle Sten

Mikrotjänsterna placerar Parks and Resorts i framkant

Nyligen lanserade Parks and Resorts den nya sajten för Vildmarkshotellet. Den nya tekniska lösningen med flera sammankopplade mikrotjänster ger Parks and Resorts en modell att snabbt lansera snabba sajter som kan hantera många samtida besökare.

Lösningen som har tagits fram av Tomas Billborn, utvecklare på Rebel & Bird, består av fristående mikrotjänster där det är enkelt att byta ut varje individuell beståndsdel när det kommer ett nytt verktyg som är bättre, billigare eller snabbare. Vare sig det är en ny sökmotor, ett biljettsystem eller ett publiceringsverktyg.

Skulle någon individuell mikrotjänst gå ner kommer fortfarande sajten ändå funka. Traditionellt sett går sajten ner när en tjänst slutar funka, men om till exempel publiceringsverktyget går sönder här kommer sajten fortfarande funka eftersom alla sidor är statiska sidor som ligger i molnet, och går någon tredjepartsintegration ner funkar resten av sajten fortfarande.

Vår lösning med sammankopplade mikrotjänster har två andra stora fördelar från traditionella lösningar. Dels är infrastrukturen optimerad för att presentera sidor så fort som möjligt även för användare som inte har perfekt uppkoppling, dels har vi nu skapat basen för ett kodförråd som gör att tiden från planering till lansering förkortas för varje ny sajt.

Flödet mellan mikrotjänsterna

Dirigenten av lösningen är en extremt liten webbapplikation (här en Azure Web App) vars uppgift är att ta emot uppdateringar och se till att det absolut senaste innehållet levereras ut till molnet.

Det gör den genom att publiceringsverktyget (i det här fallet Contentful) säger till när det finns något nytt material. Om Gatsby inte redan är upptagen med att bygga statiska sidor från en tidigare uppdatering så hämtar den materialet via GraphQL och bygger. De statiska html-sidorna laddas sedan upp till molnet (Azure Storage i det här fallet).

När den nya sajten har byggts till Azure Storage utan problem vänder den sig till ett innehållsleveransnätverk (ett CDN) och säger, ”Varsågod! Här är den uppdaterade sajten, byt ut alla dina cachade sidor.”

Allt realtidsinnehåll och andra tredjepartsintegrationer (till exempel prisdata i ett butikssystem) hämtas från ett eller flera servicelager och integreras i de statiska html-sidorna i realtid.

Modellen är optimerad för snabbhet

Att allt statiskt innehåll presenteras som färdigbyggda sidor gör lösningen snabb. Men vi har en hel del andra trick som gör det hela ännu snabbare.

Som en del av vår datadrivna process hämtar Gatsby in trafikdata från Google Analytics. Den här informationen använder sedan Guess.js för att förutspå vilka sidor som är mest sannolika att besöka från just den sidan. Det gör att den sidan laddas blixtsnabbt när besökaren klickar vidare till den.

Dessutom laddar vi aldrig allt innehåll på en sida på en gång. En sida består ju inte bara av html, utan även av bilder, javascript och css. Vi laddar endast de resurser som behövs och de bilder som syns på skärmen. Det som väger mest på en sida är bilderna och därför är det så viktigt att ladda just dem på ett smart sätt. Video ska vi bara inte tala om.

För bilderna gör vi så här. Först skapar vi ett utrymme där bilden ska vara, sedan laddas en extremt lågupplöst version av bilden och till sist laddas en bild som matchar upplösningen som besökaren har på sin skärm. Någon med en retinaskärm får en betydligt mer högupplöst version av bilden än någon som har en enkel mobiltelefon. De flesta med snabba uppkopplingar hinner inte märka den här processen men till exempel de som sitter på tåget och surfar med 3G kan få se växlingarna.

Dessutom laddar vi bara in just den javascript- eller css-informationen som behövs för den här sidan, och om den informationen har laddats med en tidigare sida behåller vi den informationen, i stället för att ladda in den på nytt.

Modellen är perfekt för områden med sämre uppkoppling

Den här lösningen gör dels sajten snabbare men framför allt mer stabil även för användare som inte har tillgång till den fantastiska infrastruktur som finns i till exempel Stockholms innerstad.

För koncerner som vänder sig till användare över hela världen är det här en extremt smart, effektiv och kostnadsbesparande modell.