DokumentationAEM 6.4Användarhandbok om utveckling

SPA introduktion och genomgång spa-introduction-and-walkthrough

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Developer
CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

Single page applications (SPA) 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 skapats med sådana ramverk.

SPA Editor erbjuder en omfattande lösning för SPA inom AEM. I den här artikeln går vi igenom hur du använder ett grundläggande SPA för att skapa och visar hur det är relaterat till den underliggande AEM SPA Editor.

NOTE
Funktionen SPA (Single-Page Application Editor) kräver AEM 6.4 Service Pack 2 eller senare.
SPA Editor är den rekommenderade lösningen för projekt som kräver SPA ramverksbaserad återgivning på klientsidan (t.ex. Reaktion eller Angular).

Introduktion introduction

Artikelsyfte article-objective

I den här artikeln introduceras de grundläggande begreppen för SPA innan läsaren vägleds genom en genomgång av SPA redigeringsprogram med hjälp av ett enkelt SPA som demonstrerar grundläggande innehållsredigering. Sedan går det ned på hur sidan är uppbyggd och hur det SPA programmet relaterar till och interagerar med AEM SPA.

Målet med den här introduktionen och genomgången är att visa 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 ett AEM standardprogram.

Genomgången baseras på AEM och exempelappen We.Retail Journal. Följande krav måste vara uppfyllda:

CAUTION
Det här dokumentet använder App för återförsäljningsjournal endast i demonstrationssyfte. Det ska inte användas för något projektarbete.
Alla AEM ska utnyttja AEM Project Archetype, som stöder SPA projekt med React eller Angular och använder SPA SDK.

Vad är en SPA? what-is-a-spa

Ett enkelsidigt program (SPA) skiljer sig från en konventionell sida på så sätt att det återges på klientsidan och i huvudsak är Javascript-drivet, beroende på Ajax-anrop 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åll lika enkelt som annat AEM.

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.

screen_shot_2018-08-20at135550

Besökare

  • 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

  • Marknadsförarna vill erbjuda innehållsrika, verklighetstrogna upplevelser som lockar besökarna att engagera sig fullt ut i innehållet.
  • Personalisering kan göra dessa upplevelser ännu mer övertygande.

Utvecklare

  • Utvecklarna vill att det ska finnas tydliga skillnader mellan innehåll och presentation.
  • Ren separation gör systemet mer utbyggbart samt möjliggör oberoende framend-utveckling.

Hur fungerar en SPA? how-does-a-spa-work

Den främsta idén bakom en SPA är att anrop och beroende av en server minskas för att minimera fördröjningar som orsakas av serveranrop så att SPA närmar sig svarstiden för ett internt 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.

screen_shot_2018-08-20at140449

För en smidigare upplevelse, som närmar sig vad en besökare förväntar sig av mobilappar och 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 sidelementet snabbare och besökarens interaktion med sidan är omedelbar. Ytterligare data som kan behövas anropas asynkront för att maximera sidans hastighet.

NOTE
Teknisk information om hur SPA fungerar i AEM finns i artikeln Komma igång med SPA i AEM.
Mer information om design, arkitektur och tekniska arbetsflöden i SPA Editor finns i artikeln SPA.

Innehållsredigering med SPA content-editing-experience-with-spa

När en SPA är byggd för att dra nytta av den AEM SPA redigeraren märker innehållsförfattaren ingen skillnad när du redigerar och skapar innehåll. Vanliga AEM är tillgängliga och inga ändringar i författarens arbetsflöde krävs.

NOTE
Genomgången baseras på AEM och exempelappen We.Retail Journal. Följande krav måste vara uppfyllda:

  1. Redigera appen We.Retail Journal i AEM.

    http://localhost:4502/editor.html/content/we-retail-journal/react.html

    screen_shot_2018-06-07at142533

  2. Markera en rubrikkomponent och lägg märke till att ett verktygsfält ser ut som en annan komponent. Välj Edit.

    screen_shot_2018-06-07at142937

  3. Redigera innehållet som vanligt i AEM och notera att ändringarna bevaras.

    screen_shot_2018-06-07at143419

    note note
    NOTE
    Se SPA för mer information om textredigeraren och SPA på plats.

  4. Använd Resursläsaren för att dra och släppa en ny bild i en bildkomponent.

    screen_shot_2018-06-07at143530

  5. Ändringen är beständig.

    screen_shot_2018-06-07at143732

Ytterligare redigeringsverktyg som att dra och släppa ytterligare komponenter på sidan, ordna om komponenter och ändra layouten stöds som i andra program än SPA.

NOTE
SPA redigerare ändrar inte programmets DOM. SPA ansvarar själv för DOM.
Om du vill se hur det här fungerar fortsätter du till nästa avsnitt i den här artikeln SPA och AEM SPA.

SPA och AEM SPA spa-apps-and-the-aem-spa-editor

Genom att uppleva hur en SPA fungerar för slutanvändaren och sedan inspektera den SPA sidan blir det lättare att förstå hur en SAP-app fungerar med SPA Editor i AEM.

Använda ett SPA using-an-spa-application

  1. Läs in programmet We.Retail Journal antingen på publiceringsservern eller med alternativet View as Published från Sidinformation i sidredigeraren.

    /content/we-retail-journal/react.html

    screen_shot_2018-06-08at102650

    Lägg märke till sidstrukturen, inklusive navigering till underordnade sidor, väderwidget och artiklar.

  2. Navigera till en underordnad sida via menyn och se att sidan läses in omedelbart utan att behöva uppdateras.

    screen_shot_2018-06-08at102815

  3. Öppna webbläsarens inbyggda utvecklarverktyg och övervaka nätverksaktiviteten när du navigerar bland de underordnade sidorna.

    screen_shot_2018-06-08at103922

    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 efterfrågas.

    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?

Nästa avsnitt, Läsa in ett SPA, går djupare in i hur SPA läses in och hur innehåll kan läsas in synkront och asynkront.

Läsa in ett SPA loading-an-spa-application

  1. Om den inte redan är inläst läser du in programmet We.Retail Journal på publiceringsservern eller använder alternativet View as Published från Sidinformation i sidredigeraren.

    /content/we-retail-journal/react.html

    screen_shot_2018-06-07at144736

  2. Använd det inbyggda verktyget i webbläsaren för att visa sidans källa.

  3. Observera att källans innehåll är extremt begränsat.

    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>

    Sidan har inget innehåll i sin brödtext. Den består huvudsakligen av formatmallar och ett anrop till ett React-skript, we-retail-journal-react.js.

    Det här React-skriptet är den primära drivrutinen för programmet och ansvarar för återgivningen av allt innehåll.

  4. Använd webbläsarens inbyggda verktyg för att inspektera sidan. Se innehållet i DOM som är fullständigt inläst.

    screen_shot_2018-06-07at151848

  5. 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 samt JSON-data för sidan.

    screen_shot_2018-06-07at152155

  6. Läs in react.model.json på en ny flik.

    /content/we-retail-journal/react.model.json

    screen_shot_2018-06-07at152636

    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 ger Sling Models den information som behö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). Naturligtvis fokuserar den här artikeln på klientåtergivning med React.

  7. Modellen kan också gruppera sidor så att de läses in synkront, vilket minskar antalet sidomladdningar som behövs.

    I exemplet med We.Retail Journal home, blogoch aboutus sidor läses in synkront eftersom besökarna vanligtvis besöker alla dessa sidor. Men weather sidan läses in asynkront eftersom det är mindre troligt att besökarna kommer att besöka den.

    Detta beteende är inte obligatoriskt och är helt definierbart.

    screen_shot_2018-06-07at153945

  8. Om du vill visa den här skillnaden i beteende läser du in sidan igen och rensar nätverksaktiviteten för inspektören. Navigera till bloggen och till sidorna på sidan och se att ingen nätverksaktivitet har rapporterats.

    Navigera till vädersidan och se att weather.model.json anropas asynkront.

    screen_shot_2018-06-07at155738

Interaktion med SPA interaction-with-the-spa-editor

Med exempelprogrammet We.Retail Journal är det tydligt hur appen beter sig och läses in när den publiceras, och utnyttjar innehållstjänster för JSON-innehållsleverans samt asynkron inläsning av resurser.

Dessutom är det smidigt för innehållsförfattaren att skapa innehåll med en SPA redigerare i AEM.

I följande avsnitt utforskar vi kontraktet som gör det möjligt för SPA Editor att relatera komponenter i SPA till AEM komponenter och uppnå denna smidiga redigeringsupplevelse.

  1. Läs in programmet We.Retail Journal i redigeraren och växla till Förhandsgranska läge.

    http://localhost:4502/editor.html/content/we-retail-journal/react.html

  2. 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.

    Observera att komponenten har ett nytt dataattribut data-cq-data-path.

    screen_shot_2018-06-08at095124

    Till exempel

    data-cq-data-path="root/responsivegrid/paragraph_1

    Med den här sökvägen kan du hämta och associera 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. Utifrån det här attributet avgör SPA redigerare vilken redigerbar konfiguration som är kopplad till komponenten, så att rätt bildruta, verktygsfält osv. har lästs 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
    Detta är en förändring av serversidans renderade sidor i AEM, där det finns en cq element infogat för varje redigerbar komponent.
    Detta tillvägagångssätt i SPA tar bort behovet av att injicera anpassade element, endast genom att förlita sig på ett extra dataattribut, vilket gör markeringen enklare för klientutvecklaren.

Nästa steg next-steps

Nu när du förstår SPA redigeringsupplevelsen i AEM och hur en SPA relaterar till SPA redigerare kan du fördjupa dig i hur en SPA byggs.

  • Komma igång med SPA i AEM visar hur en grundläggande SPA fungerar med SPA Editor i AEM
  • SPA fördjupar sig i kommunikationsmodellen mellan AEM och SPA.
  • Utveckla SPA för AEM beskriver hur man engagerar gränssnittsutvecklare för att utveckla en SPA för AEM och hur SPA interagerar med AEM arkitektur.
recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e