Motsatsen till Single Page Application (SPA) är Multiple Page Application (MPA) och är det vi känner till som helt vanliga webbsidor. Varje klick på en länk laddar en helt ny sida och allt som kommer därtill. Google Analytics, CSS-filer, bilder, meny, sidhuvud, sidfot med mera. Även om vissa resurser cachas i browsern behöver browsern alltid starta från noll vid varje sidladdning och tolka samtliga filer om och om igen. Det här tar naturligtvis tid. Tid som användaren stirrar på en blank skärm eller innehåll som hoppar runt på skärmen allteftersom sidinnehållet tolkas. I många fall finns där även annonser från en tredje part som dyker upp långt efter att allt annat sidinnehåll är klart, och precis när du ska klicka dig vidare till nästa sida, förskjuts innehållet ytterligare och du klickar på något du inte vill. Känns det igen?
En sidladdning
Med en Single Page Application laddas hela sidan EN gång. Efterföljande klick till nya ”sidor”, eller routes som vi kallar det, resulterar i minimal trafik över nätverket och endast data som är relevant för routen skickas som JSON. Moderna JavaScript-ramverk, som till exempel React, Vue eller Angular, används för att rendera om delar av sidan. Sidan delas upp i komponenter som in sin tur består av underkomponenter i flera nivåer. Varje komponent reagerar på olika sätt på förändringar i datat. När renderingen är klar ansvarar ramverket för att uppdatera endast de noder på webbsidan som har förändrats vilket gör att onödigt blink minimeras. Man har då rätt förutsättningar för att skapa en webbplats som känns och beter sig som en app.
Tyvärr har inte många e-handelsplattformar hängt med i den här utvecklingen. Ur browserns och besökarens perspektiv används faktiskt ungefär samma teknik som för 20 år sedan, även om vi i dag har mer avancerad bakomliggande teknik. Under den här tiden har användarna fått smarta telefoner och appar med blixtsnabb prestanda där användarupplevelsen har stått i första rummet. Det finns egentligen inget hinder att kräva samma prestanda och användarupplevelse hos en webbsida i dag, som i en native app.
Bättra på prestandan
Med en SPA-applikation öppnas nya möjligheter för att ytterligare snabba upp svarstiden och spara processorkraft på servern. Moderna browsers har en lokal databas som är unik för varje domän som heter IndexedDB. För att ytterligare bättra på prestandan i en SPA kan man använda den för att tillfälligt lagra data som annars hade behövts från servern om och om igen. Ett vanligt användarscenario är att användaren hoppar fram och tillbaka mellan en kategorisida och dess produktdetaljsidor. Med en relativt kort cachetid på runt 20 minuter slipper man att begära samma resurs flera gånger om under ett besök på en e-handelsplats. Det gör det även möjligt att visa cachad data under tiden man uppdaterar datan i bakgrunden, sömlöst för användaren.
Progressive Web App
Vill man gå ett steg längre och skapa en Progressive Web App som användaren kan lägga på startskärmen, är inte steget långt. Då öppnar sig även möjligheten att använda push-notifieringar precis som i en native app, men med fördelen att ha en och samma kodbas att underhålla. Eftersom en PWA ligger på startskärmen påminner den användaren om att din webbplats finns och räcker inte det kan man varsamt gå fram med push-notifieringar med riktade erbjudanden.
Headless e-handel
Bästa förutsättningen för e-handel som Single Page Application ges med en plattform som är ”headless”, till exempel Bizzkit som vi på 3bits jobbar med. Headless är ett ord många hört men som kan vara lite svårt att förstå vad det egentligen betyder. Lite kort kan det beskrivas som att e-handelsplattformen inte lägger sig i hur sidor ska presenteras på sajten. En headless e-handelsplattform ansvarar för att lagra produkter, order, betalsätt etc, på ett strukturerat sätt precis som en vanlig e-handelsplattform. Men i stället för att inkludera en webbsajt som servar webbsidor, exponeras endast ett REST API för att göra operationer mot plattformen. Detta ger friheten att bygga webbplatsen precis hur som helst och öppnar även upp för möjligheten att integrera andra system på ett enkelt sätt. Samma REST API kan då användas för en till exempel en native app, handla via Google-assistenten eller en kundterminal i en butik.
Vi pratar gärna mer om Single Page Application och de fördelarna vi ser att använda tekniken för en e-handelssajt, hör av dig om du vill se en demo av 3bits Blueprint för att upptäcka hur prestandan kan förbättras med SPA.