Tekniken bakom cloudnine.se – Vi föll huvudlöst och svävar nu bland moln

Mitt namn är Joanna och jag är en av de gränssnittsutvecklare som varit med och utvecklat nya cloudnine.se. Bakom hemsidan ligger några av de senaste frontend-teknikerna, vilket har gjort projektet både roligt och spännande att arbeta med.

Förälskelsen

När det kom till CMS kände vi att vi var redo att gå från att ha följt Wordpress-traditionen till att kasta oss huvudlösa i famnen på molnbaserade Contentful.

Headless är ett buzzword som fortfarande står sig starkt sedan ett par år tillbaka. Med headless-lösningar menas att frontend och design helt separeras från backendsystem. Min kollega Ronnie skriver mer om headless här.

För oss gränssnittsutvecklare innebar detta val en snabb förälskelse som öppnade upp kreativiteten och nyfikenheten hos oss. En av de främsta egenskaperna hos vårt nya CMS är att det kan lagra i stort sett allt innehåll till vår site. Det gör att hantering av bland annat databas och server inte behövs. Genom en webhook triggas bygget av siten när någon av våra redaktörer uppdaterar innehållet.

Kunskap

Ett av kraven för den nya siten var att minimera laddningstiden och för det valdes frontend-ramverket Gatsby. I och med detta val togs vår förälskelse till en djupare nivå där helhetsbilden blev tydligare och samspelet verkligare.

Gatsby släpptes i juli 2017 och väver samman de bästa delarna av frontend-tekniker såsom React, webpack, React-Router och GraphQL. Med sin kraftfulla förkonfiguration bygger Gatsby en site som endast använder statiska filer. Det resulterar i otroligt snabba sidladdningar, server-side rendering (som vi skriver mer om här), logisk bildhantering samt prefetching av data.

Gatsby lägger fokus på prestanda och tillgänglighet - något som märks vid användandet. Mycket mer hade vi inte kunnat önska oss och vi var själva imponerade av hur snabbt verktyget verkligen är.

Tillväxt

Efter en tid i projektet kände vi oss mogna att ta steget vidare i utvecklingen, något som återupplivade spänningen och nyfikenheten.

Då en del av det innehåll vi ville rendera inte finns tillgängligt i Contentful var lösningen att utveckla ett eget plugin. Vi saknade integration med Eventbrite, den plattform vi använder för att hantera våra event. Vårt plugin hämtar därför data från Eventbrite och skapar sedan det som Gatsby kallar nodes, som är mittpunkten i Gatsbys datasystem.

Samspelet

Gatsby erbjuder annars en mängd plugins varav ett, gatsby-source-contentful, som gör det enkelt att hämta innehåll och medier från Contentful till Gatsby. GraphQL används sedan för att skapa upp datalagret. När siten byggs genereras en intern GraphQL-server med all denna data som i sin tur hämtas ut via React-komponenter. Det här innebär att istället för att vänta på att skapa upp sidor när en användare klickar sig vidare på siten, skapas samtliga sidor upp och lagras i ett globalt moln redo att renderas direkt när användaren rör sig mellan sidorna.

Anpassning

Denna resa kan nästan delas upp och jämföras med de olika faserna i ett kärleksförhållande vilket varit spännande att ha fått vara en del av. Att få arbeta med nya tekniker är alltid utvecklande eftersom man hela tiden får lära sig något nytt.

Vissa dagar var självklart kämpigare än andra och som utvecklare är man nog aldrig helt nöjd eftersom det alltid finns något som kan förbättras. Något man nu efter lansering kan fokusera på är att återigen dela nya projekt precis som i början av ett förhållande.

Just nu vill jag dock helst fortsätta sväva bland molnen och hoppas att mitt förhållande till Contentful och Gatsby fortsätter vara en lycklig saga! 

Joanna Högberg