SPA ontwikkelen voor AEM

Toepassingen op één pagina (SPA) kunnen aantrekkelijke ervaringen bieden voor websitegebruikers. Ontwikkelaars willen sites kunnen maken met behulp van SPA frameworks en auteurs willen inhoud naadloos bewerken binnen AEM voor een site die is gebouwd met behulp van dergelijke frameworks.

Dit artikel stelt belangrijke vragen om te overwegen wanneer het in dienst nemen van een front-end ontwikkelaar om een SPA voor AEM te ontwikkelen en geeft een overzicht van de architectuur van AEM met betrekking tot het opstellen van SPA op AEM.

OPMERKING

De eigenschap van de Redacteur van de Toepassing van de enig-Pagina (SPA) vereist AEM 6.4 de dienstpak 2 of nieuwer.

De SPA Redacteur is de geadviseerde oplossing voor projecten die SPA kader gebaseerde cliënt-zijteruggeven (b.v. Reageren of Angular) vereisen.

Projectarchetype AEM

Om het even welk AEM project zou hefboomwerking AEM Project Archetype, dat SPA projecten gebruikend React of Angular steunt en hefboomwerkingen de SPA SDK gebruikt.

Ontwikkelingsprincipes SPA voor AEM

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

  • Draagbaarheid - Net als bij alle onderdelen moeten de onderdelen zo draagbaar mogelijk zijn. De SPA moet worden gebouwd met draagbaar en opnieuw te gebruiken componenten, waarbij statische paden die naar de inhoudsstructuur verwijzen, worden vermeden.
  • AEM de Structuur van de Plaats van Drives - de front-end ontwikkelaar leidt tot componenten en bezit hun interne structuur, maar baseert zich op AEM om de inhoudsstructuur van de plaats te bepalen.
  • Dynamische rendering - Alles moet dynamisch zijn.
  • Het dynamische verpletteren - de SPA is de oorzaak van het verpletteren en AEM luistert aan het en haalt de componentengegevens die op het worden gebaseerd. Om het even welk verpletteren zou ook dynamisch moeten zijn.

Als u deze principes in gedachten houdt bij het ontwikkelen van uw SPA, is deze zo flexibel en mogelijk in de toekomst, waarbij alle ondersteunde AEM ontwerpfuncties worden ingeschakeld.

Als u geen AEM ontwerpeigenschappen te hoeven steunen, kunt u een verschillend SPA ontwerpmodel moeten overwegen.

Draagbaarheid

Zoals bij het ontwikkelen van om het even welke component, zouden uw componenten op een zodanige manier moeten worden ontworpen dat hun draagbaarheid wordt gemaximaliseerd. Patronen die de draagbaarheid of herbruikbaarheid van de onderdelen in de weg staan, moeten worden vermeden om ervoor te zorgen dat de onderdelen compatibel, flexibel en duurzaam zijn.

De ontwikkelaar moet het gebruik van statische paden die naar de inhoudsstructuur verwijzen, vermijden omdat paden op elk moment door de auteurs van de inhoud kunnen worden gewijzigd. Dit beperkt ook de herbruikbaarheid van de bibliotheek en het verhindert de AEM Redacteur van het Malplaatje worden gebruikt aangezien zijn structuur in een andere plaats dan de inhoud wordt gevestigd.

De resulterende SPA moet worden gebouwd met zeer draagbare en herbruikbare onderdelen.

Sitestructuur AEM stations

De front-end ontwikkelaar moet zichzelf beschouwen als de verantwoordelijke voor het maken van een bibliotheek met SPA componenten die worden gebruikt om de app te maken. De front-end ontwikkelaar heeft volledige controle over de interne structuur van de componenten. AEM bezit echter altijd de structuur van de site.

Dit betekent dat de front-end ontwikkelaar klanteninhoud vóór of na het ingangspunt van de componenten kan toevoegen en derde vraag binnen de component kan ook maken. De front-end ontwikkelaar heeft echter geen volledige controle over hoe de componenten bijvoorbeeld nesten.

Dynamische rendering

De SPA mag alleen vertrouwen op dynamische rendering van inhoud. Dit is de standaardverwachting waarbij AEM alle onderliggende elementen van de inhoudsstructuur ophaalt en rendert.

Elke expliciete rendering die naar specifieke inhoud verwijst, wordt als statische rendering beschouwd en wordt wel ondersteund, maar is niet compatibel met AEM functies voor het schrijven van inhoud. Dit druist ook in tegen het beginsel van portability.

Dynamisch routeren

Zoals met het teruggeven, zou al het verpletteren ook dynamisch moeten zijn. In AEM, zou de SPA altijd het verpletteren moeten bezitten en AEM aan het luistert en inhoud haalt die op het wordt gebaseerd.

Om het even welk statisch verpletterend werk tegen het beginsel van portability en beperkt de auteur door niet compatibel te zijn met de eigenschappen van de inhoudcreatie van AEM. Bijvoorbeeld, met het statische verpletteren, als de inhoudsauteur een route zou willen veranderen of een pagina zou veranderen, zou hij of zij de front eindontwikkelaar moeten vragen om het te doen.

Ontwerpmodellen SPA

Als de principes van het ontwikkelen van SPA in AEM worden gevolgd, dan zal uw SPA met alle gesteunde AEM tevreden auteurseigenschappen functioneel zijn.

Er kunnen zich echter gevallen voordoen waarin dit niet volledig noodzakelijk is. In de volgende tabel vindt u een overzicht van de verschillende ontwerpmodellen, hun voordelen en hun nadelen.

Ontwerpmodel
Voordelen Nadelen
AEM wordt gebruikt als een CMS zonder kop zonder het SPA framework van SDK van de Editor te gebruiken. De front-end ontwikkelaar heeft volledige controle over de app.

Inhoudsauteurs kunnen geen gebruik maken van AEM ervaring voor het schrijven van inhoud.

De code is noch draagbaar noch herbruikbaar als het statische verwijzingen of het verpletteren bevat.

Hiermee wordt het gebruik van de sjablooneditor niet toegestaan, zodat de ontwikkelaar van de front-end via het JCR bewerkbare sjablonen moet bijhouden.

De front-end ontwikkelaar gebruikt het SPA Editor SDK-framework, maar opent slechts enkele gebieden voor de auteur van de inhoud. De ontwikkelaar behoudt de controle over de app door alleen authoring in beperkte delen van de app in te schakelen.

Inhoudsauteurs zijn beperkt tot een beperkt aantal AEM toepassingen voor het schrijven van inhoud.

De code riskeert noch draagbaar noch herbruikbaar als het statische verwijzingen of het verpletteren bevat.

Hiermee wordt het gebruik van de sjablooneditor niet toegestaan, zodat de ontwikkelaar van de front-end via het JCR bewerkbare sjablonen moet bijhouden.

In het project wordt de SDK van de SPA Editor volledig benut en worden de frontendcomponenten ontwikkeld als een bibliotheek en wordt de inhoudsstructuur van de app gedelegeerd aan AEM.

De app is herbruikbaar en draagbaar.

De auteur van de inhoud kan de app bewerken met AEM ervaring voor het schrijven van inhoud.

De SPA is compatibel met de sjablooneditor.

De ontwikkelaar heeft geen controle over de structuur van de app en het gedeelte van de inhoud dat aan AEM is gedelegeerd.

De ontwikkelaar kan gedeelten van de app nog steeds reserveren voor de inhoud die niet is bedoeld om te worden gemaakt met AEM.

OPMERKING

Hoewel alle modellen in AEM worden gesteund, slechts door de derde (en daardoor volgend de geadviseerde SPA ontwikkelingsprincipes in AEM) zullen de inhoudauteurs met de inhoud van de SPA in AEM kunnen in wisselwerking staan en uitgeven aangezien zij gewend zijn.

Bestaande SPA migreren naar AEM

In het algemeen als uw SPA de SPA Ontwikkelingsprincipes voor AEM volgt, zal uw SPA in AEM werken en bewerkbaar zijn gebruikend de AEM Redacteur SPA.

Ga als volgt te werk om uw bestaande SPA klaar te maken voor AEM.

  1. Maak uw componenten JS modulair.

    Zorg ervoor dat ze in elke volgorde, positie en grootte kunnen worden gerenderd.

  2. Gebruik de containers die worden geleverd door de SDK om uw componenten op het scherm te plaatsen.

    AEM biedt een pagina- en alineasysteem voor gebruik.

  3. Maak een AEM component voor elke JS-component.

    De AEM componenten bepalen de dialoog en output JSON.

Instructies voor front-end ontwikkelaars

De belangrijkste taak bij het inschakelen van een front-end ontwikkelaar om een SPA voor AEM te creëren is het eens te worden over de componenten en hun JSON-modellen.

Hieronder volgt een overzicht van de stappen die een front-end ontwikkelaar moet volgen bij het ontwikkelen van een SPA voor AEM.

  1. Onderdelen en hun JSON-model overeenkomen

    Voor-eind ontwikkelaars en achterste AEM ontwikkelaars moeten het eens zijn over welke componenten noodzakelijk en een model zodat is er één-op-één gelijke van SPA componenten aan de achterste eindcomponenten.

    AEM componenten zijn nog steeds nodig, vooral om te zorgen voor bewerkingsdialoogvensters en om het componentmodel te exporteren.

  2. In React componenten, heb toegang tot het model viathis.props.cqModel

    Zodra de componenten worden overeengekomen en het model JSON op zijn plaats is, is de front-end ontwikkelaar vrij om de SPA te ontwikkelen en kan eenvoudig tot het model JSON via this.props.cqModel toegang hebben.

  3. De render() methode van de component implementeren

    De front-end ontwikkelaar implementeert de render() methode aangezien hij/zij geschikt acht en kan de gebieden van het cqModel bezit gebruiken. Hiermee worden het DOM en de HTML-fragmenten uitgevoerd die in de pagina worden ingevoegd. Dit is de standaardmanier om een app te maken in React.

  4. Wijs de component aan het AEM middeltype via toeMapTo()

    De afbeelding slaat componentenklassen op en wordt intern door de verstrekte Container component gebruikt om componenten terug te winnen en dynamisch te concretiseren die op het bepaalde middeltype worden gebaseerd.

    Dit dient als de "lijm"tussen voorkant en achtereind zodat weet de redacteur aan welke componenten de reactiecomponenten beantwoorden.

    De Page en ResponsiveGrid zijn goede voorbeelden van klassen die de basis Container uitbreiden.

  5. De parameter van de component definiëren EditConfig als parameter voorMapTo()

    Deze parameter is noodzakelijk om de redacteur te vertellen hoe de component zou moeten worden genoemd zolang bij nog niet wordt teruggegeven of geen inhoud heeft om terug te geven.

  6. De opgegeven Container klasse uitbreiden voor pagina's en containers

    Pagina- en alineasystemen moeten deze klasse uitbreiden, zodat delegatie naar binnencomponenten naar behoren werkt.

  7. Voer een verpletterende oplossing uit die het gebruiken van HTML5 History API.

    Wanneer ModelRouter wordt toegelaten, zal het roepen van pushState en replaceState functies een verzoek aan PageModelManager teweegbrengen om een ontbrekend fragment van het model te halen.

    De huidige versie van ModelRouter steunt slechts het gebruik van URLs die aan de daadwerkelijke middelweg van de Invoerpunten van het Sling Model richt. Het steunt niet het gebruik van vanity URLs of aliassen.

    ModelRouter kan worden onbruikbaar gemaakt of worden gevormd om een lijst van regelmatige uitdrukkingen te negeren.

AEM-agnost

Deze codeblokken illustreren hoe uw React en Angular componenten niets nodig hebben dat Adobe of AEM specifiek is.

  • Alles wat zich in de JavaScript-component bevindt, is AEM-agnostisch.
  • Nochtans specifiek voor AEM is dat de component JS aan een AEM component met de hulp moet worden in kaart gebracht MapTo.

screen_shot_2018-12-11at144019

De MapTo helper is de "lijm"die de achterkant en de front-end componenten toestaat om samen te passen:

  • Het vertelt de container JS (of JS paragraafsysteem) welke component JS voor het teruggeven van elk van de componenten verantwoordelijk is die in JSON aanwezig zijn.
  • Er wordt een HTML-gegevenskenmerk toegevoegd aan de HTML die de JS-component rendert, zodat de SPA Editor weet welk dialoogvenster aan de auteur moet worden weergegeven wanneer de component wordt bewerkt.

Voor meer informatie over het gebruiken van MapTo en het bouwen van SPA voor AEM in het algemeen, zie de Aan de slag gids voor uw gekozen kader.

AEM Architectuur en SPA

De algemene architectuur van AEM, inclusief ontwikkelings-, auteurs- en publicatieomgevingen, verandert niet wanneer u SPA gebruikt. Het is echter nuttig te begrijpen hoe SPA ontwikkeling in deze architectuur past.

screen_shot_2018-12-11at145348

  • Build-omgeving

    Dit is waar de bron voor de SPA toepassingsbron en componentenbron wordt uitgecheckt.

    • De NPM clientlib generator leidt tot een cliëntbibliotheek van het SPA project.
    • Deze bibliotheek wordt door Maven genomen en samen met de component geïmplementeerd door de Maven Build-plug-in bij de AEM-auteur.
  • AEM-auteur

    Inhoud wordt gemaakt op de AEM auteur, inclusief SPA.

    Wanneer een SPA wordt bewerkt met de SPA Editor in de ontwerpomgeving:

    1. De SPA vraagt om de buitenste HTML.
    2. De CSS is geladen.
    3. Het JavaScript-bestand van de SPA toepassing wordt geladen.
    4. Wanneer de SPA toepassing wordt uitgevoerd, wordt de JSON opgevraagd, zodat de app het DOM van de pagina kan maken met de kenmerken cq-data.
    5. Met deze cq-data-kenmerken kan de editor aanvullende pagina-informatie laden, zodat deze weet welke bewerkingsconfiguraties beschikbaar zijn voor de componenten.
  • AEM-publicatie

    Dit is waar de authored inhoud en de gecompileerde bibliotheken met inbegrip van SPA toepassingsartefacten, clientlibs, en componenten voor openbare consumptie worden gepubliceerd.

  • Dispatcher/CDN

    De verzender fungeert als de cachelaag van AEM voor bezoekers van de site.

    • Verzoeken worden op dezelfde manier verwerkt als aanvragen bij de AEM-auteur. Er is echter geen verzoek om de pagina-informatie, omdat dit alleen nodig is voor de editor.
    • JavaScript, CSS, JSON en HTML worden in cache geplaatst, waardoor de pagina wordt geoptimaliseerd voor snelle levering.
OPMERKING

In AEM is het niet nodig om JavaScript-bouwmechanismen uit te voeren of om JavaScript zelf uit te voeren. AEM alleen de gecompileerde artefacten van de SPA toepassing.

Volgende stappen

Voor een overzicht van hoe een eenvoudige SPA in AEM gestructureerd is en hoe het werkt, zie de begonnen gids voor zowel Reageren als Angular.

Voor een geleidelijke gids voor het creëren van uw eigen SPA, zie Begonnen het worden met de AEM SPA Redacteur - WKND de Zelfstudie van Gebeurtenissen.

Zie het artikel Dynamisch model aan componenttoewijzing voor SPA voor meer informatie over het dynamische model aan componenttoewijzing en hoe het werkt binnen SPA in AEM.

Als u SPA in AEM voor een kader buiten React of Angular wilt uitvoeren of eenvoudig een diepe duik in willen nemen hoe de SPA SDK voor AEM werkt, verwijs naar SPA Blauwdruk artikel.

Op deze pagina