Så bygger du moderna webbplatser och webb-appar med Single Page Applications (SPA)
Mitt namn är Patrick Edqvist. Jag är teknisk projektledare med en gedigen bakgrund som utvecklare. I den här artikeln hoppas jag kunna introducera dig till vad en Single Page Application är utan att använda mig av teknisk jargong. Målet är du ska förstå vad som utgör en SPA, varför det har blivit så betydelsefullt samt olika för- och nackdelar.
Förstå grunden till hur en webbplats funkar
För att börja förstå vad en Single Page Application är behöver vi skapa en gemensam mental bild av hur internet fungerar.
Webbplatser utformas i grunden utifrån idén av att dokument kopplar samman länkar. När du som besökare vill läsa Om oss trycker du på rätt länk och webbläsaren begär dokumentet från webbplatsen, tar emot det och visar det för dig. Samtliga steg tar såklart lite tid och desto större dokument desto längre tid tar det att både hämta dokumentet och visa det för dig.
Nu ska du också tänkte dig att varje dokument eller webbsida innehåller mer än bara text och bilder. Det finns även kod som sätter färg och form på innehållet och kod för extra funktionalitet för exempelvis öppna en dialogruta, hämta och skicka information från eller till tredje-parts tjänster med mera. Så om en sida också växer med funktionalitet så kan dokumentet med tillhörande kod bli oerhört stort (eller tungt om vi pratar om dess filstorlek).
Därför kan ihopsatta dokument skapa problem
Nu ta exempelvis Gmail, en sida som användaren interagerar med en hel del och som innehåller både mycket information och funktionalitet. Om varje interaktion på sidan (som exempelvis att öppna ett mail) skulle leda till att ett helt nytt dokument ska begäras, hämtas och visas så blir det en försämrad användarupplevelse. Gmail skulle uppfattas som långsam och trög helt enkelt.
Det är utifrån denna idé att webbsidor ska vara dokument ihopsatta av länkar tvärs och kors som vi har ett problem när vi vill också ha mycket funktionalitet. Det är här som vi finner Single Page Application (SPA) som en lösningen på detta problem.
Hur kan en Single Page Application lösa ditt problem?
En stor del av innehållet på de sajter vi ser på är i allra största del det exakt samma innehåll på övriga sajter också. Exempelvis navigeringen, logotyper, innehållet längst ned som vi brukar kalla för “footern”. Om vi begär en ny sida från en vanlig sajt så hämtar vi information som egentligen redan finns. Men hade det inte varit fördelaktig om vi bara kunde byta ut de delar av sidan som faktiskt behövde bytas ut och lämna resten som de är? Det är detta som en Single Page Application löser.
Vilka fördelar finns det med Single Page Application?
Enkelt förklarat så håller en SPA en kopia av nuvarande dokumentet i annat format som den kan arbeta snabbare med. När en person navigerar eller använder en viss funktionalitet genomförs förändringar i en kopia av dokumentet. Sedan jämför en SPA nuvarande dokumentet i det mer effektiva formatet med kopian och byter ut endast de delar som har förändrats.
Genom att arbeta på detta sätt kan en webbsida innehålla både mycket information och funktionalitet utan att prestandan försämras.
Vanligaste SPA ramverk
Det finns flera olika SPA ramverk som vi utvecklare använder oss. Här är dem 3 mest populära ramverken som hjälper oss:
React
Vue
Angular
Bra att veta innan du satsar på en Single Page Application
En Single Page Application kommer med vissa nackdelar som är värt att vara medveten om, en del av dem kommer vi ofta runt med olika verktyg och andra ramverk som bygger på de ovanstående jag tidigare nämnde.
Nackdel 1 - Beroende av Javascript
SPAs skapas idag med hjälp av ett enda språk - Javascript. Kod skrivet i Javascript är något som webbläsaren bearbetar först efter att dokumentet har tagits emot. Normalt sett är detta inget som användare reagerar på men i en Single Page Application så sköter koden i Javascript också allt innehåll. Kort och gott om användaren inte har Javascript så möts personen av en blank sida. Men idag är det extremt ovanligt att användare inte har Javascript så det brukar inte vara ett problem.
En annan viktig sak att komma ihåg är att bottar, så som sökmotorer och även sådana som fixar förhandsvisningar av en sida (exempelvis via Facebook eller Linkedin), inte alltid kan köra Javascript. Försöker du dela en Single Page Application så får du antagligen ingen förhandsgranskning av titel, beskrivning eller bild. Googles sökmotor stödjer Javascript så för just den sökmotorn behöver vi inte oroa oss men andra sökmotorer gör kanske inte det.
Nackdel 2 - En halv sekund av vitt ljus
I en SPA så hämtas generellt allt innehåll via ett API, vilket görs först efter all funktionalitet har laddats. På grund av denna ordning så är dokumentet till en början helt tomt på innehåll och först efter att API:erna har svarat med innehåll kan användare börja få se något. Som användare gör detta inte så mycket, under en bra uppkoppling så sker detta väldigt snabbt ändå. Det kan dock vara noterbart under en kort stund att sidan är blank vit för att kort därefter fyllas med hela gränssnittet och innehållet.
Single Page Application Hybrid - Tackla nackdelarna och få ett bättre resultat!
För att tackla dessa nackdelar har hybrider av Single Page Applications kommit upp. Varför de kallas för hybrider är för att det initialt levererar en kopia på sidan så att användare får se innehåll direkt. Detta löser både fallet med att sökmotors- och förhandsgranskningbottar inte får något innehåll samt även att användaren får innehåll direkt.
Efter att innehållet har levererats och Javascriptet är laddat av webbläsaren tar en Single Page Application över. Som resultat blir exempelvis en webbsida ruskigt snabb.
Det finns lite olika kategorier av hybrider. En kategori av hybrider genererar allt innehåll på förhand med en annan har en mer klassisk struktur där innehållet genereras vid behov. Namnet på dessa två kategorier är statisk sid-generering och server rendering. Du kanske kommer över de benämningar någon gång.
Vår egen sajt är byggd som en hybrid av kategorin statisk sid-generering. Ramverket vi har använt kallas för Gatsby. En av våra senaste sajter är flowscape.se som är byggd med ramverket NextJS (som i sin tur är byggt på React), vilket ryms inom båda kategorierna. Testa dem både, hur snabbt upplever du dem att vara när du börjar navigera dig runt?
Sammanfattning
Summerat är en Single Page Application fantastiskt på många sätt. Den kommer med några nackdelar men inget som inte går att komma runt. En SPA utmärker sig framförallt där det finns mycket funktionalitet inbakat.
Är du intresserad av att se vad för applikation eller sajt med fantastisk prestanda vi kan göra för dig? Hör av dig till oss!