DocumentazioneAEM 6.5Guida utente

Introduzione alla SPA e procedura dettagliata spa-introduction-and-walkthrough

Last update: Tue Jun 17 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager 6.5
  • Argomenti:

Creato per:

  • Sviluppatore

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.

IMPORTANT
L'editor SPA è stato dichiarato obsoleto per i nuovi progetti. Rimane supportato da Adobe per i progetti esistenti, ma non deve essere utilizzato per i nuovi progetti. Gli editor preferiti per la gestione dei contenuti headless in AEM sono ora i seguenti:

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.

CAUTION
In questo documento viene utilizzata l'app Progetto SPA WKND solo a scopo dimostrativo. Non utilizzare per alcun lavoro di progetto.
Qualsiasi progetto AEM deve utilizzare Archetipo progetto AEM, che supporta i progetti SPA tramite React o Angular e utilizza il SDK SPA.

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.

schermata_shot_2018-08-20at135550

Visitatori

  • I visitatori desiderano esperienze di tipo nativo quando interagiscono con i contenuti.
  • È dimostrato che più veloce sarà una pagina, più probabile sarà una conversione.

Addetti marketing

  • Le persone addette al marketing desiderano offrire esperienze avanzate e di tipo nativo per invitare la clientela a interagire pienamente con i contenuti.
  • La personalizzazione può rendere queste esperienze ancora più coinvolgenti.

Sviluppatori

  • Gli sviluppatori vogliono una netta separazione delle competenze tra contenuti e presentazioni.
  • La separazione pulita rende il sistema più estensibile e consente lo sviluppo front-end indipendente.

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

L’idea principale alla base di un’applicazione a pagina singola è che le chiamate e la dipendenza da un server siano ridotte per ridurre al minimo i ritardi causati dalle chiamate al server, in modo che l’applicazione a pagina singola 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 quando il visitatore interagisce con gli elementi sulla pagina. Queste chiamate multiple possono dare una sensazione di attesa o ritardo in quanto la pagina deve soddisfare le richieste dell'utente.

schermata_shot_2018-08-20at140449

Per un’esperienza più fluida, che si avvicina a quella che un visitatore si aspetta da app native per dispositivi mobili, un’applicazione a pagina singola carica tutti i dati necessari per il visitatore al primo caricamento. Anche se l’operazione inizialmente potrebbe richiedere un po’ più di tempo, elimina la necessità di chiamate server aggiuntive.

Tramite il rendering sul lato client, l’elemento della pagina reagisce più rapidamente e le interazioni con la pagina da parte del visitatore sono immediate. Eventuali dati aggiuntivi necessari vengono chiamati in modo asincrono per massimizzare la velocità della pagina.

NOTE
Per informazioni tecniche sul funzionamento delle applicazioni a pagina singola in AEM, consulta l'articolo Guida introduttiva alle applicazioni a pagina singola in AEM.
Per informazioni più dettagliate sulla progettazione, l'architettura e il flusso di lavoro tecnico dell'editor di applicazioni a pagina singola, vedere l'articolo Panoramica dell'editor di applicazioni a pagina singola.

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

Quando un’applicazione a pagina singola viene creata per utilizzare l’Editor SPA di AEM, l’autore di 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.

  1. Modifica l’app del progetto SPA WKND in AEM.

    http://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.html

    Passaggio 1

  2. Seleziona un componente intestazione e osserva che viene visualizzata una barra degli strumenti simile a quella di qualsiasi altro componente. Seleziona Modifica.

    Passaggio 2

  3. Modifica il contenuto come di consueto in AEM. Le modifiche vengono rese permanenti.

    Passaggio 3

    note note
    NOTE
    Per ulteriori informazioni sull'editor di testo locale e sulle applicazioni a pagina singola, vedere Panoramica dell'editor di applicazioni a pagina singola.

  4. Utilizza il browser Risorse per trascinare una nuova immagine in un componente immagine.

    Passaggio 4

  5. La modifica viene mantenuta.

    Passaggio 5

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

NOTE
L’editor di SPA non modifica il DOM dell’applicazione. La stessa SPA è responsabile del DOM.
Per vedere come funziona, continua con la sezione successiva di questo articolo App SPA ed editor di SPA AEM.

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

L'esperienza del comportamento di un'applicazione a pagina singola per l'utente finale e la successiva ispezione della pagina dell'applicazione a pagina singola consentono di comprendere meglio il funzionamento di un'app SAP con l'editor di applicazioni a pagina singola in AEM.

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

  1. Carica l’applicazione del progetto SPA WKND sul server di pubblicazione o utilizzando l’opzione Visualizza come pubblicato dal menu Informazioni pagina nell’editor di pagina.

    http://<host>:<port>/content/wknd-spa-react/us/en/home.html

    Passaggio 1

    Osserva la struttura delle pagine, inclusa la navigazione alle pagine figlie, al widget meteo e agli articoli.

  2. Passa a una pagina secondaria utilizzando il menu e controlla che la pagina venga caricata immediatamente senza la necessità di un aggiornamento.

    Passaggio 2

  3. Apri gli strumenti di sviluppo incorporati del browser e monitora l’attività di rete mentre navighi nelle pagine secondarie.

    Passaggio 3

    C’è molto poco traffico mentre passi da una pagina all’altra nell’app. La pagina non viene ricaricata e vengono richieste solo le nuove immagini.

    La SPA gestisce il contenuto e il routing interamente sul lato client.

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

Nella sezione successiva, Caricamento di un'applicazione SPA, approfondisce la meccanica di caricamento dell'applicazione SPA e il modo in cui il contenuto può essere caricato in modo sincrono e asincrono.

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

  1. Se non è già stata caricata, carica l’app del progetto SPA WKND sul server di pubblicazione o utilizzando l’opzione Visualizza come pubblicato dal menu Informazioni pagina nell’editor pagina.

    http://<host>:<port>/content/wknd-spa-react/us/en/home.html

    Passaggio 1

  2. Utilizza lo strumento incorporato del browser per visualizzare l’origine della pagina.

  3. Il contenuto della sorgente è estremamente limitato.

    • La pagina non ha alcun contenuto all’interno del corpo. È composta principalmente da fogli di stile e da una chiamata a vari script come clientlib-react.min.js.
    • Questi script sono i driver primari di questa applicazione e sono responsabili del rendering di tutti i contenuti.

  4. Utilizza gli strumenti incorporati del browser per ispezionare la pagina. Visualizza il contenuto del DOM completamente caricato.

    Passaggio 4

  5. Passa alla scheda Rete degli strumenti per sviluppatori e ricarica la pagina.

    Se si ignorano le richieste di immagini, le risorse principali caricate per la pagina sono la pagina stessa, il CSS, il JavaScript di React, le relative dipendenze e i dati JSON per la pagina.

    Passaggio 5

  6. Carica il react.model.json in una nuova scheda.

    http://<host>:<port>/content/wknd-spa-react/us/en/home.model.json

    Passaggio 6

    L’editor SPA AEM sfrutta AEM Content Services per distribuire l’intero contenuto della pagina come un modello JSON.

    Implementando interfacce specifiche, i modelli Sling forniscono le informazioni necessarie alla SPA. La distribuzione dei dati JSON viene delegata verso il basso a ciascun componente (dalla pagina, al paragrafo, al componente, e così via).

    Ogni componente sceglie cosa espone e come viene renderizzato (lato server con HTL o lato client con React). Questo articolo si concentra sul rendering lato client con React.

  7. Il modello può anche raggruppare le pagine in modo che vengano caricate in modo sincrono, riducendo il numero di ricaricamenti di pagina necessari.

    Nell’esempio dell’app del progetto SPA WKND, le pagine home, page-1, page-2 e page-3 vengono caricate in modo sincrono, in quanto le persone solitamente visitano tutte le pagine.

    Questo comportamento non è obbligatorio ed è completamente definibile.

    Passaggio 7

  8. Per visualizzare questa differenza di comportamento, ricarica la pagina e cancella l’attività di rete degli strumenti per sviluppatori. Passa a page-1 nel menu della pagina e osserva che l’unica attività di rete è una richiesta dell’immagine di page-1. Non è necessario caricare page-1.

    Passaggio 8

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

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

Inoltre, per l’autore dei contenuti, la creazione di contenuti tramite un editor SPA è semplice all’interno di 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.

  1. Caricare l’applicazione del progetto SPA WKND nell’editor e passare alla modalità Anteprima.

    http://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.html

  2. Utilizzando gli strumenti di sviluppo incorporati nel browser, esamina il contenuto della pagina. Con lo strumento di selezione, selezionare un componente modificabile nella pagina e visualizzare i dettagli dell’elemento.

    Il componente ha un nuovo attributo dati data-cq-data-path.

    Passaggio 2

    Per esempio

    data-cq-data-path="/content/wknd-spa-react/us/en/home/jcr:content/root/responsivegrid/text

    Questo percorso consente il recupero e l’associazione dell’oggetto di modifica del contesto di configurazione di ciascun componente.

    Questo è l’unico attributo di markup necessario affinché l’editor riconosca questo come componente modificabile all’interno della SPA. In base a questo attributo, l’editor SPA determinerà la configurazione modificabile associata al componente, in modo che vengano caricati il frame, la barra degli strumenti e così via corretti.

    Vengono inoltre aggiunti alcuni nomi di classe specifici per contrassegnare i segnaposto e per la funzionalità di trascinamento della risorsa.

    note note
    NOTE
    Si tratta di una modifica nel comportamento delle pagine sottoposte a rendering lato server in AEM, in cui è inserito un elemento cq per ogni componente modificabile.
    Questo approccio nell’applicazione a pagina singola elimina la necessità di inserire elementi personalizzati, basandosi solo su un attributo di dati aggiuntivo, semplificando il markup per lo sviluppatore front-end.

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.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2