Procedure voor het maken van toepassingen voor één pagina (SPA) met AEM create-spa

In deze facultatieve voortzetting van de AEM Headless Reis van de Ontwikkelaar, leert u hoe AEM koploze levering met traditionele volledig-stapelCMS eigenschappen kan combineren. U leert ook hoe u bewerkbare SPA kunt maken met behulp van AEM SPA Editor-framework en externe SPA kunt integreren, waardoor bewerkingsmogelijkheden naar wens worden ingeschakeld.

Het verhaal tot nu toe story-so-far

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

Tot nu toe hebt u of met uw eerste AEM Headless-project gewoond of de kennis gehad dat te doen. Gefeliciteerd!

Waarom lees je deze extra, optionele voortzetting van de reis? U herinnert zich dat in Begonnen, het werd besproken hoe AEM niet alleen hoofdloze levering en traditionele full-stack modellen steunt, maar hybride modellen 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 (SPA) kunt tot stand brengen die in AEM editable zijn. Op deze manier kunt u inhoud maken en deze zonder problemen aan een SPA leveren, maar SPA kunt u deze in AEM bewerken.

Doelstelling objective

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

Eisen en voorwaarden requirements-prerequisites

Er zijn verschillende vereisten voordat u met SPA begint te werken in AEM.

Kennis knowledge

Gereedschappen tools

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

Een toepassing van één pagina (SPA) verschilt van een conventionele pagina in die zin dat deze op client wordt weergegeven en vooral door JavaScript wordt aangedreven, afhankelijk van Ajax-aanroepen om gegevens te laden en de pagina dynamisch bij te werken. De meeste of alle inhoud wordt één keer opgehaald in één pagina die wordt geladen met extra bronnen die indien nodig asynchroon worden geladen, op basis van gebruikersinteractie met de pagina.

Deze functionaliteit vermindert de behoefte aan pagina's te vernieuwen en biedt de gebruiker een ervaring die naadloos, snel is en meer als een native app-ervaring voelt.

Met de AEM SPA Editor kunnen front-end ontwikkelaars SPA maken die in een AEM site kunnen worden geïntegreerd, zodat de auteurs van de inhoud de SPA inhoud net zo gemakkelijk kunnen bewerken als elke andere AEM.

Waarom een SPA? why-spa

Door sneller, vloeiend en meer als een native toepassing te zijn, wordt een SPA een aantrekkelijke ervaring. Het is niet alleen goed voor de bezoeker van de webpagina, maar ook voor marketeers en ontwikkelaars vanwege de aard van de SPA.

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

Hoe AEM handgrepen SPA

Bij het ontwikkelen van toepassingen voor één pagina op AEM wordt ervan uitgegaan dat de ontwikkelaar aan de voorzijde de aanbevolen standaardprocedures voor het maken van een SPA in acht neemt. Als front-end ontwikkelaar, als u deze algemene beste praktijken en een paar AEM-specifieke principes volgt, wordt uw SPA functioneel met AEM en zijn inhoud-creatie mogelijkheden.

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

De AEM SPA Editor aem-spa-editor

Sites die zijn gemaakt met behulp van gemeenschappelijke SPA, zoals React en Angular, laden de inhoud via dynamische JSON. Zij verstrekken niet de structuur van de HTML die voor de AEM Redacteur van de Pagina noodzakelijk is om bewerkingscontroles te kunnen plaatsen.

Om het bewerken van SPA binnen AEM mogelijk te maken, is een toewijzing tussen de JSON-uitvoer van de SPA en het inhoudsmodel in de AEM opslagplaats nodig, zodat u wijzigingen in de inhoud kunt opslaan.

SPA ondersteuning in AEM introduceert een dunne JavaScript-laag die communiceert met de SPA JavaScript-code wanneer deze wordt geladen in de Pagina-editor waarmee gebeurtenissen kunnen worden verzonden. De locatie voor de bewerkingsbesturingselementen kan worden geactiveerd om in-context bewerken toe te staan. Deze eigenschap bouwt op het concept van het Eindpunt van de Diensten van de Inhoud API voort omdat de inhoud van de SPA door als Diensten van de Inhoud moet worden geladen.

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

Bestaande SPA aanpassen existing-spas

Als u een bestaande SPA hebt, AEM ondersteuning voor het insluiten ervan in AEM, zodat deze zichtbaar is voor de auteurs van de inhoud in de AEM Editor. Deze mogelijkheid kan nuttig zijn om de inhoud die ze maken, weer te geven door middel van Content Fragments in de context van de eindtoepassing waarin deze wordt gebruikt.

Bovendien kunt u met slechts kleine wijzigingen bepaalde bewerkingsmogelijkheden voor de externe SPA inschakelen in de AEM Editor.

Met de component RemotePage kan een externe SPA in AEM worden weergegeven.

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

Volgende functies what-is-next

Als u wilt beginnen met het ontwikkelen van uw eigen SPA voor AEM, bekijkt u de volgende documenten:

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

Zie hieronder voor extra middelendie u dieper in SPA onderwerpen 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.