Show Menu
ARGOMENTI×

Introduzione e introduzione SPA

Le applicazioni SPA (Single Page Applications) possono offrire esperienze coinvolgenti agli utenti di siti Web. Gli sviluppatori desiderano essere in grado di creare siti utilizzando i framework SPA e gli autori desiderano modificare facilmente i contenuti in AEM per un sito creato utilizzando tali framework.
SPA Editor offre una soluzione completa per il supporto degli SPA in AEM. Questo articolo descrive l’utilizzo di un’applicazione SPA di base per l’authoring e illustra i rapporti con l’Editor AEM SPA sottostante.
SPA Editor è la soluzione consigliata per i progetti che richiedono il rendering lato client basato su SPA (ad esempio React o Angular).

Introduzione

Articolo Obiettivo

Questo articolo introduce i concetti di base degli SPA prima di guidare il lettore attraverso una panoramica dettagliata dell'editor SPA, utilizzando una semplice applicazione SPA per dimostrare l'editing di base dei contenuti. Viene quindi descritto come creare la pagina e come l’applicazione SPA si collega e interagisce con AEM SPA Editor.
L’obiettivo di questa introduzione e di questa procedura dettagliata è dimostrare a uno sviluppatore AEM perché le app SPA sono rilevanti, come funzionano generalmente, come un’app SPA viene gestita dall’editor AEM SPA e come è diversa da un’applicazione AEM standard.
La procedura dettagliata si basa sulle funzionalità standard di AEM e sull’app di esempio We.Retail Journal. Devono essere soddisfatti i seguenti requisiti:
Questo documento utilizza l'app aem-sample-we-retail-journal We.Retail Journal solo a scopo dimostrativo. Non deve essere utilizzato per nessun progetto.
Qualsiasi progetto AEM deve sfruttare il tipo di archivio dei progetti AEM , che supporta i progetti SPA mediante React o Angular e sfrutta l’SDK SPA.

Che cos'è un SPA?

Un'applicazione a pagina singola (SPA) differisce da una pagina tradizionale in quanto viene sottoposta a rendering sul lato client ed è principalmente guidata da Javascript, basandosi sulle chiamate Ajax per caricare i dati e aggiornare dinamicamente la pagina. La maggior parte o tutto il contenuto viene recuperato una volta in un singolo caricamento di pagina con risorse aggiuntive caricate in modo asincrono in base alle esigenze, in base all'interazione dell'utente con la pagina.
Questo riduce la necessità di aggiornare le pagine e offre all'utente un'esperienza semplice, rapida e più simile a un'esperienza app nativa.
AEM SPA Editor consente agli sviluppatori front-end di creare SPA da integrare in un sito AEM, consentendo agli autori di modificare i contenuti SPA con la stessa facilità con cui si trovano tutti gli altri contenuti AEM.

Perché una SPA?

Grazie a un'applicazione nativa più veloce, fluida e semplice, l'SPA diventa un'esperienza molto interessante non solo per il visitatore della pagina Web, ma anche per gli esperti di marketing e gli sviluppatori, a causa della natura del funzionamento degli SPA.
Visitatori
  • I visitatori desiderano esperienze simili a quelle native quando interagiscono con i contenuti.
  • Esistono dati chiari che più veloce sarà una pagina, più probabile sarà una conversione.
Marketing
  • Gli esperti di marketing desiderano offrire esperienze ricche e native per consentire ai visitatori di interagire pienamente con i contenuti.
  • La personalizzazione può rendere queste esperienze ancora più coinvolgenti.
Sviluppatori
  • Gli sviluppatori desiderano una netta separazione tra contenuti e presentazioni.
  • La separazione pulita rende il sistema più estensibile e consente uno sviluppo front-end indipendente.

Come funziona una SPA?

L'idea principale alla base di uno SPA è che le chiamate e la dipendenza da un server vengono ridotte al fine di ridurre al minimo i ritardi causati dalle chiamate server in modo che l'SPA si avvicini alla reattività di un'applicazione nativa.
In una pagina Web sequenziale tradizionale, vengono caricati solo i dati necessari per la pagina immediata. Questo significa che quando il visitatore si sposta in un’altra pagina, il server viene chiamato per le risorse aggiuntive. Potrebbero essere necessarie ulteriori chiamate quando il visitatore interagisce con gli elementi sulla pagina. Queste chiamate multiple possono dare un senso di ritardo o ritardo, in quanto la pagina deve essere in grado di soddisfare le richieste del visitatore.
Per un'esperienza più fluida, che si avvicina alle aspettative di un visitatore dalle app native per dispositivi mobili, un'app SPA carica tutti i dati necessari per il visitatore al primo caricamento. Anche se inizialmente l'operazione potrebbe richiedere un po' più di tempo, elimina la necessità di ulteriori chiamate server.
Rendering sul lato client, l’elemento di pagina reagisce più rapidamente e le interazioni con la pagina da parte del visitatore sono immediate. Eventuali dati aggiuntivi che potrebbero essere necessari vengono denominati in modo asincrono per massimizzare la velocità della pagina.
Per informazioni tecniche sul funzionamento degli SPA in AEM, consultate l’articolo Guida introduttiva alle app SPA in AEM .
Per un'occhiata più dettagliata alla progettazione, all'architettura e al flusso di lavoro tecnico dell'editor SPA, consultate l'articolo Panoramica dell'editor SPA.

Esperienza di editing dei contenuti con SPA

Quando un'app SPA è creata per sfruttare l'Editor AEM SPA, l'autore del contenuto non nota alcuna differenza quando si modifica e si crea contenuto. È disponibile una comune funzionalità di AEM e non sono necessarie modifiche al flusso di lavoro dell’autore.
La procedura dettagliata si basa sulle funzionalità standard di AEM e sull’app di esempio We.Retail Journal. Devono essere soddisfatti i seguenti requisiti:
  1. Modificate l'app We.Retail Journal in AEM.
    https://localhost:4502/editor.html/content/we-retail-journal/react.html
  2. Selezionate un componente di intestazione e osservate che la barra degli strumenti è simile a quella di qualsiasi altro componente. Seleziona Modifica .
  3. Modificate il contenuto come normale in AEM e tenete presente che le modifiche sono persistenti.
    Per ulteriori informazioni sull’editor di testo e sulle app SPA, consultate Panoramica sull’editor di testo locale.
  4. Usate il Browser risorse per trascinare una nuova immagine in un componente immagine.
  5. La modifica è persistente.
Sono supportati ulteriori strumenti di authoring, come il trascinamento di componenti aggiuntivi sulla pagina, la ridisposizione dei componenti e la modifica del layout, come in qualsiasi applicazione non SPA.
L’editor SPA non modifica il DOM dell’applicazione. La stessa SPA è responsabile del DOM.
Per vedere come funziona, continuate con la sezione successiva di questo articolo App SPA e Editor AEM SPA.

App SPA e AEM SPA Editor

L'esperienza di comportamento di un'app SPA per l'utente finale e quindi l'analisi della pagina SPA consentono di comprendere meglio in che modo un'app SAP funziona con l'editor SPA in AEM.

Utilizzo di un'applicazione SPA

  1. Caricate l’applicazione We.Retail Journal sul server di pubblicazione o utilizzando l’opzione Visualizza come pubblicato dal menu Informazioni ​pagina nell’editor pagina.
    /content/we-retail-journal/react.html
    Prendete nota della struttura delle pagine, inclusa la navigazione verso pagine figlie, widget meteo e articoli.
  2. Passa a una pagina figlia utilizzando il menu e verifica che la pagina venga caricata immediatamente senza che sia necessario effettuare un aggiornamento.
  3. Aprite gli strumenti di sviluppo integrati del browser e monitorate l'attività di rete mentre vi spostate nelle pagine figlie.
    Il traffico si riduce notevolmente quando si passa da una pagina all'altra nell'app. La pagina non viene ricaricata e vengono richieste solo le nuove immagini.
    L'SPA gestisce i contenuti e l'indirizzamento interamente sul lato client.
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 dell'SPA e spiega come è possibile caricare il contenuto in modo sincrono e asincrono.

Caricamento di un'applicazione SPA

  1. Se non è già stato caricato, caricate l’applicazione We.Retail Journal sul server di pubblicazione o utilizzando l’opzione Visualizza come pubblicato dal menu Informazioni ​pagina nell’editor pagina.
    /content/we-retail-journal/react.html
  2. Utilizzate lo strumento incorporato del browser per visualizzare l’origine della pagina.
  3. Il contenuto dell'origine è estremamente limitato.
    <!DOCTYPE HTML>
    <html lang="en-CH">
        <head>
        <meta charset="UTF-8">
        <title>We.Retail Journal</title>
    
        <meta name="template" content="we-retail-react-template"/>
    
    <link rel="stylesheet" href="/etc.clientlibs/we-retail-journal/react/clientlibs/we-retail-journal-react.css" type="text/css">
    
    <link rel="stylesheet" href="/libs/wcm/foundation/components/page/responsive.css" type="text/css">
    
    </head>
        <body class="page basicpage">
    
    <div id="page"></div>
    
    <script type="text/javascript" src="/etc.clientlibs/we-retail-journal/react/clientlibs/we-retail-journal-react.js"></script>
    
        </body>
    </html>
    
    
    La pagina non ha alcun contenuto all’interno del suo corpo. È composta principalmente da fogli di stile e una chiamata a uno script React, we-retail-journal-react.js .
    Questo script React è il driver principale di questa applicazione ed è responsabile del rendering di tutto il contenuto.
  4. Utilizzate gli strumenti integrati del browser per ispezionare la pagina. Visualizzare il contenuto del DOM completamente caricato.
  5. Passate alla scheda Rete in Ispettore e ricaricate la pagina.
    Ignorando le richieste di immagini, tenete presente che le risorse principali caricate per la pagina sono la pagina stessa, CSS, il JavaScript React, le sue dipendenze e i dati JSON per la pagina.
  6. Caricate il file react.model.json in una nuova scheda.
    /content/we-retail-journal/react.model.json
    AEM SPA Editor sfrutta AEM Content Services per distribuire l’intero contenuto della pagina come modello JSON.
    Implementando interfacce specifiche, Sling Models fornisce le informazioni necessarie alla SPA. La consegna dei dati JSON viene delegata verso il basso a ciascun componente (dalla pagina al paragrafo, al componente, ecc.).
    Ciascun componente sceglie le funzioni esposte e di rendering (lato server con HTL o lato client con React). Naturalmente 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 ricariche di pagina necessarie.
    Nell'esempio di We.Retail Journal, le home , blog e aboutus le pagine vengono caricate in modo sincrono, poiché i visitatori visitano comunemente tutte queste pagine. Tuttavia, la weather pagina viene caricata in modo asincrono, poiché i visitatori hanno meno probabilità di visitarla.
    Questo comportamento non è obbligatorio ed è completamente definibile.
  8. Per visualizzare questa differenza di comportamento, ricaricare la pagina e cancellare l'attività di rete della finestra di ispezione. Nel menu della pagina, andate al blog e alle pagine su di noi e scoprite che non è stata segnalata alcuna attività di rete.
    Passate alla pagina meteo e verificate che la chiamata weather.model.json sia chiamata in modo asincrono.

Interazione con l'editor SPA

Utilizzando l'applicazione di esempio We.Retail Journal, è chiaro come l'app si comporta e viene caricata quando viene pubblicata, sfruttando i servizi di contenuto 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 è semplice in AEM.
Nella sezione seguente verrà illustrato il contratto che consente all’editor SPA di correlare i componenti dell’SPA ai componenti di AEM e di ottenere questa esperienza di modifica senza soluzione di continuità.
  1. Caricate l'applicazione We.Retail Journal nell'editor e passate alla modalità Anteprima .
    https://localhost:4502/editor.html/content/we-retail-journal/react.html
  2. Utilizzando gli strumenti di sviluppo incorporati del browser, controllate il contenuto della pagina. Con lo strumento selezione, selezionate un componente modificabile sulla pagina e visualizzate il dettaglio dell’elemento.
    Il componente ha un nuovo attributo dati data-cq-data-path .
    Ad esempio
    data-cq-data-path="root/responsivegrid/paragraph_1
    Questi percorsi consentono il recupero e l'associazione dell'oggetto di configurazione del contesto di modifica di ciascun componente.
    Si tratta dell’unico attributo di markup richiesto all’editor per riconoscere questo componente come modificabile all’interno dell’area di protezione speciale. In base a questo attributo, l'editor SPA determinerà quale configurazione modificabile è associata al componente, in modo che il frame, la barra degli strumenti e così via siano corretti. è caricato.
    Alcuni nomi di classe specifici vengono aggiunti anche per i segnaposto di marketing e per la funzionalità di trascinamento della risorsa.
    Si tratta di una modifica nel comportamento delle pagine sottoposte a rendering sul lato server in AEM, in cui è inserito un cq elemento per ciascun componente modificabile.
    Questo approccio in SPA elimina la necessità di inserire elementi personalizzati, basandosi solo su un attributo di dati aggiuntivo, semplificando il markup per lo sviluppatore frontend.

Passaggi successivi

Ora che hai compreso l'esperienza di editing SPA in AEM e come l'SPA si relaziona con l'Editor SPA, approfondisci la tua conoscenza di come è stata creata l'SPA.