Introduzione SPA e Procedura dettagliata

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 SPA framework e gli autori desiderano modificare i contenuti all'interno di AEM per un sito creato utilizzando tali framework.

SPA Editor offre una soluzione completa per SPA di supporto in AEM. Questo articolo descrive l’utilizzo di un’applicazione SPA di base per l’authoring e mostra come si collega all’editor SPA AEM sottostante.

Introduzione

Articolo Obiettivo

In questo articolo vengono introdotti i concetti di base di SPA prima di guidare il lettore attraverso una procedura dettagliata dell'editor SPA, utilizzando una semplice applicazione SPA per illustrare la modifica di base dei contenuti. Viene quindi descritto come creare la pagina e come l’applicazione SPA si collega e interagisce con l’editor SPA AEM.

L'obiettivo di questa introduzione e di questa procedura dettagliata è dimostrare a uno sviluppatore AEM perché SPA rilevanti, come funzionano in generale, come un SPA viene gestito dall'Editor SPA AEM e come è diverso da un'applicazione AEM standard.

La procedura dettagliata si basa sulla funzionalità standard AEM e sull'app di esempio WKND SPA Project. Per seguire, scaricare e installare l'app di progetto WKND SPA di esempio da GitHub qui.

ATTENZIONE

Questo documento utilizza l' app progetto WKND SPA solo a scopo dimostrativo. Non deve essere utilizzato per nessun progetto.

SUGGERIMENTO

Qualsiasi progetto AEM deve sfruttare il AEM Project Archetype, che supporta SPA progetti utilizzando React o Angular e sfrutta l'SDK SPA.

Cos'è un SPA?

Un’applicazione a pagina singola (SPA) è diversa 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 che possono essere integrati in un sito AEM, consentendo agli autori dei contenuti di modificare i contenuti SPA con la stessa facilità con cui si trovano altri contenuti AEM.

Perché un SPA?

Essendo più veloce, fluido e simile a un'applicazione nativa, un 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 SPA.

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 un SPA?

L'idea principale alla base di un SPA è che le chiamate a un server e le dipendenze vengono ridotte al fine di ridurre i ritardi causati dalla latenza del server, in modo che il 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 chiamate aggiuntive 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.

Esperienze sequenziali e fluide

Per un'esperienza più fluida, che si avvicina alle aspettative di un visitatore dalle app native per dispositivi mobili, un 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, 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 denominati in modo asincrono per massimizzare la velocità della pagina.

SUGGERIMENTO

Per informazioni tecniche sul funzionamento SPA in AEM, consultate gli articoli:

Per informazioni più dettagliate sulla progettazione, l’architettura e il flusso di lavoro tecnico dell’editor SPA, consultate l’articolo:

Esperienza di modifica dei contenuti con SPA

Quando un SPA è creato per sfruttare l'editor SPA AEM, l'autore del contenuto non nota alcuna differenza quando si modifica e si crea contenuto. È disponibile una funzionalità AEM comune e non sono necessarie modifiche al flusso di lavoro dell’autore.

  1. Modificate l'app WKND SPA Project in AEM.

    http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html

    Home del progetto SPA WKND

  2. Selezionate un componente di testo e notate che una barra degli strumenti è simile a quella di qualsiasi altro componente. Seleziona Modifica.

    Seleziona componente testo

  3. Modificate il contenuto come normale all’interno AEM e tenete presente che le modifiche sono persistenti.

    Modifica testo

  4. Usate il Browser risorse per trascinare una nuova immagine in un componente immagine.

    Trascinamento di una risorsa immagine

  5. La modifica è persistente.

    Immagine 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 AEM non SPA.

NOTA

L'Editor SPA non modifica il DOM dell'applicazione. Il SPA stesso è responsabile del DOM.

Per vedere come funziona, andate alla sezione successiva di questo articolo SPA App e all'editor SPA AEM.

SPA App e l'editor SPA AEM

L'esperienza di come un SPA si comporta per l'utente finale e quindi l'analisi della pagina SPA aiuta a comprendere meglio come un'app SAP funziona con l'Editor SPA in AEM.

Utilizzo di un'applicazione SPA

  1. Caricate l'applicazione WKND SPA Project 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

    Anteprima della pagina principale del progetto SPA WKND

    Prendete nota della struttura delle pagine, inclusa la navigazione verso pagine figlie, menu e schede articolo.

  2. Passa a una pagina figlia utilizzando il menu e verifica che la pagina venga caricata immediatamente senza che sia necessario effettuare un aggiornamento.

    WKND SPA Project pagina 1

  3. Aprite gli strumenti di sviluppo integrati del browser e monitorate l'attività di rete mentre vi spostate nelle pagine figlie.

    Attività di rete

    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.

    Il SPA gestisce il contenuto e il routing 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 del SPA e spiega come caricare il contenuto in modo sincrono e asincrono.

Caricamento di un'applicazione SPA

  1. Se non è già stato caricato, caricate l'app WKND SPA Project 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

    Anteprima progetto WKND SPA

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

  3. Il contenuto dell'origine è limitato.

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8"/>
         <title>WKND SPA React Home Page</title>
    
         <meta name="template" content="spa-page-template"/>
         <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
     <link rel="stylesheet" href="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-base.min.css" type="text/css">
    
     <meta name="theme-color" content="#000000"/>
     <link rel="icon" href="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react/resources/favicon.ico"/>
     <link rel="apple-touch-icon" href="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react/resources/logo192.png"/>
     <link rel="manifest" href="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react/resources/manifest.json"/>
    
     <!-- AEM page model -->
     <meta property="cq:pagemodel_root_url" content="/content/wknd-spa-react/us/en.model.json"/>
     <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Asar&display=swap" rel="stylesheet"/>
     <meta property="cq:datatype" content="JSON"/>
     <meta property="cq:wcmmode" content="edit"/>
    
     <link rel="stylesheet" href="/libs/cq/gui/components/authoring/editors/clientlibs/internal/page.min.css" type="text/css">
     <link rel="stylesheet" href="/etc.clientlibs/wcm/foundation/clientlibs/main.min.css" type="text/css">
     <script type="text/javascript" src="/libs/cq/gui/components/authoring/editors/clientlibs/internal/messaging.min.js"></script>
     <script type="text/javascript" src="/libs/cq/gui/components/authoring/editors/clientlibs/utils.min.js"></script>
     <script type="text/javascript" src="/libs/granite/author/deviceemulator/clientlibs.min.js"></script>
     <script type="text/javascript" src="/libs/cq/gui/components/authoring/editors/clientlibs/internal/page.min.js"></script>
     <script type="text/javascript" src="/etc.clientlibs/wcm/foundation/clientlibs/main.min.js"></script>
     <script type="text/javascript" src="/etc.clientlibs/clientlibs/granite/jquery.min.js"></script>
     <script type="text/javascript" src="/etc.clientlibs/clientlibs/granite/utils.min.js"></script>
     <script type="text/javascript" src="/etc.clientlibs/clientlibs/granite/jquery/granite.min.js"></script>
     <script type="text/javascript" src="/etc.clientlibs/foundation/clientlibs/jquery.min.js"></script>
     <script type="text/javascript" src="/etc.clientlibs/foundation/clientlibs/shared.min.js"></script>
    
     <!--cq{"decorated":false,"type":"cq/cloudconfig/components/scripttags/header","path":"/content/wknd-spa-react/us/en/home/jcr:content/cloudconfig-header","structurePath":"/content/wknd-spa-react/us/en/home/jcr:content/cloudconfig-header","selectors":null,"servlet":"Script /libs/cq/cloudconfig/components/scripttags/header/header.html","totalTime":2,"selfTime":2}-->
    
     <link rel="stylesheet" href="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react.min.css" type="text/css">
    
     </head>
    
     <body class="page basicpage">
         <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="spa-root"></div>
    
     <script type="text/javascript" src="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react.min.js"></script>
    
     <script type="text/javascript" src="/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.js"></script>
     <script type="text/javascript" src="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-base.min.js"></script>
    
     <script type="text/javascript" src="/libs/cq/gui/components/authoring/editors/clientlibs/internal/pagemodel/messaging.min.js"></script>
    
     <link rel="stylesheet" href="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-author.min.css" type="text/css">
    
     <!--cq{"decorated":true,"type":"cq/cloudserviceconfigs/components/servicecomponents","path":"/content/wknd-spa-react/us/en/home/jcr:content/cloudservices","selectors":null,"servlet":"Script /libs/cq/cloudserviceconfigs/components/servicecomponents/servicecomponents.jsp","totalTime":2,"selfTime":2}-->
    
     <!--cq{"decorated":false,"type":"cq/cloudconfig/components/scripttags/footer","path":"/content/wknd-spa-react/us/en/home/jcr:content/cloudconfig-footer","structurePath":"/content/wknd-spa-react/us/en/home/jcr:content/cloudconfig-footer","selectors":null,"servlet":"Script /libs/cq/cloudconfig/components/scripttags/footer/footer.html","totalTime":2,"selfTime":2}-->
    
     </body>
     </html>
     <!--cq{"decorated":false,"type":"wknd-spa-react/components/page","path":"/content/wknd-spa-react/us/en/home/jcr:content","selectors":null,"servlet":"Script /apps/spa-project-core/components/page/page.html","totalTime":39,"selfTime":33}-->
    

    La pagina non ha alcun contenuto all’interno del suo corpo. È costituito principalmente da fogli di stile e da una chiamata a vari script come clientlib-react.min.js.

    Questi script sono i driver principali di questa applicazione e sono responsabili del rendering di tutto il contenuto.

  4. Utilizzate gli strumenti integrati del browser per ispezionare la pagina. Visualizzare il contenuto del DOM completamente caricato.

    DOM of WKND SPA Project

  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.

    WKND SPA Attività di rete del progetto

  6. Caricate la home.model.json in una nuova scheda.

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

    JSON della home page del progetto WKND SPA

    L'editor SPA AEM utilizza AEM Content Services per distribuire l'intero contenuto della pagina come modello JSON.

    Implementando interfacce specifiche, Sling Models fornisce le informazioni necessarie al 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 o Angular). Questo articolo è incentrato 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 dell'app progetto WKND SPA, le pagine home, page-1, page-2 e page-3 vengono caricate in modo sincrono, dal momento che i visitatori visitano generalmente tutte queste pagine.

    Questo comportamento non è obbligatorio ed è completamente definibile.

    WKND SPA Raggruppamento di elementi del progetto

  8. Per visualizzare questa differenza di comportamento, ricaricare la pagina home e cancellare l'attività di rete della finestra di ispezione. Andate a page-1 nel menu della pagina e vedete che l'unica attività di rete è una richiesta per l'immagine di page-1. page-1 non deve essere caricato.

    WKND SPA Project page-1 attività di rete

Interazione con l'editor SPA

Utilizzando l'applicazione di esempio WKND SPA Project, è chiaro il funzionamento dell'app e come viene caricata quando viene pubblicata, sfruttando i servizi di contenuto per la distribuzione di contenuto JSON e il caricamento asincrono delle risorse.

Inoltre, per l'autore del contenuto, la creazione di contenuto tramite un editor SPA è perfettamente all'interno di AEM.

Nella sezione seguente verrà illustrato il contratto che consente all’editor SPA di correlare i componenti all’interno del SPA a AEM componenti e di ottenere questa esperienza di modifica senza soluzione di continuità.

  1. Caricate l'applicazione WKND SPA Project nell'editor e passate alla modalità Preview.

    http://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.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 di dati data-cq-data-path.

    Analisi degli elementi del progetto WKND SPA

    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 configurazione del contesto di modifica di ciascun componente.

    Questo è l'unico attributo di markup richiesto all'editor per riconoscere questo come componente modificabile all'interno del SPA. 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.

    NOTA

    Questo comportamento è diverso dalle pagine sottoposte a rendering sul lato server in AEM, dove è inserito un elemento cq per ciascun componente modificabile.

    Questo approccio nell'Editor 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 avete compreso l'esperienza di modifica SPA in AEM e come un SPA si collega all'Editor SPA, approfondisci la conoscenza di come un SPA è costruito.

In questa pagina