Een single-page-applicatie (SPA) is een web-app die via een enkele HTML-pagina aan de gebruiker wordt gepresenteerd om sneller te reageren en een desktop-applicatie of native app beter te repliceren.
Een SPA komt soms defienkele pagina-interface (SPI).
Een applicatie met één pagina kan alle HTML, JavaScript en CSS van de applicatie ophalen tijdens de eerste keer laden, of het kan dynamisch resources laden voor updaten als reactie op gebruikersinteractie of andere gebeurtenissen.
Andere webapplicaties bieden de gebruiker een startpagina die is gekoppeld aan delen van de applicatie op afzonderlijke HTML-pagina's, wat betekent dat de gebruiker moet wachten tot een nieuwe pagina is geladen telkens wanneer hij een nieuw verzoek doet.
Technologieën
SPA's gebruiken HTML5 en Ajax (asynchrone JavaScript en XML) om vloeiende en dynamische reacties op verzoeken van gebruikers mogelijk te maken, waardoor inhoud onmiddellijk kan worden bijgewerkt wanneer een gebruiker een actie onderneemt. Zodra de pagina is geladen, vinden interacties met de server plaats via Ajax-oproepen en worden de gegevens geretourneerd, gedetecteerd in JSON-indeling (JavaScript Object Notation), om de pagina te vernieuwen zonder opnieuw te hoeven laden.
SPA in detail
Apps met één pagina vallen op door hun vermogen om elk deel van de gebruikersinterface opnieuw te ontwerpen zonder dat er een serverrondreis nodig is om de HTML op te halen. Dit wordt bereikt door gegevens te scheiden van gegevenspresentatie met een modellaag die de gegevens beheert en een weergavelaag die leest van de modellen.
Goede code komt voort uit het meerdere keren oplossen van hetzelfde probleem of het herstructureren ervan. Gewoonlijk evolueert dit proces in terugkerende patronen, waarbij één mechanisme consequent hetzelfde doet.
Om onderhoudbare code te schrijven, moet u code op een eenvoudige manier schrijven. Dit is een constante strijd, in feite is het gemakkelijk om complexiteit (entlances/afhankelijkheden) toe te voegen door code te schrijven om een probleem op te lossen; en het is gemakkelijk om een probleem op te lossen op een manier die de complexiteit niet vermindert.
Namespaces zijn hier een voorbeeld van.
Single Page Applications (SPA) Multi Page Applications (MPA) vergeleken
Multi-page applications (MPA's) bevatten meerdere pagina's met statische gegevens en links naar andere sites. HTML en CSS zijn de belangrijkste technologieën die worden gebruikt om MPA-websites te ontwikkelen. Ze kunnen JavaScript gebruiken om de belasting te verminderen en de snelheid te verhogen. Organisaties die een breed scala aan diensten aanbieden, zoals online winkels, zouden het gebruik van MPA moeten overwegen, omdat het de verbinding met verschillende gebruikersdatabases vergemakkelijkt.
Toepassingen met één pagina verschillen op de volgende manieren van toepassingen met meerdere pagina's:
- Ontwikkelingsproces: Bij het maken van MPA's heeft u geen JavaScript-vaardigheid nodig, in tegenstelling tot SPA's. Door de koppeling van front-ends en back-ends in MPA's hebben deze sites echter relatief langere bouwtijden nodig dan SPA's.
- velocità: MPA's werken relatief langzamer, waardoor elke nieuwe pagina vanaf nul moet worden geladen. SPA's laden echter veel sneller na de eerste download omdat ze gegevens cachen voor later gebruik.
- Zoek machine optimalisatie: Zoekmachines kunnen eenvoudig websites indexeren met MPA. MPA's hebben meer pagina's die door zoekmachines worden gecrawld om betere SEO-ranglijsten te genereren. De inhoud van elke pagina is ook statisch, waardoor deze toegankelijker wordt. SPA's daarentegen hebben een pagina met één unieke URL (Uniform Resource Locator). Ze gebruiken ook JavaScript, dat door de meeste zoekmachines niet goed wordt geïndexeerd. Dit maakt SEO-ranglijsten voor SPA's uitdagender.
- veiligheid: In MPA moet u elke online pagina afzonderlijk beveiligen. SPA's zijn echter meer vatbaar voor aanvallen van hackers. Maar met de juiste aanpak kunnen ontwikkelteams de beveiliging van applicaties verbeteren.
Naarmate meer bedrijven migreren om SPA's te gebruiken, zullen crawlers en zoekmachines evolueren om ze beter te kunnen indexeren. Gezien de snelheid is het slechts een kwestie van wanneer SPA's de go-to-optie zullen worden voor de ontwikkeling van webapplicaties. Dan zullen de voordelen van MPA ten opzichte van SPA beginnen te vervagen.
Wanneer toepassingen met één pagina gebruiken?
Er zijn vijf scenario's waarin dergelijke toepassingen het meest relevant zijn:
- Gebruikers die een website willen ontwikkelen met een dynamisch platform en lagere datavolumes kunnen gebruik maken van SPA's.
- Gebruikers die van plan zijn een mobiele applicatie voor hun website te bouwen, kunnen ook overwegen om SPA te gebruiken. Ze kunnen de backend API (Application Programming Interface) gebruiken voor de site en de mobiele applicatie.
- SPA-architectuur is geschikt voor het bouwen van sociale netwerken zoals Facebook, SaaS-platforms en gesloten communities, omdat deze minder SEO vereisen.
- Gebruikers die hun consumenten naadloze interactie willen bieden, moeten ook SPA's gebruiken. Consumenten hebben ook toegang tot live updates voor live streaming gegevens en grafieken.
- Gebruikers die een consistente, native en dynamische gebruikerservaring willen bieden op verschillende apparaten, besturingssystemen en browsers.
Een goed team moet het budget, de tools en de tijd hebben om een single-page applicatie van hoge kwaliteit te maken. Dit zorgt voor een betrouwbare en efficiënte SPA die geen verkeersgerelateerde downtime ondervindt.
Applicatie-architectuur met één pagina
Apps met één pagina communiceren met bezoekers door de huidige pagina te laden en eraan te werken, waardoor het niet meer nodig is om meerdere webpagina's van de server te laden.
Websites met SPA bestaan uit een enkele URL-link. De inhoud wordt gedownload en specifieke componenten van de gebruikersinterface (UI) worden bijgewerkt wanneer erop wordt geklikt. De gebruikerservaring is verbeterd omdat de gebruiker kan communiceren met de huidige pagina wanneer nieuwe inhoud wordt opgehaald van de server. Wanneer er wordt vernieuwd, worden delen van de huidige pagina bijgewerkt met de nieuwe inhoud.
Het eerste klantverzoek in SPA laadt de applicatie en al zijn relevante activa, zoals HTML, CSS en JavaScript. Het initiële laadbestand kan belangrijk zijn voor complexe toepassingen en resulteren in een langzamere laadtijd. Een Application Programming Interface (API) haalt nieuwe gegevens op terwijl de gebruiker door een SPA navigeert. de server reageert alleen met gegevens in JSON-formaat (JavaScript Object Notation). Na ontvangst van deze gegevens vernieuwt de browser de weergave van de toepassing die de gebruiker ziet zonder een pagina opnieuw te laden.
Single-page applicatie-architectuur omvat server-side en client-side renderingtechnologieën. De site wordt weergegeven en gepresenteerd aan de gebruiker via Client Side Rendering (CSR), Server Side Rendering (SSR) of Static Site Generator (SSG).
- Client Side Rendering (CSR)
Bij client-side rendering doet de browser een verzoek aan de server voor een HTML-bestand en ontvangt een eenvoudig HTML-bestand met bijgevoegde scripts en stijlen. Tijdens het uitvoeren van JavaScript ziet de gebruiker een lege pagina of laderafbeelding. De SPA haalt de gegevens op, produceert visualisaties en duwt de gegevens in het Document Object Model (DOM). Vervolgens wordt de SPA klaargemaakt voor gebruik. CSR is vaak de langste van de drie alternatieven en kan af en toe de browser overweldigen vanwege het zware gebruik van apparaatbronnen bij het bekijken van inhoud. Bovendien is CSR een geweldig alternatief voor websites met veel verkeer, omdat het informatie aan consumenten presenteert zonder overmatige servercommunicatie, wat resulteert in een snellere gebruikerservaring.
- Server-side weergave (SSR)
Tijdens het renderen aan de serverzijde vragen browsers een HTML-bestand op bij de server, die de gevraagde gegevens ophaalt, de SPA weergeeft en het HTML-bestand voor de toepassing onderweg maakt. Toegankelijk materiaal wordt vervolgens gepresenteerd aan de gebruiker. De SPA-architectuur is nodig om gebeurtenissen te koppelen, een virtuele DOM te produceren en verdere bewerkingen uit te voeren. Vervolgens wordt de SPA klaargemaakt voor gebruik. SSR maakt het programma snel omdat het de snelheid van een SPA combineert met het niet overbelasten van de browser van de gebruiker.
- Statische sitegenerator (SSG)
Binnen de statische sitebouwer doen browsers direct een verzoek aan de server voor een HTML-bestand. De pagina wordt aan de gebruiker getoond. De SPA haalt de gegevens op, genereert weergaven en vult het documentobjectmodel (DOM). Dan is de SPA klaar voor gebruik. Afleidend uit de naam, zijn SSG's meestal geschikt voor statische pagina's. Ze bieden statische pagina's met een goede en snelle optie. Voor websites met dynamische inhoud wordt gebruikers geadviseerd om een van de andere twee opties voor informatieweergave te kiezen.
Voordelen van applicaties met één pagina
Grote bedrijven zoals Meta, YouTube en Netflix zijn overgestapt van applicaties met meerdere pagina's naar applicaties met één pagina. SPA's bieden een soepelere gebruikerservaring, hogere prestaties en reactievermogen. Hieronder staan de voordelen van het gebruik van applicaties met één pagina.
- Caching-functie
Een toepassing met één pagina doet een enkel verzoek aan de server bij de eerste download en slaat alle ontvangen gegevens op. Consumenten kunnen de ontvangen gegevens gebruiken om indien nodig offline te werken, wat het voor de gebruikers handiger maakt omdat ze minder gegevensbronnen kunnen verbruiken. Ook als een client een slechte internetverbinding heeft, kunnen lokale gegevens worden gesynchroniseerd met de server als de LAN-verbinding dit toelaat.
- Snel en responsief
Het gebruik van SPA's kan de snelheid van een website verbeteren, omdat alleen de gevraagde inhoud wordt vernieuwd in plaats van de hele pagina. SPA's laden een klein JSON-bestand in plaats van een nieuwe pagina. Het JSON-bestand zorgt voor een snellere laadsnelheid en efficiëntie. Het resulteert in directe toegang tot alle kenmerken en functies van een pagina zonder enige vertraging. Dit is een enorm pluspunt, aangezien de laadtijd van een website de omzet en verkoop aanzienlijk kan beïnvloeden.
SPA's zorgen voor soepele overgangen door alle informatie op de pagina direct te verstrekken. De website hoeft niet te worden bijgewerkt, dus de processen zijn efficiënter dan bij typische online apps.
Ook met SPA's, middelen zoals HTML, CSS en scripts Java ze worden slechts eenmaal in de levensduur van een toepassing opgehaald. Alleen de noodzakelijke gegevens worden heen en weer uitgewisseld.
Met pagina's met SPA kunnen gebruikers ook sneller navigeren dankzij caching en verminderde datavolumes. Alleen de noodzakelijke gegevens worden heen en weer verzonden en alleen de ontbrekende delen van de bijgewerkte inhoud worden gedownload.
- Foutopsporing met Chrome
Foutopsporing detecteert en verwijdert bugs, fouten en kwetsbaarheden in de beveiliging van webapplicaties die de prestaties vertragen. Foutopsporing in SPA's is gemakkelijk gemaakt met Chrome-ontwikkelaarstools. Ontwikkelaars kunnen de weergave van JS-code vanuit de browser regelen, SPA's debuggen zonder vele regels code te doorzoeken.
SPA's zijn gebouwd bovenop JavaScript-frameworks zoals AngularJS en React-ontwikkelaarstools, waardoor ze gemakkelijker te debuggen zijn met Chrome-browsers.
Met ontwikkelaarstools kunnen ontwikkelaars begrijpen hoe de browser gegevens van servers opvraagt, in de cache opslaat en hoe pagina-elementen worden weergegeven. Bovendien stellen deze tools ontwikkelaars in staat om pagina-elementen, netwerkbewerkingen en bijbehorende gegevens te bewaken en te analyseren.
- Snelle ontwikkeling
Tijdens het ontwikkelingsproces kunnen de front-end en back-end van een SPA worden gescheiden, waardoor twee of meer ontwikkelaars parallel kunnen werken. Het wijzigen van de frontend of backend heeft geen invloed op de andere kant, waardoor een snellere ontwikkeling wordt bevorderd.
Ontwikkelaars kunnen server-side code hergebruiken en SPA's scheiden van de front-end UI. De ontkoppelde architectuur in SPA's scheidt front-end displays en back-end services. Hierdoor kunnen ontwikkelaars van perspectief veranderen, bouwen en experimenteren zonder de inhoud te beïnvloeden of zich zorgen te maken over back-endtechnologie. Klanten kunnen dan een consistente ervaring hebben met het gebruik van deze applicaties.
- Verbeterde gebruikerservaring
Met SPA's krijgen gebruikers direct toegang tot bekeken pagina's met alle inhoud in één keer. Dit is handiger omdat gebruikers comfortabel en naadloos kunnen scrollen. Het voelt alsof je een native desktop- of mobiele app gebruikt.
SPA's bieden een positieve UX met een duidelijk begin, midden en einde. Ook kunnen gebruikers de gewenste inhoud bereiken zonder op meerdere links te klikken, zoals in MPA's. U ervaart lagere bouncepercentages wanneer gebruikers direct toegang krijgen tot informatie, in tegenstelling tot MPA's waar gebruikers gefrustreerd raken omdat pagina's veel tijd nodig hebben om te laden. Navigatie is ook sneller omdat pagina-elementen worden hergebruikt.
- Conversie naar IOS- en Android-applicaties
Ontwikkelaars die willen overstappen op iOS- en Android-applicaties moeten SPA's gebruiken, omdat deze relatief eenvoudiger te converteren zijn. Ze kunnen dezelfde code gebruiken om over te schakelen van SPA naar mobiele applicaties. Omdat de volledige code in één keer wordt aangeboden, zijn SPA's gemakkelijk te navigeren, waardoor ze ideaal zijn voor mobiele toepassingen.
- Compatibiliteit tussen platforms
Ontwikkelaars kunnen een enkele codebasis gebruiken om applicaties te bouwen die op elk apparaat, elke browser en elk besturingssysteem kunnen worden uitgevoerd. Dit verbetert de ervaring van de consument omdat ze de SPA overal kunnen gebruiken. Het stelt ontwikkelaars en DevOps-engineers ook in staat om feature-rijke applicaties te bouwen, inclusief real-time analyses, terwijl ze content-editing applicaties ontwikkelen.
Minpunten
Ondanks alle voordelen van applicaties met één pagina, doen zich enkele nadelen voor bij het gebruik van SPA-frameworks. Gelukkig wordt er gewerkt aan het oplossen van deze problemen met SPA's. Hieronder staan enkele minpunten;
- Zoekmachine optimalisatie (SEO)
Er wordt algemeen aangenomen dat applicaties met één pagina niet geschikt zijn voor SEO. De meeste zoekmachines, zoals Google of Yahoo, zijn al een tijdje niet in staat om SPA-websites te crawlen op basis van Ajax-interacties met servers. Als gevolg hiervan bleven de meeste van deze SPA-sites niet geïndexeerd. Momenteel hebben Google-bots geleerd hoe ze JavaScript moeten gebruiken in plaats van gewone HTML om SPA-websites te indexeren, wat de ranglijst schaadt.
SEO inpassen in een kant-en-klare SPA-site is een uitdaging en duur. Ontwikkelaars moeten een aparte website bouwen, weergegeven door de server van de zoekmachine, wat inefficiënt is en veel extra code met zich meebrengt. Andere technieken zoals kenmerkdetectie en pre-rendering kunnen ook worden gebruikt. In SPA-faciliteiten beperkt een enkele URL voor elke pagina de SEO-mogelijkheden voor SPA's.
- Knopnavigatie voor terug en vooruit
Browsers slaan informatie op om webpagina's snel te laten laden. Wanneer consumenten op de terugknop drukken, verwachten de meesten dat de pagina zich in dezelfde staat bevindt als de laatste keer dat ze deze bekeken, en dat de overgang snel zal plaatsvinden. Traditionele webarchitecturen maken dit mogelijk door kopieën van de site en gerelateerde bronnen in de cache te gebruiken. In een naïeve implementatie van een SPA heeft het indrukken van de terugknop echter hetzelfde effect als het klikken op een link. Veroorzaakt een serververzoek, meer vertraging en zichtbare gegevenswijzigingen.
Om aan de verwachtingen van gebruikers te voldoen en een snellere ervaring te bieden, moeten SPA-ontwikkelaars de functionaliteit van native browsers nabootsen met behulp van JavaScript.
- Scroll locatie
Browsers slaan informatie op zoals de laatste scrolpositie van bezochte pagina's. Gebruikers kunnen echter merken dat de schuifposities zijn gewijzigd bij het navigeren door SPA's met behulp van de knoppen Vorige en Volgende van de browser. Op Facebook scrollen gebruikers bijvoorbeeld soms terug naar hun laatste scrolposities, maar soms ook niet. Dit resulteert in een suboptimale gebruikerservaring, aangezien ze handmatig terug moeten scrollen naar de vorige scrollpositie.
Om dit probleem aan te pakken, moeten ontwikkelaars code leveren die opslaat, ophaalt en vraagt om de juiste schuifpositie terwijl de gebruiker heen en weer scrolt.
- Website-analyse
Door analysecode aan een pagina toe te voegen, kunnen gebruikers het verkeer naar de pagina volgen. SPA's maken het echter moeilijk om te bepalen welke pagina's of inhoud het populairst is, aangezien het maar één pagina is. U moet aanvullende code opgeven voor de analyse om de pseudo-pagina's te volgen terwijl ze worden bekeken.
- Veiligheid problemen
SPA's zijn meer vatbaar voor gecompromitteerd via cross-site scripting. Ze stellen consumenten in staat om de volledige applicatie te downloaden, waardoor ze meer mogelijkheden krijgen om kwetsbaarheden te vinden door middel van reverse engineering. Om dit probleem aan te pakken, moeten ontwikkelaars ervoor zorgen dat alle logica aan de clientzijde met betrekking tot de beveiliging van webapplicaties, zoals authenticatie en invoervalidatie, ter verificatie op de server wordt verdubbeld. Ook moeten ontwikkelaars beperkte op rollen gebaseerde toegang bieden.
Afsluitende
Single Page Apps markeren de volgende stap in de evolutie van app-ervaringen. Ze zijn sneller, intuïtiever en kunnen worden geïntegreerd met geavanceerde functies zoals maatwerk. Daarom vertrouwen de beste bedrijven met veel gelijktijdige gebruikers, zoals Gmail, Netflix of de nieuwsfeed van Facebook, op een enkele pagina-architectuur. Door deze technologie te implementeren, kunnen bedrijven meer waarde halen uit hun online eigendommen en nieuwe wegen inslaan als digitaal bedrijf.
Ercole Palmeri
