Caratteristiche e differenza tra Multi-Page Application e Single-Page Application in informatica

Pattern architetturali

La progettazione della struttura un applicazione web può avvenire secondo diversi pattern architetturali.

Multi-Page Application

Il Multi-Page Application è il pattern secondo il quale il client per ogni pagina da mostrare esegue una richiesta al server il quale, dopo aver elaborato la richiesta, restituisce il contenuto della pagina con le relative risorse. Quindi la navigazione avviene tra diverse pagine HTML ed ogni pagina esegue opzionalmente del codice JavaScript al fine di personalizzare e rendere dinamico il contenuto. Più nel dettaglio, il browser richiede la pagina HTML mentre il codice JavaScript richiede i dati (tipicamente in formato JSON) e la logica dell’applicazione viene gestita sia lato server, sia lato client.

Secondo questo pattern si esegue un rendering server-side, in quanto è il server che invia al client la pagina corretta da visualizzare e quindi, bisogna attendere sempre il caricamento della nuova pagina.

Un esempio di applicazione di questo pattern si ha nei Content Management System (CMS) ovvero un software, installato su un server web, per la gestione dei contenuti di siti web.

Single-Page Application

Il Single-Page Application è un pattern che rappresenta l’evoluzione di quello tradizionale, secondo il quale sul server risiede una singola pagina dell’applicazione che è esattamente la stessa per ogni diverso URL. La pagina, tipicamente un file HTML privo di contenuti, tramite l’esecuzione del codice JavaScript, in risposta alle azioni che l’utente esegue durante la navigazione, riesce a modificare il contenuto visualizzato. Quindi, il contenuto della struttura del DOM (spesso abbreviato come DOM), letteralmente modello a oggetti del documento, si modifica dinamicamente e di conseguenza si riduce il tempo di caricamento delle pagine che avviene quasi istantaneamente perché non si deve attendere che la nuova risorsa HTML arrivi dal server.

In questo caso il front-end gestisce interamente la visualizzazione del contenuto e l’interazione con il server avviene unicamente per lo scambio dei dati da mostrare. Si riduce così il carico di lavoro del server, mentre aumentano molto le responsabilità del browser e del front-end nella gestione dell’applicativo.

I vantaggi principali legati a questo pattern sono i seguenti:

• miglioramento dell’esperienza utente che diventa simile a quella delle applicazioni desktop;
• velocità di esecuzione dell’applicativo e riduzione dei tempi di attesa durante la navigazione (se si sfrutta la cache si può anche consentire la navigazione offline);
• possibilità di gestire più facilmente la responsività dell’applicazione;
• tutta l’applicazione viene implementata in un unico punto e, tramite gli strumenti di sviluppo integrati nei browser, è anche più semplice fare il debug ispezionando il DOM e monitorando i dati che vengono scambiati con il server attraverso la rete;
• si può riutilizzare il codice del back-end per sviluppare app mobile native.

Esistono però anche degli svantaggi ad esso correlati:

• il primo punto di accesso all’applicazione potrebbe essere lento in condizioni di scarsa connettività;
• se il dispositivo su cui si esegue l’applicazione non fosse sufficientemente prestante si potrebbe incorrere in un’esperienza povera in termini di velocità;
• i motori di ricerca e i SEO (Search Engine Optimization), poiché non hanno pagine HTML da ispezionare hanno più difficoltà ad indicizzare l’applicativo;
• poiché il cambiamento del contenuto pagina avviene dinamicamente nel contesto della stessa pagina la cronologia del browser perde di efficacia;
• bisogna curare con molta attenzione la logica sul client perché essendo essa esposta agli utenti finali può incorrere in problemi di sicurezza, tra i più noti il Cross-Site Scripting (XSS) ovvero una vulnerabilità che consente ad un attaccante remoto di “iniettare” script dannosi nelle singole pagine con lo scopo di rubare informazioni riservate o installare malware sui browser degli utenti.

Altri pattern

Esistono altri pattern architetturali che si stanno diffondendo nell’ambito dello sviluppo web e sono i seguenti:

1. Isomorphic Application: è un pattern che mette insieme SPA con MPA, ottenendo un comportamento ibrido secondo il quale alcune pagine vengono costruite dinamicamente lato client mentre altre vengono restituite dal server.
2. Progressive Web Application: è un pattern pensato principalmente nell’ottica di dispositivi mobile, secondo il quale l’applicativo web, sviluppato con tecnologie web, tende ad integrarsi con il sistema operativo e ad essere molto simile ad un’applicazione nativa. Una PWA può essere “installata” tramite un bottone all’interno del browser; compare nella lista delle app native installate e consente all’utente di ricevere notifiche push.