Come creare applicazioni a pagina singola (SPA) con AEM

Ultimo aggiornamento: 2023-07-20
  • Argomenti:
  • Developer Tools
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Developer

In questa continuazione facoltativa del Percorso di sviluppatori AEM headless, scopri come Adobe Experience Manager (AEM) può combinare la distribuzione headless con le tradizionali funzioni CMS full stack e come creare SPA modificabili utilizzando il framework AEM SPA Editor e integrare SPA esterno, abilitando le funzionalità di modifica in base alle esigenze.

Percorso affrontato finora

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:

  • La differenza tra distribuzione headless e headful dei contenuti.
  • Le funzionalità headless di AEM.
  • Come organizzare un progetto AEM headless.
  • Come creare contenuti headless in AEM.
  • Come recuperare e aggiornare il contenuto headless in AEM.
  • Come pubblicare con un progetto AEM headless.

Quindi o siete andati in diretta con il vostro primo progetto AEM Headless, o avete le conoscenze per farlo. Congratulazioni.

Allora perché stai leggendo questa ulteriore continuazione facoltativa del percorso? Probabilmente, se ne ricorda nel Guida introduttiva, c'è stata una breve discussione su come l'AEM non solo supporta la distribuzione headless e i modelli tradizionali full-stack, ma può anche supportare modelli ibridi che combinano 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 sviluppa la tua conoscenza di AEM Headless esplorando in modo approfondito come creare le tue applicazioni a pagina singola (SPA) modificabili in AEM. In questo modo, puoi creare contenuti e distribuirli direttamente a un SPA, ma l’SPA rimane modificabile nell’AEM.

Obiettivo

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:

  • Avere compreso le funzioni di base dell’Editor di SPA.
  • Conoscere i requisiti per creare una SPA completamente modificabile per AEM.
  • Avere compreso come integrare SPA esterne in AEM.
  • Scopri come implementare o meno il rendering lato server.

Requisiti e prerequisiti

Ci sono diversi requisiti prima di iniziare a lavorare con SPA nell’AEM.

Conoscenza

  • Esperienza di sviluppo nella creazione di SPA con i framework React o Angular
  • Competenze di base in AEM per la creazione di frammenti di contenuto e l’utilizzo dell’editor
  • Assicurati di rivedere il documento Headful e Headless nell'AEM comprendere i vari livelli possibili di integrazione dell’SPA.

Strumenti

  • Accesso alla sandbox per testare la distribuzione del progetto
  • Istanza di sviluppo locale per la modellazione dei dati e il testing
  • SPA esterna esistente (facoltativa, a seconda del modello di integrazione scelto)
  • Archetipo progetto AEM

Cos’è una SPA?

Un’applicazione a pagina singola (SPA) differisce da una pagina convenzionale in quanto viene sottoposta a rendering lato client ed è principalmente basata su JavaScript, poiché si basa sulle 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?

Essendo più veloce, fluida e simile a un’applicazione nativa, un SPA diventa un’esperienza attraente non solo per il visitatore della pagina web, ma anche per gli esperti di marketing e gli sviluppatori a causa della natura del funzionamento dell’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 dell’AEM, il tuo SPA funzionerà con l’AEM e le sue funzionalità di authoring dei contenuti.

  • Portabilità - Come per qualunque componente, i componenti SPA devono essere costruiti in modo da essere il più possibile portatili. La SPA deve essere realizzata con componenti portabili e riutilizzabili.
  • Struttura del sito di guida AEM - Lo sviluppatore front-end crea i componenti e possiede la propria struttura interna, ma si affida all’AEM per definire la struttura del contenuto del sito.
  • Rendering dinamico - Tutto il rendering deve essere dinamico.
  • Routing dinamico - La SPA è responsabile del routing e AEM lo ascolta ed esegue il recupero in base ad esso. Anche altri routing devono essere dinamici.

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

I siti costruiti utilizzando framework SPA comuni come React e Angular caricano il contenuto tramite JSON dinamico e non forniscono la struttura di HTML necessaria affinché l’editor pagina di AEM possa inserire 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 per salvare le modifiche al contenuto.

Il supporto SPA in AEM introduce un livello JS sottile che interagisce con il codice JS SPA caricato nell’Editor pagina con cui è possibile inviare eventi e attivare la posizione dei controlli di modifica per consentire la modifica nel contesto. Questa funzione si basa sul concetto di endpoint API di Content Services, in quanto il contenuto dell’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

Se disponi già di un SPA, l’AEM supporta la sua incorporazione nell’AEM in modo che sia visibile agli autori di contenuti nell’editor AEM. Questo può essere utile per visualizzare il contenuto che stanno creando tramite Frammenti di contenuto nel contesto dell’applicazione finale in cui verrà utilizzato.

Inoltre, con solo piccole modifiche, è possibile abilitare una certa capacità di modifica per l'SPA esterno 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

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

Se devi adattare un SPA esistente per usarlo nell’AEM, consulta i seguenti documenti:

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

Risorse aggiuntive

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

Pagina precedente
Next page

In questa pagina