Documentatie AEM as a Cloud Service Handboek

Introductie van het KUUROORD en Analyse spa-introduction

Last update: Thu Jun 12 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Van toepassing op:
Experience Manager as a Cloud Service

Onderwerpen:
Ontwikkelen

Gemaakt voor:

Beheerder
Ontwikkelaar

Toepassingen van één pagina (SPAs) kunnen dwingende ervaringen voor websitegebruikers aanbieden. De ontwikkelaars willen plaatsen kunnen bouwen gebruikend het kader van het KUUROORD en de auteurs willen de inhoud binnen AEM voor een plaats foutloos uitgeven die gebruikend dergelijke kaders wordt gebouwd.

De redacteur van het KUUROORD biedt een uitvoerige oplossing voor het steunen van SPAs binnen AEM aan. Dit artikel loopt door het gebruiken van een basistoepassing van het KUUROORD voor creatie en toont hoe het op de onderliggende Redacteur van AEM SPA betrekking heeft.

IMPORTANT

De redacteur van het KUUROORD is afgekeurdvoor nieuwe projecten. Het blijft door Adobe ondersteund voor bestaande projecten, maar mag niet worden gebruikt voor nieuwe projecten. De voorkeurseditors voor het beheer van inhoud zonder kop in AEM zijn nu:

de Universele Redacteurvoor visueel het uitgeven van hoofdloze inhoud.
de Redacteur van het Fragment van de Inhoudvoor op vorm-gebaseerde het uitgeven van hoofdloze inhoud.

Inleiding introduction

Artikel article-objective

Dit artikel introduceert de basisconcepten SPAs alvorens de lezer door een analyse van de redacteur van het KUUROORD door een eenvoudige toepassing van het KUUROORD te gebruiken om basisinhoud het uitgeven aan te tonen. Het duikt dan neer in de bouw van de pagina en hoe de toepassing van het KUUROORD op en met de Redacteur van AEM SPA betrekking heeft.

Het doel van deze inleiding en analyse is aan een ontwikkelaar van AEM aan te tonen waarom SPAs relevant zijn, hoe zij over het algemeen werken, hoe een KUUROORD door de Redacteur van AEM SPA wordt behandeld, en hoe het van een standaardtoepassing van AEM verschillend is.

Vereisten requirements

De analyse is gebaseerd op de standaardfunctionaliteit van AEM en de steekproefWKND SPA Project app. Om samen met deze analyse te volgen, moet u het volgende beschikbaar hebben.

Laatste ontwikkeling SDK van AEMaaCS
- Het zou als lokale ontwikkelomgeving moeten lopen.
- U moet beheerdersrechten voor het systeem hebben.
de steekproefWKND app van het Project van het KUUROORD beschikbaar op GitHub
- Download de recentste versie van React appgenoemd gelijkaardig aan wknd-spa-react.all-X.Y.Z-SNAPSHOT.zip.
- Download de recentste steekproefbeelden voor appgenoemd gelijkaardig aan wknd-spa-sample-images-X.Y.Z.zip.
- het pakketmanager van het Gebruikom beide pakketten te installeren aangezien u een ander pakket in AEM zou.
- Voor deze analyse hoeft de app niet te worden geïnstalleerd met Maven.

CAUTION

Dit document gebruikt WKND SPA Project appvoor demonstratiedoeleinden slechts. Gebruik het niet voor enig projectwerk.

TIP

Om het even welk project van AEM zou het Archetype van het Project van AEMmoeten gebruiken, dat de projecten van het KUUROORD gebruikend React of Angular steunt en het KUUROORD SDK gebruikt.

Wat is een SPA? what-is-a-spa

Een single-page toepassing (SPA) verschilt van een conventionele pagina in die zin dat het cliënt-kant wordt teruggegeven en hoofdzakelijk JavaScript-gedreven, die op Ajax vraag baseert om gegevens te laden en dynamisch de pagina bij te werken. De meeste of alle inhoud wordt één keer opgehaald in één pagina die wordt geladen met extra bronnen die asynchroon worden geladen, afhankelijk van gebruikersinteractie met de pagina.

Hierdoor is het minder nodig pagina's te vernieuwen en wordt de gebruiker een ervaring geboden die naadloos, snel is en meer lijkt op een native app-ervaring.

De redacteur van AEM SPA staat front-end ontwikkelaars toe om SPAs tot stand te brengen die in een plaats van AEM kan worden geïntegreerd, toestaand de inhoudsauteurs om de inhoud van het KUUROORD zo gemakkelijk als om het even welke andere inhoud van AEM uit te geven.

Waarom een SPA? why-a-spa

Door sneller, dynamisch, en meer als een inheemse toepassing te zijn, wordt een SPA een zeer aantrekkelijke ervaring niet alleen voor de bezoeker van de webpagina, maar ook voor marketers en ontwikkelaars toe te schrijven aan de aard van hoe SPAs werkt.

voordelen van het KUUROORD

Bezoekers visitors

Bezoekers willen native ervaringen als ze met inhoud werken.
Er zijn duidelijke gegevens dat hoe sneller een pagina, hoe waarschijnlijker een conversie zal plaatsvinden.

Marketers marketers

Marketers willen rijke, native ervaringen bieden om bezoekers te dwingen om zich volledig met inhoud bezig te houden.
Personalization kan deze ervaringen nog aantrekkelijker maken.

Ontwikkelaars developers

Ontwikkelaars willen een duidelijke scheiding tussen inhoud en presentatie.
Schone scheiding maakt het systeem meer uitbreidbaar en maakt een onafhankelijke ontwikkeling aan de voorzijde mogelijk.

Hoe werkt een SPA? how-does-a-spa-work

Het primaire idee achter een KUUROORD is dat de vraag aan, en gebiedsdeel op, een server wordt verminderd om vertragingen te minimaliseren die door serverlatentie worden veroorzaakt zodat SPA de ontvankelijkheid van een inheemse toepassing benadert.

In een traditionele, opeenvolgende webpagina worden alleen de gegevens geladen die nodig zijn voor de directe pagina. Dit betekent dat wanneer de bezoeker naar een andere pagina gaat, de server om de extra bronnen wordt gevraagd. Aanvullende aanroepen kunnen nodig zijn wanneer de bezoeker werkt met elementen op de pagina. Deze veelvoudige vraag kan een gevoel van vertraging of vertraging geven aangezien de pagina met de verzoeken van de bezoeker moet inhalen.

Opeenvolgende tegenover dynamische ervaringen

Voor een vloeiendere ervaring, die nadert wat een bezoeker van mobiele, native apps verwacht, laadt een SPA alle noodzakelijke gegevens voor de bezoeker bij de eerste lading. Hoewel dit een beetje langer kan duren, elimineert het dan de behoefte aan extra servervraag.

Door de pagina op de client te renderen, reageren de pagina-elementen sneller en hebben de bezoekers direct interactie met de pagina. Eventuele aanvullende gegevens worden asynchroon aangeroepen om de snelheid van de pagina te maximaliseren.

TIP

Voor technische details over hoe het werk van SPAs in AEM, zie de artikelen:

Voor een dichtere blik bij het ontwerp, de architectuur, en het technische werkschema van de Redacteur van het KUUROORD, zie het artikel:

Overzicht van de Redacteur van het KUUROORD.

Ervaring voor het bewerken van inhoud met SPA content-editing-experience-with-spa

Wanneer een KUUROORD wordt gebouwd om de Redacteur van AEM SPA te gebruiken, merkt de inhoudauteur geen verschil wanneer het uitgeven van en het creëren van inhoud. Er is algemene AEM-functionaliteit beschikbaar en er zijn geen wijzigingen in de workflow van de auteur vereist.

Bewerk de WKND SPA Project-app in AEM.

http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html
Selecteer een tekstcomponent. Een werkbalk ziet er net zo uit als een andere component. Selecteer uitgeven.
Bewerk de inhoud als normaal in AEM en houd er rekening mee dat de wijzigingen zich blijven voordoen.

uit
Met de Assets-browser kunt u een nieuwe afbeelding naar een afbeeldingscomponent slepen en neerzetten.

laten vallen
De wijziging wordt doorgevoerd.

Aanvullende ontwerpgereedschappen, zoals slepen en neerzetten van aanvullende componenten op de pagina, het opnieuw rangschikken van componenten en het wijzigen van de layout, worden ondersteund zoals in elke niet-SPA AEM-toepassing.

NOTE

De redacteur van het KUUROORD wijzigt DOM van de toepassing niet. De SPA zelf is verantwoordelijk voor het DOM.

Om te zien hoe dit werk, aan de volgende sectie van dit artikel Apps van het KUUROORD en de Redacteur van AEM SPAverder gaat.

SPA Apps en de Redacteur van AEM SPA spa-apps-and-the-aem-spa-editor

Ervarend hoe een KUUROORD zich voor de gebruiker gedraagt en dan het inspecteren van de pagina van het KUUROORD helpt om beter te begrijpen hoe een SAP app met de Redacteur van het KUUROORD in AEM werkt.

Een SPA-toepassing gebruiken using-an-spa-application

Laad de toepassing van het Project WKND SPA of op publiceer server of gebruikend de optie Mening zoals Gepubliceerd van het menu van de Informatie van de Pagina in de paginaredacteur.

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

Maak een notitie van de paginastructuur, inclusief navigatie naar onderliggende pagina's, menu's en artikelkaarten.
Navigeer naar een onderliggende pagina met behulp van het menu en controleer of de pagina direct wordt geladen zonder dat een pagina moet worden vernieuwd.
Open de ingebouwde ontwikkelaarsgereedschappen van uw browser en controleer de netwerkactiviteit terwijl u door de onderliggende pagina's navigeert.

Er is erg weinig verkeer wanneer u van pagina naar pagina gaat in de app. De pagina wordt niet opnieuw geladen en alleen de nieuwe afbeeldingen worden aangevraagd.

Het KUUROORD beheert de inhoud en het verpletteren volledig op de cliëntkant.

Dus als de pagina niet opnieuw wordt geladen wanneer u door de onderliggende pagina's navigeert, hoe wordt deze geladen?

De volgende sectie, die een Toepassing van het KUUROORDlaadt, graaft dieper in de mechanica van het laden van het KUUROORD en hoe de inhoud synchroon en asynchroon kan worden geladen.

Een SPA-toepassing laden loading-a-spa-application

Als niet reeds geladen, laad app van het Project van het KND SPA of op de publicatieserver of gebruikend de optie Mening zoals Gepubliceerd van het menu van de Informatie van de Pagina in de paginaredacteur.

http://<host>:<port>/content/wknd-spa-react/us/en/home.html
Gebruik het ingebouwde gereedschap van uw browser om de bron van de pagina weer te geven.
De inhoud van de bron is beperkt.
- De pagina heeft geen inhoud in de hoofdtekst. Het bestaat voornamelijk uit stijlpagina's en een aanroep naar verschillende scripts, zoals clientlib-react.min.js .
- Deze scripts vormen de belangrijkste stuurprogramma's voor deze toepassing en zijn verantwoordelijk voor het renderen van alle inhoud.
Gebruik de ingebouwde gereedschappen van uw browser om de pagina te inspecteren. Zie de inhoud van de DOM volledig geladen.
Ga naar het tabblad Netwerk in de Inspecteur en laad de pagina opnieuw.

Afbeeldingsverzoeken negeren. De primaire bronnen die voor de pagina worden geladen, zijn de pagina zelf, CSS, de React JavaScript, de afhankelijkheden en JSON-gegevens voor de pagina.
Laad de home.model.json op een nieuw tabblad.

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

De redacteur van AEM SPA gebruikt de Diensten van de Inhoud van AEMom de volledige inhoud van de pagina als model te leveren JSON.

Door specifieke interfaces uit te voeren, verstrekken de Modellen van het Sling de informatie noodzakelijk aan SPA. De levering van de JSON-gegevens wordt omlaag gedelegeerd aan elke component (van pagina, alinea, component, enzovoort).

Elke component kiest wat hij blootstelt en hoe hij wordt gerenderd (server-kant met HTML of client-kant met React of Angular). Dit artikel richt zich op client-side rendering met React.
Het model kan pagina's ook groeperen zodat ze synchroon worden geladen, waardoor het aantal pagina's dat opnieuw moet worden geladen, afneemt.

In het voorbeeld van de WKND SPA Project-app worden de pagina's home, page-1, page-2 en page-3 synchroon geladen, aangezien bezoekers doorgaans alle pagina's bezoeken.

Dit gedrag is niet verplicht en is volledig definieerbaar.
Als u dit verschil in gedrag wilt zien, laadt u de pagina home opnieuw en wist u de netwerkactiviteit van de inspecteur. Navigeer naar page-1 in het paginamenu en controleer of de enige netwerkactiviteit een aanvraag is voor de afbeelding van page-1 . page-1 zelf hoeft niet te worden geladen.

Interactie met de Redacteur van het KUUROORD interaction-with-the-spa-editor

Gebruikend de steekproeftoepassing van het Project van WKND SPA, is het duidelijk hoe app zich gedraagt en wanneer gepubliceerd wordt geladen, gebruikend inhoudsdiensten voor JSON inhoudslevering en asynchrone lading van middelen.

Voor de auteur van de inhoud is het maken van inhoud met een SPA-editor ook naadloos in AEM.

In de volgende sectie zullen wij het contract onderzoeken dat de Redacteur van het KUUROORD toestaat om componenten binnen het KUUROORD met de componenten van AEM te relateren en deze naadloze het uitgeven ervaring te bereiken.

Laad de toepassing van het Project WKND SPA in de redacteur en schakelaar aan wijze van de Voorproef.

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

Controleer de inhoud van de pagina met de ingebouwde ontwikkelaarsgereedschappen van uw browser. Selecteer met het selectiegereedschap een bewerkbare component op de pagina en bekijk de details van het element.

De component heeft een nieuw gegevenskenmerk data-cq-data-path .

inspecterend de elementen van het Project van WKND SPA

Bijvoorbeeld

data-cq-data-path="/content/wknd-spa-react/us/en/home/jcr:content/root/responsivegrid/text

Met dit pad kunt u het contextconfiguratieobject van elke component ophalen en koppelen.

Dit is het enige prijsverhogingsattribuut dat voor de redacteur wordt vereist om dit als editable component binnen het KUUROORD te erkennen. Gebaseerd op dit attribuut, zal de Redacteur van het KUUROORD bepalen welke editable configuratie met de component wordt geassocieerd, zodat het correcte kader, de toolbar, etc. wordt geladen.

Bepaalde specifieke klassenamen worden ook toegevoegd voor het markeren van plaatsaanduidingen en voor het slepen en neerzetten van elementen.

note note
NOTE
Dit gedrag verschilt van gerenderde pagina's op de server in AEM, waar een `cq` -element is ingevoegd voor elke bewerkbare component.
Deze benadering in de Redacteur van het KUUROORD verwijdert de behoefte om douaneelementen in te spuiten, die slechts een extra gegevensattribuut verlaten, makend de prijsverhoging voor de frontend ontwikkelaar eenvoudiger.

Hoofdletters en headless in AEM headful-headless

SPAs kan met flexibele niveaus van integratie binnen AEM worden toegelaten met inbegrip van SPAs die buiten AEM worden ontwikkeld en worden gehandhaafd. Ook, kunnen SPAs binnen AEM worden gebruikt terwijl ook het gebruiken van AEM om inhoud aan extra eindpunten zonder oprecht te leveren.

TIP

Zie het document Kopieerbaar en Hoofdloos in AEMvoor meer informatie.

Volgende stappen next-steps

Nu u het uitgeven van het KUUROORD ervaring in AEM begrijpt en hoe een KUUROORD op de Redacteur van het KUUROORD betrekking heeft, neem een diepere duik in het begrip hoe een KUUROORD wordt gebouwd.

Begonnen het Worden met SPAs in AEM die Reagerengebruikt toont hoe een basisKUUROORD wordt gebouwd om met de Redacteur van het KUUROORD in AEM te werken gebruikend Reageren
Begonnen het Worden met SPAs in AEM die Angular gebruikentoont hoe een basisKUUROORD wordt gebouwd om met de Redacteur van het KUUROORD in AEM te werken gebruikend Angular
het Overzicht van de Redacteur van het KUUROORDgaat in meer diepte in het communicatie model tussen AEM en het KUUROORD.
het ontwikkelen SPAs voor AEMbeschrijft hoe te om front-end ontwikkelaars in dienst te nemen om een KUUROORD voor AEM te ontwikkelen en hoe SPAs met de architectuur van AEM in wisselwerking staat.

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab