Single-page applications

Hjemmesider udviklet med en SPA teknologi er vundet mere og mere frem de seneste 10 år. Du bruger SPA hjemmesider til dagligt, når du eksempelvis åbner din mail eller Facebook i browseren.

Single-page applikationer er blevet et populært og kraftfuldt værktøj til at skabe moderne, responsive webapplikationer. Med deres evne til at forbedre ydeevnen og give en problemfri brugeroplevelse er SPA'er et stadig mere populært valg for udviklere, der ønsker at skabe engagerende og interaktive applikationer.

Hvordan det fungerer

Hjemmesider udviklet som SPA fungerer ved at en større del af hjemmesiden bliver hentet ved første besøg, i kontrast til traditionelle hjemmesider. Når en bruger efterfølgende klikker på links og interagerer med hjemmesiden, så opdateres kun de relevante områder af hjemmesiden, modsat en normal hjemmeside, hvor hele siden genindlæses. Det gør, at hele oplevelsen ofte føles hurtigere og mere responsiv end traditionelle hjemmesider.

Når hjemmesiden besøges første gang, hentes der en stor del af hele applikationen ned og indlæses i brugerens browser. Når brugeren efterfølgende interagerer med hjemmesiden, så fanger applikationen det ved hjælp af JavaScript og opdaterer hjemmesiden de relevante steder, uden behovet for at genindlæse hele siden. I stedet hentes blot de relevante informationer til en side, og vises.

Applikationen udvikles som udgangspunkt i et eksisterende JavaScript framework. Det er et sådan framework, der håndterer indlæsning af siderne.

Hvilke framework der findes

Der findes i dag en lang række JavaScript frameworks til at udvikle SPA applikationer. De mest kendte er React (udviklet af Facebook), Angular (udviklet af Google), Vue.js, Svelte m.fl.

Der er fordele og ulemper ved de forskellige frameworks.

Angular har eksempelvis en højere læringskurve end flere af de andre, men er oftest god til at udvikle store komplekse applikationer.

Vue.js er derimod mere simpelt og intuitivt med en lavere læringskurve, og er som udgangspunkt bedre egnet til mindre applikationer der skal bygges hurtigt og godt.

Svelte er bygget til at have en bedre ydeevne når applikationen benyttes.

React opererer et sted mellem Angular og Vue.js.

Flere af disse frameworks kan også benyttes til at lave apps til iOS og Android.

Fordele

Nogle fordele er en højere hastighed når hjemmesiden benyttes, bedre brugeroplevelse og mulighed for offline support.

Det er oftest en enorm fordel, når der bygges web-applikationer såsom dashboards, login-systemer mm.

Ulemper

Et par ulemper er, at det skaber en højere kompleksitet, da der både skal udvikles en front-end og en back-end, og de skal udvikles så de taler sammen.

Det er også sværere at lave en god SEO. Hvis søgemaskineoptimering er vigtigt for hjemmesiden, skal man være påpasselig med at vælge en SPA.

Og så er der stadig en lille ulempe i form af browser kompatibilitet, så nogle brugere vil have udfordringer med at få vist en SPA rigtigt.

Statiske

Helt 'gammeldags', statisk generede hjemmesider har også fået et comeback. De kan være en fordel til blogs og sider med statisk indhold, og der findes i dag nogle stærke værktøjer til at administere disse typer af hjemmesider.

Eksempelvis er 11ty (Eleventy) blevet populært.

WebAssembly

WebAssembly (eller Wasm) er en nyere teknologi, der har nogle af de samme karakteristika som en SPA, udover at koden ikke længere nødvendigvis er skrevet i JavaScript og kan køre langt hurtigere.

Teknologien er støttet af de største IT firmaer og W3C.

Blazor

Blazor er en teknologi fra Microsoft til at lave web apps. Det har et par forskellige versioner at vælge imellem, bl.a. WebAssembly.

Blazor skiller sig bl.a. ud ved at man kan kode det hele i C# frem for JavaScript.

Web 3.0

Web 3.0 er endnu ikke konceptualiseret, men handler om at vores internet bliver mere decentraliseret og at man samtidig kan få ejerskab over sit eget indhold.

Med fokus på decentralisering og eksempelvis blockchain, kan der skabes nye muligheder for at lave hjemmesider - på godt og ondt.

Process

Du skal først sætte dig ind i, hvilken type hjemmeside du skal have lavet. Hvis det er en simpel side, med meget statisk indhold og et lavt budget, så er en SPA typisk ikke for dig, da omkostninger vil være for høje.

Hvis du derimod skal have bygget et mere komplekst system, med meget forskelligt indhold og bruger interaktion, så er der en stor chance for, at en SPA vil være det helt rigtige valg.

Beslutning

Når du vælger en teknologi, kan det have afgørende indflydelse på hvor stor success din web applikation får.

Hvis du er i tvivl om du tager den rigtige beslutning, så tag endelig fat i os. Vi kan både rådgive dig og stille med udviklingskompetencer til at bygge moderne webapplikationer.