Entwickeln von SPAs für AEM developing-spas-for-aem
Single Page Applications (SPAs) können ansprechende Erlebnisse für Website-Benutzer bieten. Entwickler möchten Sites mit SPA Frameworks erstellen können und Autoren möchten Inhalte in AEM für eine Site, die mit solchen Frameworks erstellt wurde, nahtlos bearbeiten.
Dieser Artikel behandelt wichtige Aspekte, die zu beachten sind, wenn ein Frontend-Entwickler damit beauftragt wird, eine SPA für AEM zu entwickeln. Zudem erhalten Sie einen Überblick über die Architektur von AEM mit Blick auf die Implementierung von SPAs in AEM.
AEM-Projektarchetyp aem-project-archetype
Für jedes AEM-Projekt sollte der AEM-Projektarchetyp genutzt werden, der SPA-Projekte mithilfe von React oder Angular unterstützt und das SPA-SDK verwendet.
SPA-Entwicklungsgrundsätze für AEM spa-development-principles-for-aem
Bei der Entwicklung von Single Page Applications in AEM wird davon ausgegangen, dass sich der Frontend-Entwickler beim Erstellen einer SPA an die üblichen Best Practices hält. Wenn Sie als Frontend-Entwickler diese allgemeinen Best Practices sowie einige AEM-spezifische Prinzipien befolgen, wird Ihre SPA mit AEM und seinen Inhaltsverfassungsfunktionen zusammenarbeiten.
- Portabilität: Wie alle anderen Komponenten auch sollten die Komponenten so portabel wie möglich gestaltet werden. Die SPA sollte mit portablen und wiederverwendbaren Komponenten erstellt werden, wobei statische Pfade vermieden werden, die auf die Inhaltsstruktur verweisen.
- AEM verwaltet die Site-Struktur - Der Frontend-Entwickler erstellt Komponenten und ist für ihre interne Struktur verantwortlich, verlässt sich jedoch bei der Definition der Inhaltsstruktur der Site auf AEM.
- Dynamisches Rendering - Das gesamte Rendering sollte dynamisch sein.
- Dynamisches Routing - Der SPA ist für das Routing verantwortlich, überwacht AEM und ruft die Komponentendaten auf dieser Basis ab. Jegliches Routing sollte ebenfalls dynamisch sein.
Wenn Sie sich bei der Entwicklung Ihrer SPA an diese Grundsätze halten, wird diese so flexibel und zukunftssicher wie möglich sein sowie die Nutzung aller unterstützten AEM Authoring-Funktionen ermöglichen.
Wenn Sie keine Unterstützung für AEM Authoring-Funktionen benötigen, sollten Sie möglicherweise ein anderes SPA-Design-Modell in Betracht ziehen.
Portabilität portability
Wie bei der Entwicklung von Komponenten sollten Ihre Komponenten so gestaltet sein, dass sie maximale Portabilität aufweisen. Alle Muster, die der Portabilität oder Wiederverwendbarkeit der Komponenten zuwiderlaufen, sollten vermieden werden, um Kompatibilität, Flexibilität und Wartbarkeit in Zukunft zu garantieren.
Der Entwickler sollte vermeiden, statische Pfade zu verwenden, die auf die Inhaltsstruktur verweisen, da Pfade von den Inhaltsautoren jederzeit geändert werden können. Dies schränkt auch die Wiederverwendbarkeit der Bibliothek ein und verhindert die Verwendung des AEM-Vorlagen-Editors, da sich seine Struktur an einem anderen Speicherort als dem Inhalt befindet.
Die resultierende SPA sollte mit hochgradig portablen und wiederverwendbaren Komponenten erstellt werden.
AEM verwaltet die Site-Struktur aem-drives-site-structure
Der Frontend-Entwickler muss sich als verantwortlich für die Einrichtung einer Bibliothek mit SPA-Komponenten betrachten, die zum Erstellen der App verwendet werden. Der Frontend-Entwickler hat die vollständige Kontrolle über die interne Struktur der Komponenten. AEM ist jedoch stets für die Struktur der Site verantwortlich.
Das bedeutet, dass der Frontend-Entwickler Kundeninhalte vor oder nach dem Einstiegspunkt der Komponenten hinzufügen und innerhalb der Komponente auch Drittanbieter-Aufrufe durchführen kann. Der Frontend-Entwickler hat jedoch zum Beispiel nicht die volle Kontrolle darüber, wie Komponenten verschachtelt werden.
Dynamisches Rendering dynamic-rendering
Die SPA sollte sich nur auf dynamisches Rendering von Inhalten stützen. Dies ist die Standarderwartung, bei der AEM alle untergeordneten Elemente der Inhaltsstruktur abruft und rendert.
Jedes explizite Rendering, das auf bestimmte Inhalte verweist, gilt als statisches Rendering und wird zwar unterstützt, ist jedoch nicht mit den Inhaltserstellungsfunktionen von AEM kompatibel. Es widerspricht auch dem Grundsatz der Portabilität.
Dynamisches Routing dynamic-routing
Wie beim Rendering auch sollte das gesamte Routing dynamisch sein. In AEM sollte die SPA stets für das Routing verantwortlich sein; AEM lauscht darauf und ruft Inhalte auf dieser Basis ab.
Jedes statische Routing verstößt gegen den Grundsatz der Portabilität und schränkt den Autor ein, da es nicht mit den Inhaltserstellungsfunktionen von AEM kompatibel ist. Bei statischem Routing müsste der Inhaltsautor beispielsweise, wenn eine Route oder Seite geändert werden soll, den Frontend-Entwickler bitten, diese Aufgabe zu übernehmen.
SPA-Design-Modelle spa-design-models
Wenn die Prinzipien der Entwicklung von SPAs in AEM befolgt werden, wird Ihre SPA mit allen unterstützten Inhaltserstellungsfunktionen von AEM zusammenarbeiten.
Es kann jedoch Fälle geben, in denen dies nicht wirklich erforderlich ist. Die folgende Tabelle bietet einen Überblick über die verschiedenen Design-Modelle sowie ihre Vor- und Nachteile.
Migrieren vorhandener SPAs zu AEM migrating-existing-spas-to-aem
Wenn Ihre SPA die SPA-Entwicklungsprinzipien für AEM einhält, funktioniert Ihre SPA in AEM und ist mit dem AEM-SPA-Editor bearbeitbar.
Führen Sie die folgenden Schritte aus, um Ihre bestehende SPA für die Zusammenarbeit mit AEM bereit zu machen.
-
Gestalten Sie Ihre JS-Komponenten modular.
Gestalten Sie sie so, dass sie in beliebiger Reihenfolge, Position und Größe gerendert werden können.
-
Verwenden Sie die von unserem SDK bereitgestellten Container, um Ihre Komponenten auf dem Bildschirm zu platzieren.
AEM bietet eine Seiten- und Absatzsystemkomponente, die Sie verwenden können.
-
Erstellen Sie für jede JS-Komponente eine AEM-Komponente.
Die AEM-Komponenten definieren den Dialog und die JSON-Ausgabe.
Anweisungen für Frontend-Entwickler instructions-for-front-end-developers
Wenn Frontend-Entwicklerinnen und -Entwickler damit beauftragt werden, eine SPA für AEM zu erstellen, besteht die wichtigste Aufgabe darin, sich auf die Komponenten und ihre JSON-Modelle zu einigen.
Im Folgenden werden die Schritte erläutert, die ein Frontend-Entwickler bei der Entwicklung einer SPA für AEM erledigen muss.
-
Einigen Sie sich hinsichtlich der Komponenten und ihrer JSON-Modelle
Frontend-Entwickler und Backend-AEM-Entwickler müssen sich auf die erforderlichen Komponenten und ein Modell einigen, damit eine Eins-zu-Eins-Übereinstimmung der SPA-Komponenten mit den Backend-Komponenten besteht.
AEM-Komponenten sind weiterhin erforderlich, insbesondere um Bearbeitungsdialogfelder bereitzustellen und das Komponentenmodell zu exportieren.
-
In React-Komponenten greifen Sie auf das Modell zu über
this.props.cqModel
Sobald Komponenten vereinbart sind und das JSON-Modell vorhanden ist, kann der Frontend-Entwickler die SPA entwickeln und über
this.props.cqModel
bequem auf das JSON-Modell zugreifen. -
Implementieren Sie die
render()
-Methode der KomponenteFrontend-Entwicklerinnen und -Entwickler implementieren die
render()
-Methode nach Belieben und können die Felder dercqModel
-Eigenschaft verwenden. Dadurch werden das DOM und die HTML-Fragmente ausgegeben, die in die Seite eingefügt werden. Dabei handelt es sich um die Standardmethode zur Erstellung einer App in React. -
Ordnen Sie die Komponente dem AEM-Ressourcentyp zu via
MapTo()
Die Zuordnung speichert Komponentenklassen und wird von der bereitgestellten
Container
-Komponente intern zum Abrufen und dynamischen Instanziieren von Komponenten basierend auf dem angegebenen Ressourcentyp genutzt.Sie dient als „Kleber“ zwischen Front- und Backend, sodass der Editor weiß, welchen Komponenten die React-Komponenten entsprechen.
Page
undResponsiveGrid
sind gute Beispiele für Klassen, die den grundlegendenContainer
erweitern. -
Definieren Sie den
EditConfig
-Parameter der Komponente alsMapTo()
Dieser Parameter teilt dem Editor mit, wie die Komponente benannt werden soll, solange sie noch nicht gerendert ist oder über keinen zu rendernden Inhalt verfügt.
-
Erweitern Sie die bereitgestellte
Container
-Klasse für Seiten und ContainerSeiten und Absatzsysteme sollten diese Klasse erweitern, damit die Übertragung an innere Komponenten erwartungsgemäß funktioniert.
-
Implementieren Sie eine Routing-Lösung, die die HTML5-
History
-API verwendet.Wenn der
ModelRouter
aktiviert ist, löst der Aufruf der FunktionenpushState
undreplaceState
eine Anfrage an denPageModelManager
aus, ein fehlendes Fragment des Modells abzurufen.Die aktuelle Version von
ModelRouter
unterstützt nur eine Verwendung von URLs, die auf den tatsächlichen Ressourcenpfad von Sling Model-Einstiegspunkten verweisen. Der Einsatz von Vanity-URLs oder Aliasen wird nicht unterstützt.Der
ModelRouter
kann deaktiviert oder so konfiguriert werden, dass eine Liste von regulären Ausdrücken ignoriert wird.
AEM-Agnostik aem-agnostic
Diese Code-Blöcke veranschaulichen, dass Ihre React- und Angular-Komponenten nichts Spezifisches für Adobe oder AEM benötigen.
- Alles, was sich in der JavaScript-Komponente befindet, ist AEM-agnostisch.
- AEM-spezifisch jedoch ist, dass die JS-Komponente mit dem MapTo-Hilfsprogramm einer AEM-Komponente zugeordnet werden muss.
Das MapTo
-Hilfsprogramm ist der „Kleber“, der eine Abstimmung zwischen Backend- und Frontend-Komponenten ermöglicht:
- Es teilt dem JS-Container (oder dem JS-Absatzsystem) mit, welche JS-Komponente für das Rendern der einzelnen Komponenten, die in der JSON vorhanden sind, verantwortlich ist.
- Es wird ein HTML-Datenattribut zum HTML-Code hinzugefügt, das die JS-Komponente rendert, damit der SPA-Editor weiß, welches Dialogfeld dem Autor beim Bearbeiten der Komponente angezeigt werden soll.
Weitere Informationen zum Verwenden von MapTo
und Erstellen von SPAs für AEM im Allgemeinen finden Sie im Handbuch „Erste Schritte“ für Ihr ausgewähltes Framework.
AEM-Architektur und SPAs aem-architecture-and-spas
Die allgemeine Architektur von AEM einschließlich Umgebungen für Entwicklung, Authoring und Veröffentlichung ändert sich bei Verwendung von SPAs nicht. Es ist jedoch hilfreich zu verstehen, wie die SPA-Entwicklung mit dieser Architektur verbunden ist.
-
Build-Umgebung
Hier werden die Quelle für die SPA-Anwendungsquelle sowie die Komponentenquelle ausgecheckt.
- Der NPM-clientlib-Generator erstellt aus dem SPA-Projekt eine Client-Bibliothek.
- Diese Bibliothek wird von Maven verwendet und vom Maven Build-Plugin zusammen mit der Komponente für den AEM Author bereitgestellt.
-
AEM Author
Inhalte werden im AEM Author erstellt, einschließlich der Authoring-SPAs.
Wenn eine SPA in der Authoring-Umgebung mit dem SPA-Editor bearbeitet wird:
- Die SPA fordert den äußeren HTML-Code an.
- Das CSS wird geladen.
- Das JavaScript der SPA-Anwendung wird geladen.
- Sobald die SPA-Anwendung ausgeführt wird, wird die JSON angefordert, damit die App das DOM der Seite einschließlich der
cq-data
-Attribute erstellen kann. - Diese
cq-data
-Attribute ermöglichen es dem Editor, zusätzliche Seiteninformationen zu laden, sodass er weiß, welche Bearbeitungskonfigurationen für die Komponenten verfügbar sind.
-
AEM Publish
Hier werden die erstellten Inhalte und kompilierten Bibliotheken einschließlich SPA-Anwendungsartefakten, clientlibs und Komponenten für den öffentlichen Gebrauch veröffentlicht.
-
Dispatcher/CDN
Der Dispatcher dient für Besucher der Site als Zwischenspeicherebene von AEM.
- Anforderungen werden ähnlich wie im AEM Author verarbeitet, es erfolgt jedoch keine Anforderung der Seiteninformationen, da diese nur vom Editor benötigt werden.
- JavaScript, CSS, JSON und HTML werden zwischengespeichert, wodurch die Seite für eine schnelle Bereitstellung optimiert wird.
Nächste Schritte next-steps
Einen Überblick darüber, wie eine einfache SPA in AEM strukturiert ist und wie sie funktioniert, finden Sie im Erste-Schritte-Handbuch für React und Angular.
Eine schrittweise Anleitung zum Erstellen einer eigenen SPA finden Sie unter Erste Schritte mit dem AEM-SPA-Editor – WKND-Events-Tutorial.
Weitere Informationen zum dynamischen Modell für die Komponentenzuordnung und dazu, wie es mit SPAs in AEM funktioniert, finden Sie im Artikel Dynamisches Modell für die Komponentenzuordnung bei SPAs.
Wenn Sie SPAs in AEM für ein anderes Framework als React oder Angular implementieren oder einfach nur tief in die Funktionsweise des SPA-SDK für AEM eintauchen möchten, lesen Sie den Artikel SPA Blueprint.