Introduzione alla SPA e procedura dettagliata spa-introduction

Le applicazioni a pagina singola (SPA) possono offrire esperienze coinvolgenti agli utenti di siti web. Gli sviluppatori desiderano essere in grado di creare siti utilizzando framework SPA e gli autori desiderano modificare i contenuti all’interno di AEM per un sito creato utilizzando tali frameworks.

L’editor di SPA offre una soluzione completa per il supporto di SPA in AEM. Questo articolo illustra l’utilizzo di un’applicazione di SPA di base per l’authoring e illustra come si relaziona con l’editor di SPA di AEM sottostante.

Introduzione introduction

Obiettivo dell’articolo article-objective

Questo articolo introduce i concetti di base delle SPA prima di guidare il lettore attraverso una procedura dettagliata dell’editor di SPA utilizzando una semplice applicazione SPA per illustrare la modifica dei contenuti di base. Viene quindi descritto come creare la pagina e come l’applicazione SPA si relaziona e interagisce con l’editor di SPA di AEM.

L’obiettivo di questa introduzione e di questa procedura dettagliata è dimostrare a uno sviluppatore AEM perché le SPA sono rilevanti, come funzionano in generale, come una SPA viene gestita dall’editor di SPA AEM e come si differenzia da un’applicazione AEM standard.

Requisiti requirements

La procedura dettagliata si basa sulle funzionalità di AEM standard e sull’app di esempio del progetto SPA WKND. Per seguire questa procedura dettagliata, è necessario disporre dei seguenti elementi.

Cos’è una SPA? what-is-a-spa

Un’applicazione a pagina singola (SPA) è diversa da una pagina convenzionale in quanto viene sottoposta a rendering lato client ed è principalmente basata su Javascript, utilizzando le chiamate Ajax per caricare i dati e aggiornare dinamicamente la pagina. La maggior parte o tutto il contenuto viene recuperato una volta nel caricamento di una singola pagina con risorse aggiuntive caricate in modo asincrono in base alle esigenze, a seconda dell’interazione dell’utente con la pagina.

Questo riduce la necessità di aggiornare le pagine e offre all’utente un’esperienza caratterizzata da fluidità e rapidità, che si rivela più simile all’esperienza assicurata da un’app nativa.

L’editor AEM di SPA consente agli sviluppatori front-end di creare SPA che possono essere integrate in un sito AEM, permettendo agli autori dei contenuti di modificare il contenuto delle SPA con la stessa facilità con cui sono modificati altri contenuti AEM.

Perché una SPA? why-a-spa

Essendo più veloce, fluida e più simile a un’applicazione nativa, una SPA diventa un’esperienza molto piacevole non solo per il visitatore della pagina web, ma anche per gli esperti di marketing e gli sviluppatori grazie al tipo di funzionamento delle SPA.

Visitatori visitors

Persone addette al marketing marketers

Sviluppatori developers

Come funziona una SPA? how-does-a-spa-work

L’idea principale alla base di SPA è che le chiamate verso e la dipendenza da un server vengono diminuite al fine di ridurre al minimo i ritardi causati dalla latenza del server, in modo che la SPA si avvicini alla reattività di un’applicazione nativa.

In una pagina web tradizionale sequenziale, vengono caricati solo i dati necessari per la pagina immediata. Questo significa che quando l'utente si sposta su un’altra pagina, il server viene chiamato per le risorse aggiuntive. Potrebbero essere necessarie chiamate aggiuntive mentre l'utente interagisce con gli elementi della pagina. Queste chiamate multiple possono dare una sensazione di attesa o ritardo in quanto la pagina deve soddisfare le richieste dell'utente.

Per un’esperienza più fluida, che si avvicina a ciò che l'utente si aspetta dalle app native per dispositivi mobili, una SPA carica tutti i dati necessari all'utente al primo caricamento. Anche se l’operazione inizialmente potrebbe richiedere un po’ più di tempo, elimina la necessità di chiamate server aggiuntive.

Effettuando il rendering sul lato client, gli elementi di pagina reagiscono più rapidamente e le interazioni con la pagina da parte del visitatore sono immediate. Eventuali dati aggiuntivi che potrebbero essere necessari vengono chiamati in modo asincrono per massimizzare la velocità della pagina.

Esperienza di modifica dei contenuti con SPA content-editing-experience-with-spa

Quando viene creata una SPA per usare l’editor SPA di AEM, chi crea il contenuto non nota alcuna differenza durante la modifica e la creazione di contenuti. È disponibile una funzionalità AEM comune e non è necessaria alcuna modifica al flusso di lavoro dell’autore.

Sono supportati ulteriori strumenti di authoring, come il trascinamento e il rilascio di componenti aggiuntivi sulla pagina, la ridisposizione dei componenti e la modifica del layout, come in qualsiasi applicazione AEM non SPA.

App SPA ed editor di SPA AEM spa-apps-and-the-aem-spa-editor

L'esperienza del comportamento di un SPA per l'utente e la successiva ispezione della pagina SPA consentono di comprendere meglio il funzionamento di un'app SAP con l'Editor SPA nell'AEM.

Utilizzo di un’applicazione SPA using-an-spa-application

Quindi, se la pagina non viene ricaricata durante la navigazione tra le pagine figlie, come viene caricata?

La sezione successiva, Caricamento di un’applicazione SPA, approfondisce la procedura di caricamento della SPA e spiega come caricare il contenuto in modo sincrono e asincrono.

Caricamento di un’applicazione SPA loading-a-spa-application

Interazione con l’editor SPA interaction-with-the-spa-editor

Utilizzando l’applicazione di esempio WKND SPA Project, è chiaro come si comporta l’app che viene caricata quando viene pubblicata, utilizzando i servizi per contenuti per la distribuzione dei contenuti JSON e il caricamento asincrono delle risorse.

Inoltre, per l’autore di contenuti, la creazione di contenuti tramite un editor SPA avviene direttamente all’interno dell’AEM.

Nella sezione seguente esploreremo il contratto che consente all’editor di SPA di relazionare i componenti all’interno della SPA con i componenti AEM e ottenere questa esperienza di editing perfetta.

Headful e headless in AEM headful-headless

Le SPA possono essere abilitate con livelli flessibili di integrazione all’interno di AEM, comprese le SPA sviluppate e mantenute al di fuori di AEM. Inoltre, l’SPA può essere utilizzato all’interno dell’AEM, mentre l’AEM può essere utilizzato anche per fornire contenuti a endpoint aggiuntivi in modo headless.

Passaggi successivi next-steps

Ora che è chiara l’esperienza di modifica SPA in AEM e come una SPA si relaziona con l’editor di SPA, approfondisci ulteriormente il modo in cui viene creata una SPA.