Glossario: Single-page application

Le Single-Page Application (o più comunemente SPA) sono delle applicazioni o dei siti web interamente costruiti su un’unica pagina.

Nel momento in cui si visita la pagina, il sito carica fin da subito tutte le risorse necessarie per la navigazione: il codice HTML, il JavaScript e i CSS.

Tipicamente queste pagine vengono sviluppate con vari framework JavaScript come AngularJS o React. Questo fa sì che il sito reagirà ad ogni azione come se fosse un’applicazione desktop, dato che tutti i file sono già stati compilati nel PC.

La pagina potrà cambiare il suo contenuto dinamicamente, ma l’URL rimarrà sempre la stessa.

In sostanza, queste pagine offrono una navigazione molto rapida e, di conseguenza, un’ottima user experience 🙂

Come vengono create le single-Page Application?

Queste applicazioni vengono solitamente sviluppate con uno dei seguenti Framework JavaScript:

• AngularJS
• Ember.JS
• ExtJS
• Knockout.js
• Meteor.js
• React
• Vue.js

Problemi delle SPA

La fluidità di queste applicazioni rende la navigazione molto più rapida e più soddisfacente. Tuttavia, ci sono anche dei lati negativi da tener conto:

• il primo caricamento della pagina risulta più lento del solito, in quanto vengono caricati subito tutti gli elementi necessari alla navigazione
• la web analytics deve essere adattata ad hoc, dato che tutto il contenuto del sito verrà visualizzato senza cambi di pagine

Primo Caricamento

Si può ammortizzare il peso del caricamento di pagina, inserendo dei lazy load all’interno del sito oppure facendo caricare alcuni contenuti dopo che l’utente compie una certa azione. Insomma, si può posticipare il caricamento di alcuni elementi.

Questa tecnica viene spesso applicata alle immagini e ai video, dato che sono file abbastanza pesanti.

Web analytics

Il fatto che esista una singola pagina può comportare dei problemi anche alla web analytics, in quanto scatterà soltanto il Page View all’accesso del sito.

Questo accade perché vengono caricati solo dei frammenti di dati, quindi il tracking non vedrà nessun cambiamento.

Ma secondo te mi sono fatto fermare da questo intoppo? Neanche per sogno!

Ho escogitato un #Barbatrucco grazie a Google Tag Manager, ovviamente! Scoprilo nella mia guida: Come Tracciare le Single Page Application con Google Tag Manager

A presto e… Buon Tag!