Cos’è un’applicazione a pagina singola e perché alla gente piacciono così tanto? Katie Lawson

Prima di tutto, molto probabilmente sei già un utente regolare di applicazioni a pagina singola (SPA).
Le applicazioni a pagina singola sono un ottimo strumento per creare esperienze incredibilmente coinvolgenti e uniche per i tuoi utenti.

Alcuni esempi di applicazioni a pagina singola sono come Gmail, Google Maps, AirBNB, Netflix, Pinterest, Paypal e molti altri utilizzano le SPA per creare un’esperienza fluida e scalabile.,

Tuttavia, in passato le SPA hanno lasciato i marketer all’oscuro quando si tratta di gestire i contenuti. Fortunatamente, ora è possibile abbinare la tua SPA con il CMS giusto per dare sia agli sviluppatori che ai marketer il livello di controllo di cui hanno bisogno.

Che cos’è l’applicazione a pagina singola?

Single page application (SPA) è una singola pagina (da cui il nome) in cui molte informazioni rimangono le stesse e solo pochi pezzi devono essere aggiornati alla volta.,
Ad esempio, quando si naviga attraverso la tua e – mail si noterà che non molto cambia durante la navigazione-la barra laterale e l’intestazione rimangono intatti come si passa attraverso la tua casella di posta.
La SPA invia solo ciò di cui hai bisogno ad ogni clic e il tuo browser esegue il rendering di tali informazioni. Questo è diverso da un caricamento di pagina tradizionale in cui il server ri-rende una pagina intera con ogni clic che fai e la invia al tuo browser.

Questo pezzo per pezzo, lato client metodo rende il tempo di caricamento deve più veloce per gli utenti e rende la quantità di informazioni di un server deve inviare molto meno e più conveniente., Una vittoria.

Cos’è l’architettura dell’applicazione a pagina singola? Come funziona?

L’applicazione a pagina singola è un’applicazione Web o un sito web che interagisce con l’utente riscrivendo dinamicamente la pagina corrente, anziché caricare intere nuove pagine dal server.

Questo approccio annulla l’interruzione dell’esperienza utente tra le pagine successive, rendendo l’applicazione più simile a un’applicazione desktop.

Sulla maggior parte dei siti web c’è un sacco di contenuti ripetuti.,

Alcuni di essi rimangono gli stessi, indipendentemente da dove vada l’utente (intestazioni, piè di pagina, loghi, barra di navigazione, ecc.), alcuni di essi sono costanti in una determinata sezione (barre dei filtri, banner) e ci sono molti layout e modelli ripetuti (blog, self-service, l’installazione di Google Mail menzionata sopra).
Le applicazioni a pagina singola sfruttano questa ripetizione.

Diciamo che la tua visione del sito web è un dipinto di una casa e di un albero. I siti Web tradizionali e multipagina dipingono l’intera immagine per te sul server e la inviano al tuo browser.,

Le SPA ti forniscono le guide paint-by-numbers per il sito, incluse le guide ripetute che probabilmente utilizzerai, e quindi indirizzano la vernice giusta (dati e contenuti) per compilare il modello.

In entrambi i casi vedi lo stesso albero, ma la velocità di SPA arriva quando richiedi nuovi contenuti – come fare clic su “avanti”, filtrare i risultati, aprire una mail o – in questa piccola metafora – chiedere di vedere un albero diverso.

In un sito Web tradizionale la richiesta di un nuovo albero causerebbe al server di ridipingere l’intera immagine e rispedirla.,

Con un’applicazione a pagina singola, il server dice “ehi, ho un nuovo albero per te, ma hai già la casa, quindi lascia che sia lo stesso”, quindi ti invia istruzioni aggiornate per un nuovo albero e la vernice per farlo.
Trasferendo il lavoro di pittura (rendering della pagina) dal server al client (tu) la pagina può essere riscritta dinamicamente, invece di passare attraverso un’intera ricarica.
Questo rende le cose molto più veloce.,

Vantaggi delle applicazioni a pagina singola

Le soluzioni SPA offrono numerosi vantaggi, come il miglioramento delle prestazioni e della coerenza delle applicazioni, la riduzione dei tempi di sviluppo e dei costi di infrastruttura.

Separando la presentazione dal contenuto e dai dati, i team di sviluppo possono lavorare a velocità diverse pur essendo integrati per la soluzione complessiva. SPA è un bene per fare responsive design per cellulari, desktop e tablet.,

Singolo file di tempo Caricare Ciascuno di HTML, CSS, JS

Applicazione singola pagina, dopo il caricamento della pagina iniziale, il server non invia più HTML a voi-si scarica tutto bene all’inizio.

Il server ti invia una pagina di shell e il tuo browser rende l’interfaccia utente (UI).

Poi, come si fa clic in giro, la SPA invia indietro le richieste di dati e markup, il server spara indietro le materie prime necessarie, e il browser lo prende e rende un aggiornato pezzi UI – interscambio senza mai bisogno di aggiornare l’intera pagina.,
Questa rapida intercambiabilità rende le SPA incredibilmente utili su pagine che sono altamente navigate e utilizzano modelli ripetuti.

Nessuna query extra al server

Poiché il server non ha bisogno di spendere tempo& energia facendo il disegno completo, le SPA riducono l’impatto sui server in generale, il che significa che è possibile risparmiare denaro utilizzando meno server per la stessa quantità di traffico.

Front-end veloce e reattivo Costruito

Insieme al tempo di prestazioni più rapido spiegato sopra, le SPA consentono anche agli sviluppatori di costruire il front-end molto più velocemente.,
Ciò è dovuto all’architettura disaccoppiata delle SPA o alla separazione dei servizi back-end e dei display front-end.

Molte funzionalità business critical non cambiano molto nel back-end.
Mentre il modo in cui i tuoi clienti accedono, registrano, acquistano e tengono traccia degli ordini possono cambiare di tanto in tanto il “look” o la presentazione, la logica e l’orchestrazione dei dati dietro di essa è piuttosto costante-e non vuoi rischiare di rovinarlo.

Allo stesso modo, il contenuto e i dati grezzi potrebbero rimanere gli stessi, ma il modo in cui si desidera visualizzarli è diverso.,
Disaccoppiando quella logica di back-end& i dati da come vengono presentati, li trasformi in un “servizio” e gli sviluppatori possono creare molti modi front-end diversi per mostrare e utilizzare quel servizio.

Con una configurazione disaccoppiata, gli sviluppatori possono creare, distribuire e sperimentare il front-end in modo completamente indipendente dalla tecnologia back-end sottostante.
Progettano il modo in cui vogliono che l’esperienza utente appaia e si senta, quindi inseriscono contenuti, dati e funzionalità attraverso tali servizi.,
Questo viene fatto utilizzando le API, che sono un insieme standard di regole tra le applicazioni su come strutturare, scambiare e riassemblare i dati.

Questa configurazione API consente agli sviluppatori di lavorare rapidamente sull’interfaccia utente senza rischi per le tecnologie di back-end business critical.

Esperienze utente avanzate

Poiché sempre più funzionalità sono costruite come servizi modulari (un’architettura di microservizi) che possono essere aggiornate in modo indipendente, diventa più facile sperimentare come vengono visualizzate e utilizzate.,
I framework SPAS sono ottimi per giocare con questi servizi per creare esperienze utente coinvolgenti, dinamiche e persino animate.

Inoltre, a molte persone piace semplicemente svilupparsi in un determinato linguaggio di programmazione (molti framework SPA usano javascript) e, grazie alle API, le SPA che costruisci in una lingua possono funzionare felicemente con servizi di back-end sviluppati in diverse lingue.

Applicazione a pagina singola con Angular vs React vs Ember vs Vue?,

Angular e React (e molti altri come Ember e Vue) sono framework che gli sviluppatori usano per creare SPA in modo efficiente ed eloquente.
In poche parole, questi framework sono una raccolta di componenti riutilizzabili, a cui molti sviluppatori hanno contribuito, che seguono un insieme definito di regole di costruzione.
Se pensi che sia come costruire una casa, potresti mescolare l’argilla, asciugare i mattoni, estrarre e modellare l’acciaio da solo – oppure potresti usare i mattoni e i tubi che altre persone hanno già progettato e concentrare il tuo tempo su ciò che rende la tua casa unica.,

Per quanto riguarda le differenze tra tutti, non sono un esperto (ma questo ragazzo sembra essere), ma una cosa grandiosa delle SPA e dei framework che le supportano è che, grazie alle API, con le giuste integrazioni puoi usare qualsiasi framework tu preferisca con le tue altre tecnologie abilitate alle API.

Perché le applicazioni a pagina singola e i CMS sono stati storicamente un accoppiamento difficile

Quando si utilizzano le SPA, gli sviluppatori potrebbero pensare all’esperienza come a una “app”, ma il visitatore lo penserà ancora come una pagina web, e dove c’è una pagina Web c’è un team di marketing che desidera ottimizzarla.,
Poiché le SPA sono app che richiedono un lavoro di sviluppo per armeggiare con il display& consegna dell’esperienza, i marketer devono tornare all’età della pietra digitale (ovvero gli anni ‘90) e chiedere aiuto allo sviluppo per ogni modifica che causa inevitabili colli di bottiglia.

Rimosso gli strumenti di editing Marketing sono utilizzati per

Le funzioni di editing CMS team di marketing si basano su (anteprima dal vivo, drag-and-drop, modifica WYSIWYG, ecc) sono di solito legati al livello di consegna nel CMS.,

Con le SPA, la consegna è determinata dalla SPA e il contenuto viene semplicemente memorizzato nel CMS in modo standard che le API possono leggere. Poiché la SPA è resa sul front-end, il CMS back-end non ha idea di come dovrebbe apparire e quindi non può far girare un’anteprima.
Così gli utenti CMS finiscono per rimanere bloccati con un approccio molto datato – compilare un modulo, incrociare le dita, spingere pubblicare, e andare a vedere come appare dal vivo.

Per tornare al nostro esempio paint-by-numbers, il CMS memorizza il contenuto grezzo (la vernice) e la SPA ha la guida paint-by-numbers di come dovrebbe apparire quel contenuto., L’anteprima non ha questa guida, quindi non riesco a capire come dovrebbe essere il contenuto.

Questa è una pura consegna “senza testa” di contenuti (aka, non ha il livello di consegna CMS come “head”). È ottimo per lo sviluppo rapido, ma un po ‘ ruvido per i marketer che vogliono cambiare il sito Web da soli senza dover codificare.

Oltre a ciò, i marketer sono abituati a pensare alle cose in “pagine”, ma poiché una SPA è, beh, una singola pagina, le funzionalità di costruzione e modifica della pagina di cui i marketer hanno bisogno non sono disponibili.,
Se vogliono una nuova “pagina” (un “percorso” in una SPA), o vogliono che la vista abbia un aspetto diverso, devono chiedere a uno sviluppatore.

Ha reso difficile il riutilizzo dei contenuti

Questo problema deriva da due motivi principali, uno con CMS antiquati e l’altro da SPA design.

Innanzitutto, ci sono alcuni CMS in cui semplicemente non c’è un de-accoppiamento di come appare il tuo contenuto e come viene memorizzato.,
Poiché la memorizzazione del contenuto non è in un formato neutro di presentazione standard, la SPA non può utilizzarlo in modo basato su API.

Questo non è solo un problema quando si utilizzano le SPA, naturalmente, questo tipo di configurazione CMS rende impossibile riutilizzare i contenuti attraverso i canali in generale.
Poiché il contenuto è legato al modo in cui viene visualizzato (un sistema basato su pagine), le domande frequenti che inserisci sul tuo sito Web non possono essere semplicemente sfruttate per consentire a qualcuno di sfogliare il proprio orologio intelligente: dovresti memorizzare lo stesso contenuto in due modi diversi.,
SPA ha bisogno di un CMS basato sul contenuto per funzionare correttamente, in modo che possa estrarre contenuti grezzi e visualizzarli come vuole.

Sul lato SPA, la difficoltà deriva dal fatto che molti siti web saranno una configurazione ibrida.
Mentre si consiglia di alcune parti come una SPA, si potrebbe desiderare altri istituito in modo tradizionale (spesso meglio per SEO), e ci deve essere una sensazione coesa tra questi.
Se la configurazione è di due secchi di contenuti, pezzi per il sito tradizionale e la SPA, che la coesione sta per rompere., Hai bisogno di contenuti che funzionino su tutto.

Difficile con Personalizzazione/rilevanza

Le TERME afferrano il contenuto in un modo “di servizio”, in modo che sia una piccola pepita di contenuti senza molto contesto – non un grande aiuto nella consegna pertinente.
Inoltre, molti CMS fanno la loro personalizzazione in base alla pagina (non utile in una SPA), o sul lato client-e quelle regole di personalizzazione javascript non giocano molto bene in cima al javascript SPA. Troppi cuochi in cucina personalizzazione se si vuole.

I marketer sono condannati per sempre in un mondo SPA?

Certo che no!, Hai semplicemente bisogno di un CMS che abbia un’architettura pronta per l’uso SPA.

Uno che è basato su API, disaccoppia il contenuto dalla presentazione, può lavorare con la SPA per fornire un’anteprima dal vivo& strumenti di modifica, supporta una configurazione ibrida e fa la personalizzazione sul lato server.
In parti sottostanti ti guiderò attraverso il modo in cui Bloomreach fa proprio questo.

• Come Bloomreach offre facilità di applicazione a pagina singola per sviluppatori e marketer

• Personalizzazione e supporto ibrido per applicazioni a pagina singola