Introduktion och genomgång av SPA spa-introduction
Single page applications (SPAs) can offer compelling experiences for website users. Utvecklare vill kunna skapa webbplatser med SPA-ramverk och författare vill smidigt redigera innehåll i AEM för en webbplats som byggts med sådana ramverk.
SPA Editor är en omfattande lösning för SPA-program i AEM. I den här artikeln går vi igenom hur du använder ett grundläggande SPA-program för att skapa och visar hur det är relaterat till den underliggande AEM SPA-redigeraren.
- Den universella redigeraren för visuell redigering av headless-innehåll.
- Innehållsfragmentredigeraren för formulärbaserad redigering av rubrikfritt innehåll.
Introduktion introduction
Artikelsyfte article-objective
I den här artikeln beskrivs de grundläggande begreppen för SPA-program innan du leder läsaren genom en genomgång av SPA-redigeraren genom att använda ett enkelt SPA-program för att demonstrera grundläggande innehållsredigering. Sedan går det ned på hur sidan är uppbyggd och hur SPA-programmet relaterar till och interagerar med AEM SPA Editor.
Målet med denna introduktion och genomgång är att visa för en AEM-utvecklare varför SPA är relevanta, hur de i allmänhet fungerar, hur en SPA hanteras av AEM SPA Editor och hur det skiljer sig från en vanlig AEM-applikation.
Krav requirements
Genomgången baseras på AEM standardfunktioner och exempelprogrammet WKND SPA Project. Om du vill följa med i den här genomgången måste du ha följande till hands.
-
Senaste utveckling av SDK i AEMaaCS
- Den bör köras som en lokal utvecklingsmiljö.
- Du måste ha administratörsbehörighet för systemet.
-
Exempelprogrammet WKND SPA Project är tillgängligt på GitHub
- Hämta den senaste versionen av React-appen med namnet
wknd-spa-react.all-X.Y.Z-SNAPSHOT.zip
. - Hämta de senaste exempelbilderna för appenmed namnet
wknd-spa-sample-images-X.Y.Z.zip
. - Använd pakethanteraren för att installera båda paketen på samma sätt som andra paket i AEM.
- Appen behöver inte installeras med Maven för den här genomgången.
- Hämta den senaste versionen av React-appen med namnet
Vad är en SPA? what-is-a-spa
Ett SPA-program (single-page application) skiljer sig från en konventionell sida genom att det återges på klientsidan och i första hand är JavaScript-styrt, beroende på att Ajax anropar för att läsa in data och dynamiskt uppdatera sidan. Det mesta eller allt innehåll hämtas en gång på en sida, och ytterligare resurser läses in asynkront efter behov baserat på användarinteraktionen med sidan.
Detta minskar behovet av siduppdatering och ger användaren en upplevelse som är smidig, snabb och som känns mer som en appupplevelse.
Med AEM SPA Editor kan gränssnittsutvecklare skapa SPA som kan integreras i en AEM-webbplats, vilket gör att innehållsförfattarna kan redigera SPA-innehållet lika enkelt som annat AEM-innehåll.
Varför en SPA? why-a-spa
Genom att vara snabbare, smidigare och mer som ett systemspecifikt program blir en SPA en mycket attraktiv upplevelse inte bara för besökaren på webbsidan, utan även för marknadsförare och utvecklare på grund av hur SPA fungerar.
Besökare visitors
- Besökarna vill ha upplevelser som påminner om varandra när de interagerar med innehållet.
- Det finns tydliga data om att ju snabbare en sida är, desto troligare blir konverteringen.
Marknadsförare marketers
- Marknadsförarna vill erbjuda innehållsrika, verklighetstrogna upplevelser som lockar besökarna att engagera sig fullt ut i innehållet.
- Personalization kan göra dessa upplevelser ännu mer övertygande.
Utvecklare developers
- Utvecklarna vill att det ska finnas tydliga skillnader mellan innehåll och presentation.
- Ren separation gör systemet mer utbyggbart och möjliggör oberoende frontendutveckling.
Hur fungerar en SPA? how-does-a-spa-work
Den främsta idén bakom ett SPA är att anrop till och beroende av en server minskas för att minimera fördröjningar som orsakas av serverfördröjning så att SPA närmar sig svarstiden för ett systemspecifikt program.
På en traditionell, sekventiell webbsida läses bara de data som behövs för den omedelbara sidan in. Det innebär att när besökaren flyttar till en annan sida anropas servern för de extra resurserna. Ytterligare anrop kan behövas eftersom besökaren interagerar med element på sidan. Dessa anrop kan ge en känsla av fördröjning eller fördröjning eftersom sidan måste hinna ifatt besökarens önskemål.
För en smidigare upplevelse, som närmar sig vad en besökare förväntar sig av mobilappar och inbyggda appar, läser en SPA in alla nödvändiga data för besökaren vid den första inläsningen. Detta kan ta lite längre tid i början, men eliminerar sedan behovet av ytterligare serveranrop.
Genom att återge på klientsidan reagerar sidelementen snabbare, och besökarens interaktioner med sidan sker direkt. Eventuella ytterligare data som kan behövas anropas asynkront för att maximera sidans hastighet.
Innehållsredigering med SPA content-editing-experience-with-spa
När en SPA har byggts för att använda AEM SPA Editor märker innehållsförfattaren ingen skillnad när du redigerar och skapar innehåll. Vanliga AEM-funktioner är tillgängliga och inga ändringar i författarens arbetsflöde krävs.
-
Redigera WKND SPA Project-programmet i AEM.
http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html
-
Markera en textkomponent och lägg märke till att ett verktygsfält ser ut som en annan komponent. Välj Redigera.
-
Redigera innehållet som vanligt i AEM och lägg märke till att ändringarna bevaras.
-
Använd Assets webbläsare för att dra och släppa en ny bild i en bildkomponent.
-
Ändringen är beständig.
Ytterligare redigeringsverktyg som att dra och släppa ytterligare komponenter på sidan, ordna om komponenter och ändra layouten stöds som i andra AEM-program än SPA.
SPA-appar och AEM SPA Editor spa-apps-and-the-aem-spa-editor
Genom att uppleva hur en SPA fungerar för användaren och sedan inspektera SPA-sidan blir det lättare att förstå hur en SAP-app fungerar med SPA-redigeraren i AEM.
Använda ett SPA-program using-an-spa-application
-
Läs in WKND SPA-projektprogrammet på publiceringsservern eller med alternativet Visa som publicerad på menyn Sidinformation i sidredigeraren.
http://<host>:<port>/content/wknd-spa-react/us/en/home.html
Lägg märke till sidstrukturen, inklusive navigering till underordnade sidor, menyer och artikelkort.
-
Navigera till en underordnad sida via menyn och se att sidan läses in omedelbart utan att behöva uppdateras.
-
Öppna webbläsarens inbyggda utvecklarverktyg och övervaka nätverksaktiviteten när du navigerar bland de underordnade sidorna.
Trafiken är mycket liten när du går från sida till sida i appen. Sidan läses inte in igen och endast de nya bilderna begärs.
SPA hanterar innehållet och routningen enbart på klientsidan.
Så om sidan inte läses in igen när du navigerar genom de underordnade sidorna, hur läses den in?
I nästa avsnitt, Läsa in ett SPA-program, läses djupare in i hur SPA läses in och hur innehåll kan läsas in synkront och asynkront.
Läsa in ett SPA-program loading-a-spa-application
-
Om den inte redan är inläst läser du in WKND SPA-projektappen antingen på publiceringsservern eller med alternativet Visa som publicerad på menyn Sidinformation i sidredigeraren.
http://<host>:<port>/content/wknd-spa-react/us/en/home.html
-
Använd det inbyggda verktyget i webbläsaren för att visa sidans källa.
-
Källans innehåll är begränsat.
- Sidan har inget innehåll i sin brödtext. Den består huvudsakligen av formatmallar och ett anrop till olika skript, till exempel
clientlib-react.min.js
. - Dessa skript är de primära drivrutinerna för det här programmet och ansvarar för återgivningen av allt innehåll.
- Sidan har inget innehåll i sin brödtext. Den består huvudsakligen av formatmallar och ett anrop till olika skript, till exempel
-
Använd webbläsarens inbyggda verktyg för att inspektera sidan. Se innehållet i DOM som är fullständigt inläst.
-
Växla till fliken Nätverk i panelen Granska och läs in sidan igen.
Observera att de primära resurser som har lästs in för sidan är själva sidan, CSS, React JavaScript, dess beroenden och JSON-data för sidan.
-
Läs in
home.model.json
på en ny flik.http://<host>:<port>/content/wknd-spa-react/us/en/home.model.json
AEM SPA Editor använder AEM Content Services för att leverera hela sidans innehåll som en JSON-modell.
Genom att implementera specifika gränssnitt tillhandahåller Sling Models den information som krävs för SPA. Leveransen av JSON-data delegeras nedåt till varje komponent (från sida, stycke, komponent osv.).
Varje komponent väljer vad den visar och hur den återges (på serversidan med HTML eller på klientsidan med React eller Angular). Den här artikeln fokuserar på klientåtergivning med React.
-
Modellen kan också gruppera sidor så att de läses in synkront, vilket minskar antalet sidomladdningar som behövs.
I exemplet med WKND SPA-projektappen läses sidorna
home
,page-1
,page-2
ochpage-3
in synkront eftersom besökare vanligtvis besöker alla dessa sidor.Detta beteende är inte obligatoriskt och är helt definierbart.
-
Om du vill visa den här skillnaden i beteende läser du in sidan
home
igen och rensar nätverksaktiviteten för inspektören. Navigera tillpage-1
på sidmenyn och se att den enda nätverksaktiviteten är en begäran för bilden avpage-1
.page-1
behöver inte läsas in.
Interaktion med SPA-redigeraren interaction-with-the-spa-editor
Med exempelprogrammet WKND SPA Project är det tydligt hur programmet fungerar och läses in när det publiceras, med hjälp av innehållstjänster för JSON-innehållsleverans och asynkron inläsning av resurser.
Innehållsutvecklaren kan också skapa innehåll med en SPA-redigerare utan problem i AEM.
I följande avsnitt ska vi titta närmare på det avtal som gör det möjligt för SPA-redigeraren att koppla komponenter inom SPA till AEM-komponenter för att uppnå denna smidiga redigeringsupplevelse.
-
Läs in WKND SPA-projektprogrammet i redigeraren och växla till läget Förhandsgranska.
http://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.html
-
Kontrollera sidans innehåll med hjälp av webbläsarens inbyggda utvecklarverktyg. Använd markeringsverktyget och markera en redigerbar komponent på sidan och visa elementinformationen.
Komponenten har ett nytt dataattribut,
data-cq-data-path
.Till exempel
data-cq-data-path="/content/wknd-spa-react/us/en/home/jcr:content/root/responsivegrid/text
Den här sökvägen tillåter hämtning och associering av konfigurationsobjektet för redigeringssammanhanget för varje komponent.
Det här är det enda markeringsattribut som krävs för att redigeraren ska kunna identifiera det som en redigerbar komponent i SPA-filen. Utifrån det här attributet avgör SPA-redigeraren vilken redigerbar konfiguration som är kopplad till komponenten, så att rätt bildruta, verktygsfält och så vidare läses in.
Vissa specifika klassnamn läggs också till för att markera platshållare och för att dra och släppa resurser.
note note NOTE Det här beteendet skiljer sig från serversidans återgivna sidor i AEM, där ett cq
-element infogas för varje redigerbar komponent.Med den här metoden i SPA-redigeraren tar du bort behovet av att mata in anpassade element, bara genom att förlita dig på ett extra dataattribut, vilket förenklar markeringen för klientutvecklaren.
Headless and Headless in AEM headful-headless
SPA-program kan aktiveras med flexibla integrationsnivåer inom AEM, inklusive SPA-program som utvecklats och underhålls utanför AEM. SPA kan också användas i AEM och samtidigt använda AEM för att leverera innehåll till ytterligare slutpunkter utan huvudproblem.
Nästa steg next-steps
Nu när du förstår redigeringsupplevelsen av SPA i AEM och hur en SPA hör ihop med SPA-redigeraren kan du fördjupa dig i hur en SPA byggs.
- Komma igång med SPA i AEM med hjälp av React visar hur en grundläggande SPA har skapats för att fungera med SPA-redigeraren i AEM med hjälp av React
- Komma igång med SPA-program i AEM med Angular visar hur en grundläggande SPA-fil har skapats för att fungera med SPA-redigeraren i AEM med Angular
- Översikt över SPA-redigeraren går in mer i kommunikationsmodellen mellan AEM och SPA.
- Utveckla SPA för AEM beskriver hur gränssnittsutvecklare kan engagera sig i utvecklingen av en SPA för AEM och hur SPA interagerar med AEM arkitektur.