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 Adobe Experience Manager (AEM) koploze levering met traditionele volledig-stapelCMS eigenschappen kan combineren en hoe u editable SPA tot stand kunt brengen gebruikend AEM het kader van de Redacteur SPA, en externe SPA kan integreren, toelatend bewerkingsmogelijkheden zoals vereist.

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:

Dus je bent nu ofwel met je eerste AEM Headless-project gaan wonen, of de kennis hebben 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 (SPA) kunt tot stand brengen die in AEM editable zijn. Op deze manier kunt u inhoud maken en deze zonder problemen leveren aan een SPA, maar dat SPA bewerkbaar blijft in AEM.

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

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, niet alleen voor de bezoeker van de webpagina, maar ook voor marketers en ontwikkelaars, vanwege de aard van de manier waarop SPA werkt.

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, zal uw SPA met AEM en zijn inhoud-creatie mogelijkheden functioneel zijn.

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

De plaatsen die gebruikend gemeenschappelijke SPA zoals React en Angular worden gebouwd laden hun inhoud via dynamische JSON en 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 om wijzigingen in de inhoud op te slaan.

SPA ondersteuning in AEM introduceert een dunne JS-laag die communiceert met de SPA JS-code wanneer deze wordt geladen in de Pagina-editor waarmee gebeurtenissen kunnen worden verzonden en de locatie voor de bewerkingsbesturingselementen kan worden geactiveerd om in-context bewerken mogelijk te maken. 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. 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.

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.