Come creare applicazioni a pagina singola (SPA) con AEM create-spa

In questa continuazione facoltativa del Percorso per sviluppatori headless di AEM, scoprirai come AEM può combinare la distribuzione headless con le tradizionali funzioni di un CMS full-stack. Scopri anche come creare SPA modificabili utilizzando il framework dell’editor di SPA di AEM e integrare SPA esterne, abilitando le funzionalità di modifica in base alle esigenze.

Percorso affrontato finora story-so-far

A questo punto, avresti dovuto completare l’intero Percorso per sviluppatori headless AEM e dovresti aver appreso le nozioni di base sulla distribuzione headless in AEM, oltre ad aver compreso:

Fino ad ora, hai già pubblicato il tuo primo progetto AEM headless oppure disponi delle conoscenze per farlo. Congratulazioni.

Allora perché stai leggendo questa ulteriore continuazione facoltativa del percorso? Ricordi che nella Guida introduttiva abbiamo discusso brevemente di come AEM supporta non solo la distribuzione headless e i modelli tradizionali full-stack, ma anche i modelli ibridi che uniscono i vantaggi di entrambi. Anche se non può farlo il modello tradizionale headless, questi modelli ibridi possono offrire una grandissima flessibilità per determinati progetti.

Questo articolo si basa sulla tua conoscenza di AEM Headless per comprendere meglio come creare applicazioni a pagina singola (SPA) che siano modificabili in AEM. In questo modo è possibile creare contenuti e distribuirli in modo headless in una SPA, ma tale SPA è modificabile in AEM.

Obiettivo objective

Questo documento ti aiuta a capire come vengono sviluppate le applicazioni a pagina singola utilizzando il framework editor di SPA di AEM. Dopo aver letto questo documento, dovresti:

Requisiti e prerequisiti requirements-prerequisites

Ci sono diversi i requisiti da soddisfare prima di iniziare a lavorare con le SPA in AEM.

Conoscenza knowledge

Strumenti tools

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.

Questa funzionalità 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 di 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-spa

Essendo più veloce, fluida e più simile a un’applicazione nativa, una SPA diventa un’esperienza attraente. Non è solo utile per chi visita la pagina web, ma anche per i marketer e gli sviluppatori a causa della modalità di funzionamento delle SPA.

Per una descrizione completa delle SPA e del motivo per cui utilizzarle, consulta la sezione risorse aggiuntive: troverai i collegamenti a una documentazione più dettagliata.

Come AEM gestisce le SPA

Lo sviluppo di applicazioni a pagina singola in AEM presuppone che lo sviluppatore front-end osservi le best practice standard durante la creazione di una SPA. In qualità di sviluppatore front-end, se segui queste best practice generali e alcuni principi specifici di AEM, la tua SPA funziona con AEM e le sue funzionalità di authoring dei contenuti.

Per una descrizione completa di come AEM gestisce le SPA, consulta la sezione risorse aggiuntive per i collegamenti a una documentazione più dettagliata.

Editor SPA di AEM aem-spa-editor

I siti generati utilizzando framework SPA comuni, come React e Angular, caricano i contenuti tramite un JSON dinamico. Non forniscono la struttura HTML necessaria affinché l’Editor pagina di AEM possa inserire i controlli di modifica.

Per abilitare la modifica delle SPA all’interno di AEM, è necessaria una mappatura tra l’output JSON della SPA e il modello di contenuto nell’archivio AEM in modo da poter salvare le modifiche al contenuto.

Il supporto SPA in AEM introduce un livello JavaScript sottile che interagisce con il codice JavaScript della SPA quando viene caricato nell’Editor pagina con cui è possibile inviare gli eventi. Per consentire la modifica nel contesto, è possibile attivare la posizione dei controlli di modifica. Questa funzione si basa sul concetto di endpoint API di Content Services, in quanto il contenuto della SPA deve essere caricato tramite Content Services.

Per una descrizione completa dell’editor di SPA AEM, consulta la sezione risorse aggiuntive per i collegamenti a una documentazione più dettagliata.

Alloggio SPA esistenti existing-spas

Se disponi di un SPA esistente, AEM supporta l’incorporazione in AEM, in modo che sia visibile agli autori di contenuti nell’Editor AEM. Questo può essere utile per visualizzare il contenuto che si sta creando tramite Frammenti di contenuto nel contesto dell’applicazione finale in cui è utilizzato.

Inoltre, apportando solamente alcune piccole modifiche, si può abilitare una certa capacità di modifica all’SPA esterna all’interno dell’Editor AEM.

Il componente RemotePage consente il rendering di un SPA esterno in AEM.

Per una descrizione completa di come rendere modificabile un SPA esterno in AEM, consulta la sezione risorse aggiuntive per i collegamenti a una documentazione più dettagliata.

Passaggio successivo what-is-next

Per iniziare a sviluppare un proprio SPA per AEM, controlla i seguenti documenti:

Se è necessario adattare una SPA esistente per utilizzarla in AEM, rivedi i seguenti documenti:

Vedi sotto le risorse aggiuntive che possono farti approfondire argomenti SPA in AEM.

Risorse aggiuntive additional-resources

Di seguito sono riportate alcune risorse aggiuntive che approfondiscono alcuni concetti menzionati in questo documento.