Erstellen von Single Page Applications (SPAs) mit AEM

Letzte Aktualisierung: 2023-07-20
  • Erstellt für:
  • Developer

In dieser fakultativen Fortsetzung der AEM Headless-Developer-Journey, Hier erfahren Sie, wie Adobe Experience Manager (AEM) die Headless-Bereitstellung mit herkömmlichen Full-Stack-CMS-Funktionen kombinieren kann und wie Sie bearbeitbare SPA mit AEM Editor-Framework erstellen und externe SPA integrieren können, um Bearbeitungsfunktionen nach Bedarf zu ermöglichen.

Die bisherige Entwicklung

An dieser Stelle sollten Sie die gesamte AEM Headless-Entwickler-Tour abgeschlossen haben und die Grundlagen der Headless-Bereitstellung in AEM verstehen, einschließlich folgender Punkte:

  • Unterschied zwischen Headless- und Headful-Inhaltsbereitstellung
  • AEM Headless-Funktionen
  • Organisieren eines AEM-Headless-Projekts
  • Erstellen von Headless-Inhalten in AEM
  • Abrufen und Aktualisieren von Headless-Inhalten in AEM
  • Live-Schaltung mit einem AEM Headless-Projekt

Also sind Sie jetzt entweder mit Ihrem ersten AEM Headless-Projekt live gegangen oder haben das Wissen, dies zu tun. Herzlichen Glückwunsch!

Warum lesen Sie also diese optionale Fortsetzung der Tour? Wahrscheinlich erinnern Sie sich daran in der Erste Schritte, gab es eine kurze Diskussion darüber, wie AEM nicht nur Headless-Versand und herkömmliche Full-Stack-Modelle unterstützt, sondern auch Hybridmodelle unterstützen kann, die die Vorteile beider Modelle kombinieren. Obwohl es sich hierbei nicht um das traditionelle Headless-Modell handelt, können derartige Hybridmodelle für bestimmten Projekte eine beispiellose Flexibilität bieten.

Dieser Artikel baut auf Ihren Kenntnissen von AEM Headless auf, indem Sie eingehend untersuchen, wie Sie Ihre eigenen Single-Page-Anwendungen (SPA) erstellen können, die in AEM bearbeitbar sind. Auf diese Weise können Sie Inhalte erstellen und sie an einen SPA senden, dieser SPA bleibt jedoch in AEM bearbeitbar.

Ziel

In diesem Dokument erfahren Sie, wie Single Page Applications mithilfe des AEM SPA Editor-Frameworks entwickelt werden. Nach dem Lesen dieses Dokuments sollten Sie Folgendes können:

  • Verständnis der grundlegenden Funktion des SPA-Editors
  • Kenntnis der Anforderungen zum Erstellen vollständig bearbeitbarer SPAs für AEM
  • Kenntnis darüber, wie externe SPAs in AEM integriert werden können
  • Erfahren Sie, wie serverseitiges Rendering implementiert werden sollte oder nicht.

Anforderungen und Vorbedingungen

Es gibt mehrere Anforderungen, bevor Sie mit der Arbeit mit SPA in AEM beginnen.

Kenntnisse

  • Entwicklungserlebnis beim Erstellen von SPA mit React- oder Angular-Frameworks
  • Grundlegende AEM-Kenntnisse zum Erstellen von Inhaltsfragmenten und Verwenden des Editors
  • Überprüfen Sie unbedingt das Dokument. Headless und Headless in AEM um die verschiedenen Ebenen der möglichen SPA zu verstehen.

Tools

  • Sandbox-Zugriff zum Testen der Bereitstellung Ihres Projekts
  • Lokale Entwicklungsinstanz für Datenmodellierung und -tests
  • Vorhandene externe SPA (optional, je nach ausgewähltem Integrationsmodell)
  • AEM-Projektarchetyp

Was ist eine SPA?

Eine Einzelseitenanwendung (SPA) unterscheidet sich von einer herkömmlichen Seite insofern, als sie Client-seitig gerendert wird und primär JavaScript-gesteuert ist. Dabei wird auf Ajax-Aufrufe zurückgegriffen, um Daten zu laden und die Seite dynamisch zu aktualisieren. Der Großteil der Inhalte oder alle Inhalte werden einmal in einem einzelnen Seiten-Load abgerufen, wobei je nach Benutzerinteraktion mit der Seite asynchron zusätzliche Ressourcen geladen werden.

So wird der Bedarf nach Seitenaktualisierungen reduziert und dem Benutzer ein Erlebnis präsentiert, das nahtlos und schnell ist und eher wie eine native App funktioniert.

Der AEM-SPA-Editor ermöglicht es Frontend-Entwicklern, SPAs zu erstellen, die sich in eine AEM-Site integrieren lassen, damit Inhaltsautoren SPA-Inhalte so einfach bearbeiten können wie andere AEM-Inhalte.

Warum eine SPA?

Da eine SPA schneller, nahtloser und eher wie eine native Anwendung ist, wird sie nicht nur für den Besucher der Webseite, sondern auch für Marketing-Experten und Entwickler attraktiv, da SPA funktioniert.

Eine vollständige Beschreibung von SPAs sowie Gründe für ihre Verwendung finden Sie im Abschnitt Zusätzliche Ressourcen mit Links zu ausführlicheren Dokumentationen.

Wie AEM SPAs verarbeitet

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 und einige AEM-spezifische Prinzipien befolgen, wird Ihre SPA mit AEM und den Inhaltsbearbeitungsfunktionen funktionieren.

  • Portabilität: Wie alle anderen Komponenten auch sollten die SPA-Komponenten so portabel wie möglich gestaltet werden. Die SPA sollte aus portablen und wiederverwendbaren Komponenten bestehen.
  • 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: Alle Rendering-Vorgänge sollten dynamisch sein.
  • Dynamisches Routing: Die SPA ist für das Routing verantwortlich; AEM lauscht darauf und ruft Inhalte auf dieser Basis ab. Jegliches Routing sollte ebenfalls dynamisch sein.

Eine vollständige Beschreibung, wie AEM SPAs verarbeitet, finden Sie im Abschnitt Zusätzliche Ressourcen mit Links zu ausführlicheren Dokumentationen.

Der SPA-Editor von AEM

Sites, die mit gängigen SPA-Frameworks wie React und Angular erstellt wurden, laden ihren Inhalt über dynamisches JSON und weisen nicht die HTML-Struktur auf, die für den Seiteneditor von AEM erforderlich ist, um Steuerelemente zur Bearbeitung platzieren zu können.

Um die Bearbeitung von SPA in AEM zu aktivieren, ist eine Zuordnung zwischen der JSON-Ausgabe der SPA und dem Inhaltsmodell im AEM Repository erforderlich, um Änderungen am Inhalt zu speichern.

SPA Unterstützung in AEM führt eine dünne JS-Ebene ein, die mit dem SPA JS-Code interagiert, wenn sie im Seiteneditor geladen wird, mit dem Ereignisse gesendet werden können und der Speicherort für die Bearbeitungssteuerelemente aktiviert werden kann, um eine kontextbezogene Bearbeitung zu ermöglichen. Diese Funktion baut auf dem Content Services API-Endpoint-Konzept auf, da der Inhalt aus dem SPA über Content Services geladen werden muss.

Eine vollständige Beschreibung des AEM-SPA-Editors finden Sie im Abschnitt Zusätzliche Ressourcen mit Links zu ausführlicheren Dokumentationen.

Berücksichtigung vorhandener SPAs

Wenn Sie über eine vorhandene SPA verfügen, unterstützt AEM das Einbetten in AEM, damit diese für Ihre Inhaltsautoren im AEM Editor sichtbar ist. Dies kann nützlich sein, um die Inhalte anzuzeigen, die über Inhaltsfragmente im Kontext der Endanwendung erstellt werden, in der sie verwendet werden.

Außerdem können Sie mit nur kleinen Änderungen bestimmte Bearbeitungen für die externe SPA im AEM Editor aktivieren.

Die RemotePage-Komponente ermöglicht das Rendern externer SPAs in AEM.

Eine vollständige Beschreibung dazu, wie sich externe SPAs in AEM bearbeiten lassen, finden Sie im Abschnitt Zusätzliche Ressourcen mit Links zu ausführlicheren Dokumentationen.

Wie geht es weiter

Lesen Sie die folgenden Dokumente, um mit der Entwicklung Ihrer eigenen SPAs für AEM zu beginnen:

Wenn Sie eine vorhandene SPA anpassen müssen, um sie in AEM zu verwenden, lesen Sie die folgenden Dokumente:

Nachfolgend finden Sie zusätzliche Ressourcen mit weiterführenden Informationen zu SPA-Themen in AEM.

Zusätzliche Ressourcen

Im Folgenden finden Sie einige zusätzliche Ressourcen, die näher auf einige der in diesem Dokument erwähnten Konzepte eingehen.

Vorherige Seite
Next page

Auf dieser Seite