Introduzione alla SPA e procedura dettagliata spa-introduction-and-walkthrough
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.
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.
La procedura dettagliata si basa sulla funzionalità AEM standard e sull'app di esempio We.Retail Journal. Devono essere soddisfatti i seguenti requisiti:
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, utilizza 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.
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.
Persone addette al 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.
- Una separazione pulita rende il sistema più estensibile e consente uno sviluppo front-end indipendente.
Come funziona una SPA? how-does-a-spa-work
L'idea principale alla base di un SPA è che le chiamate e la dipendenza da un server vengono ridotte al fine di ridurre al minimo i ritardi causati dalle chiamate al server in modo che il SPA 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 mentre il visitatore interagisce con gli elementi della pagina. Queste chiamate multiple possono dare una sensazione di attesa o ritardo in quanto la pagina deve soddisfare le richieste dell'utente.
Per un’esperienza più fluida, che si avvicina a ciò che un visitatore si aspetta dalle app native per dispositivi mobili, un SPA carica tutti i dati necessari al visitatore al primo caricamento. Anche se l’operazione inizialmente potrebbe richiedere un po’ più di tempo, elimina la necessità di chiamate server aggiuntive.
Effettuando il rendering sul lato client, l’elemento pagina reagisce più rapidamente e le interazioni con la pagina da parte del visitatore sono immediate. Eventuali dati aggiuntivi che potrebbero essere necessari vengono chiamati in modo asincrono per massimizzare la velocità della pagina.
Esperienza di modifica dei contenuti con SPA content-editing-experience-with-spa
Quando viene creata una SPA per sfruttare l’Editor SPA AEM, l’autore del 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.
-
Modifica l’app We.Retail Journal in AEM.
http://localhost:4502/editor.html/content/we-retail-journal/react.html
-
Seleziona un componente di intestazione e osserva che la barra degli strumenti è simile a quella di qualsiasi altro componente. Seleziona Modifica.
-
Modifica il contenuto come normale in AEM e osserva che le modifiche sono persistenti.
note note NOTE Consulta la sezione Panoramica dell’editor di SPA per ulteriori informazioni sull'editor di testo e sulle SPA in posizione. -
Utilizza il browser Risorse per trascinare una nuova immagine in un componente immagine.
-
La modifica viene mantenuta.
Sono supportati ulteriori strumenti di authoring, 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.
App SPA ed editor di SPA AEM spa-apps-and-the-aem-spa-editor
L’esperienza di come si comporta un SPA per l’utente finale e quindi l’analisi della pagina di SPA aiuta a comprendere meglio come funziona un’app SAP con l’editor di SPA in AEM.
Utilizzo di un’applicazione SPA using-an-spa-application
-
Carica l'applicazione We.Retail Journal sul server di pubblicazione o utilizzando l'opzione Visualizza come pubblicato dal Informazioni pagina nell’editor pagina.
/content/we-retail-journal/react.html
Osserva la struttura delle pagine, inclusa la navigazione verso pagine figlie, widget meteo e articoli.
-
Passa a una pagina figlia utilizzando il menu e controlla che la pagina venga caricata immediatamente senza la necessità di un aggiornamento.
-
Apri gli strumenti di sviluppo incorporati del browser e monitora l’attività di rete mentre navighi nelle pagine figlie.
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 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 loading-an-spa-application
-
Se non è già caricato, carica l'applicazione We.Retail Journal sul server di pubblicazione o utilizzando l'opzione Visualizza come pubblicato dal Informazioni pagina nell’editor pagina.
/content/we-retail-journal/react.html
-
Utilizza lo strumento incorporato del browser per visualizzare l’origine della pagina.
-
Il contenuto della sorgente è estremamente limitato.
code language-none <!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 corpo. È composto principalmente da fogli di stile e una chiamata a un copione React,
we-retail-journal-react.js.Questo script React è il driver principale di questa applicazione ed è responsabile del rendering di tutti i contenuti.
-
Utilizza gli strumenti incorporati del browser per ispezionare la pagina. Visualizza il contenuto del DOM completamente caricato.
-
Passa alla scheda Rete in Ispettore e ricarica la pagina.
Le richieste di immagini vengono ignorate. Nota che le risorse principali caricate per la pagina sono la pagina stessa, il CSS, il JavaScript di React, le sue dipendenze e i dati JSON per la pagina.
-
Carica il
react.model.jsonin una nuova scheda./content/we-retail-journal/react.model.json
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 per ciascun componente (dalla pagina, al paragrafo, al componente, ecc.).
Ogni componente sceglie ciò che espone e come viene riprodotto (lato server con HTL o lato client con React). Naturalmente questo articolo si concentra sul rendering lato client con React.
-
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 di We.Retail Journal, il
home,blogeaboutusle pagine vengono caricate in modo sincrono, in quanto i visitatori visitano solitamente tutte le pagine. Tuttavia,weatherLa pagina viene caricata in modo asincrono, in quanto i visitatori hanno meno probabilità di visitarla.Questo comportamento non è obbligatorio ed è completamente definibile.
-
Per visualizzare questa differenza di comportamento, ricaricare la pagina e cancellare l’attività di rete dell’ispettore. Accedi al blog e alle nostre pagine nel menu della pagina e scopri che non è stata segnalata alcuna attività di rete.
Passa alla pagina del meteo e osserva come
weather.model.jsonviene chiamato in modo asincrono.
Interazione con l’editor SPA interaction-with-the-spa-editor
Utilizzando l’applicazione di esempio We.Retail Journal, è chiaro come funziona l’app e come 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 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.
-
Carica l'applicazione We.Retail Journal nell'editor e passa a Anteprima modalità.
http://localhost:4502/editor.html/content/we-retail-journal/react.html -
Utilizzando gli strumenti di sviluppo incorporati nel browser, esaminare il contenuto della pagina. Con lo strumento di selezione, selezionare un componente modificabile nella pagina e visualizzare i dettagli dell’elemento.
Tieni presente che il componente ha un nuovo attributo dati
data-cq-data-path.
Per esempio
data-cq-data-path="root/responsivegrid/paragraph_1Questi percorsi consentono il recupero e l'associazione dell'oggetto di configurazione del contesto di modifica 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 di SPA determinerà quale configurazione modificabile è associata al componente in modo che il corretto frame, la corretta barra degli strumenti ecc. siano caricati.
Vengono inoltre aggiunti alcuni nomi di classe specifici per contrassegnare i segnaposto e per la funzionalità di trascinamento della risorsa.
note note NOTE Questo è un cambiamento nel comportamento delle pagine di cui è stato eseguito il rendering lato server in AEM, dove è presente un cqper ogni 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 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.
- Guida introduttiva a SPA in AEM mostra come viene creata una SPA di base per lavorare con l’editor SPA in AEM
- La Panoramica dell’editor di SPA approfondisce il modello di comunicazione tra AEM e SPA.
- Sviluppo di SPA per AEM descrive come coinvolgere gli sviluppatori front-end nello sviluppo di una SPA per AEM e come le SPA interagiscono con l’architettura di AEM.