Hoe te om de Toepassingen van de Enige Pagina (SPAs) met AEM te creëren create-spa

In deze facultatieve voortzetting van de Hoofdloze Reis van de Ontwikkelaar van AEM,leert u hoe Adobe Experience Manager (AEM) koploze levering met traditionele full-stack eigenschappen van CMS kan combineren en hoe u editable SPAs kunt creëren gebruikend het kader van de Redacteur van het KUUROORD van AEM, en externe SPAs integreren, toelatend mogelijkheden zoals vereist.

Het verhaal tot nu toe story-so-far

Op dit punt, zou u de volledige Reis van de Ontwikkelaar van AEM Headlessmoeten voltooien en de grondbeginselen van hoofdloze levering in AEM begrijpen met inbegrip van het begrip van:

Dus je bent nu ofwel gaan leven met je eerste AEM Headless-project, of je hebt de kennis om dat te doen. Gefeliciteerd!

Waarom leest u deze extra, optionele voortzetting van de reis? Vergelijkbaar, herinnert u eraan dat in Begonnen, er een korte bespreking over was hoe AEM niet alleen hoofdloze levering en traditionele full-stack modellen steunt, maar ook hybride modellen kan steunen die de voordelen van allebei combineren. Hoewel niet het traditionele model zonder kop, kunnen dergelijke hybride modellen ongekende flexibiliteit aan bepaalde projecten aanbieden.

Dit artikel bouwt op uw kennis van AEM Headless voort door diepgaand te onderzoeken hoe u uw eigen single-page toepassingen (SPAs) kunt tot stand brengen die in AEM editable zijn. Op deze manier, kunt u inhoud tot stand brengen en het leiden zonder kop aan een KUUROORD, maar dat KUUROORD editable in AEM blijft.

Doelstelling objective

Dit document helpt u begrijpen hoe Toepassingen van de Enige Pagina gebruikend het kader van de Redacteur van AEM SPA worden ontwikkeld. Nadat u dit document hebt gelezen, moet u:

Eisen en voorwaarden requirements-prerequisites

Er zijn verscheidene vereisten alvorens u met SPAs in AEM begint te werken.

Kennis knowledge

Gereedschappen tools

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-spa

Door sneller, dynamisch, en meer als een inheemse toepassing te zijn, wordt een SPA een 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.

Voor een volledige beschrijving van SPAs en waarom u hen zou gebruiken, zie de extra middelensectie voor verbindingen aan diepgaandere documentatie.

Hoe AEM SPA's afhandelt

Het ontwikkelen van enige paginatoepassingen op AEM veronderstelt dat de front-end ontwikkelaar standaardbeste praktijken wanneer het creëren van een SPA naleeft. Als front-end ontwikkelaar, als u deze algemene beste praktijken en een paar AEM-specifieke principes volgt, zal uw SPA functioneel met AEM en zijn inhoud-creatie mogelijkheden zijn.

Voor een volledige beschrijving van hoe AEM SPAs behandelt, zie de extra middelensectie voor verbindingen aan diepgaande documentatie.

De AEM SPA-editor aem-spa-editor

De plaatsen die gebruikend gemeenschappelijke kaders van het KUUROORD zoals React en Angular worden gebouwd laden hun inhoud via dynamische JSON en verstrekken niet de structuur van HTML die voor de Redacteur van de Pagina van AEM noodzakelijk is om bewerkingscontroles te kunnen plaatsen.

Om het uitgeven van SPAs binnen AEM toe te laten, is een afbeelding tussen de output JSON van het KUUROORD en het inhoudsmodel in de bewaarplaats van AEM nodig om veranderingen in de inhoud te bewaren.

De steun van het KUUROORD in AEM introduceert een dunne laag JS die met de code van het KUUROORD JS wanneer geladen in de Redacteur van de Pagina interactie heeft waarmee de gebeurtenissen kunnen worden verzonden en de plaats voor uitgeeft controles kunnen worden geactiveerd om in-context het uitgeven toe te staan. Deze eigenschap bouwt op het concept van het Eindpunt van de Diensten van de Inhoud API voort omdat de inhoud van het KUUROORD als Diensten van de Inhoud moet worden geladen.

Voor een volledige beschrijving van de Redacteur van AEM SPA, zie de extra middelensectie voor verbindingen aan diepgaandere documentatie.

Bestaande SPA's aanpassen existing-spas

Als u een bestaande SPA hebt, biedt AEM ondersteuning voor het insluiten van de SPA in AEM, zodat deze zichtbaar is voor de auteurs van de inhoud in de AEM Editor. Dit kan handig zijn om de inhoud die ze maken, weer te geven via Content Fragments in de context van de eindtoepassing waarin deze wordt gebruikt.

Ook, met slechts kleine veranderingen, kunt u bepaalde het uitgeven capaciteit aan het externe KUUROORD binnen de Redacteur van AEM toelaten.

De component RemotePage staat het teruggeven van een externe SPA in AEM toe.

Voor een volledige beschrijving van hoe te om een externe KUUROORD editable in AEM te maken, zie de extra middelensectie voor verbindingen aan diepgaandere documentatie.

Volgende functies what-is-next

Ga als volgt te werk om uw eigen SPA's voor AEM te gaan ontwikkelen:

Als u bestaande SPA moet aanpassen om het in AEM te gebruiken, herzie de volgende documenten:

Zie hieronder voor extra middelendie u dieper in de onderwerpen van het KUUROORD in AEM kunnen nemen.

Aanvullende bronnen additional-resources

Hieronder vindt u een aantal aanvullende bronnen die dieper ingaan op bepaalde concepten die in dit document worden genoemd.