Wie Magnolia CMS die Entwicklung einer Headless SPA ermöglicht

Single-Page-Apps (SPAs) sind sowohl bei Entwicklern als auch bei Vermarktern auf dem Vormarsch. Vermarkter werden von den überzeugenden digitalen Erlebnissen angezogen, die mit SPAs möglich sind, während Frontend-Entwickler die heutigen Top-SPA-Frameworks als einfacher zu handhaben empfinden.

Die Herausforderung, vor der viele Unternehmen stehen, ist jedoch die nahtlose Integration der SPAs, die sie bauen, in ihr bestehendes CMS. Aus diesem Grund entwickelt Magnolia Integrationsbibliotheken für die drei gängigsten SPA-Frameworks: Angular, React und Vue. Mithilfe dieser Bibliotheken können Frontend-Entwickler schnell eine Integration mit Magnolia vornehmen, so dass Marketer direkt aus dem CMS heraus Inhalte für SPAs erstellen und veröffentlichen können.

Schauen wir uns an, wie Entwickler npm-Bibliotheken nutzen können, um SPAs zu erstellen, die Inhalte aus dem Magnolia CMS headless abrufen.

Beachten Sie, dass das Magnolia-Feature "Visual SPA Editor" in aktiver Entwicklung ist und voraussichtlich im 2. Quartal 2020 als Core-Feature verfügbar sein wird. Sie können die Technik aber schon jetzt mit einer von unserer Professional Services-Abteilung vorbereiteten Preview-Version des Features ausprobieren.

Viele Unternehmensentwickler bevorzugen Angular, weil es viel zu bieten hat, was die Erstellung von Templates und das Testen von Code ohne Voreinstellungen angeht. Das bedeutet auch, dass Angular das am stärksten meinungsbildende Framework der drei ist und sich stark auf objektorientierte Programmierung stützt. Angular ist ideal für groß angelegte SPAs mit fortgeschrittener Funktionalität.

Sie können die Angular/Magnolia-Integrationsbibliothek mit npm install angular-magnolia in Ihr Angular-Projekt einbinden.

Dann importieren Sie die Bibliotheken AngularMagnoliaModule und MagnoliaContextService in Ihr NgModule. Unter den Importen sollten Sie Ihre aktuelle App-Umgebung mit dem AngularMagnoliaModule teilen. Fügen Sie außerdem den MagnoliaContextService zu den Providern hinzu, damit seine Dienste in Ihrer App global verfügbar sind.

Schließlich müssen Sie Router-Ereignisse in Ihrer AppComponent abonnieren und den MagnoliaContextService mit dem richtigen URL-Fragment aktualisieren, wenn der Benutzer zu verschiedenen Routen navigiert. So stellen Sie sicher, dass Ihre Angular-App und Magnolia CMS synchron bleiben.

Innerhalb Ihrer NgComponents - den Bausteinen einer Angular-App - können Sie Magnolia-Bereiche und -Komponenten definieren, um die App eng mit CMS-Inhalten zu integrieren.

Erstellen Sie zunächst ein neues DOM-Element (z.B. ein einfaches div) und fügen Sie die cmsArea-Direktive, die Ihrer YAML-Definition entspricht, in Ihr Magnolia-Projekt ein. Fügen Sie auch die list-area-Direktive ein, die die Bibliothek anweist, die entsprechenden Komponenten nacheinander anzuzeigen. Sie können dann die Komponenten für diesen Bereich mit der MagnoliaContextService-Methode getAreaContent abrufen. Andernfalls können Sie eine eigene Komponente definieren, indem Sie die Klasse MagnoliaComponent erweitern.

React ist oft das Framework der Wahl für Entwicklungsteams, die eine leichtgewichtige App erstellen müssen und die Flexibilität haben wollen, zusätzliche Module und Bibliotheken nach Bedarf auszuwählen. Das liegt daran, dass das React-Framework von Haus aus klein ist und Entwickler leicht Tools von Drittanbietern integrieren können. React ist ideal für relativ kleine Anwendungen oder plattformübergreifende Anwendungen mit React Native.

Sie können die React/Magnolia-Integrationsbibliothek mit npm install react-magnolia in Ihr React-Projekt einbinden.

Die Konfiguration der Magnolia-Bibliothek für React ist sehr einfach. Sie müssen lediglich eine magnolia.config.js-Datei im Stammverzeichnis Ihrer React-App erstellen. Diese Datei wird verwendet, um Magnolia-Vorlagen auf React-Komponenten abzubilden. Sie können auch die Art und Weise ändern, wie die Bibliothek die untergeordneten Knoten einer Bereichskomponente abruft, wenn die Standardeinstellung nicht Ihren Anforderungen entspricht.

Das react-magnolia-Paket stellt zwei Magnolia-Elemente als React-Komponenten dar: Seiten und Bereiche. Komponenten sind unabhängige, wiederverwendbare UI-Teile, aus denen eine React-App besteht.

Sobald Sie die magnolia.config.js konfiguriert haben, suchen die Seiten anhand dieser Konfigurationsdatei nach der entsprechenden Vorlage und rendern die entsprechende React-Komponente und die ihr zugrunde liegenden Eigenschaften. In ähnlicher Weise suchen Bereiche nach der Vorlage in der Konfigurationsdatei und rendern die entsprechende Bereichskomponente ebenfalls. Das bedeutet, dass die React-App mit den Änderungen, die Marketer in Magnolia vornehmen, synchronisiert bleibt.

Vue wird bei Front-End-Entwicklern, die Einfachheit wünschen, immer beliebter. Das Framework ist das leichtgewichtigste und am einfachsten zu erlernende, wodurch es sich am besten für kleine Anwendungen eignet. Infolgedessen ist es das am wenigsten eigenwillige der drei Frameworks und weniger flexibel als React. Vue ist ideal für sehr kleine Anwendungen oder Prototypen, die schnell gestartet werden müssen.

Sie können die Vue/Magnolia-Integrationsbibliothek mit npm install vue-magnolia in Ihr Vue-Projekt bringen.

Um das Magnolia-Paket verwenden zu können, müssen Sie eine magnolia.config.js-Datei in den Stammordner Ihres Vue-Projekts einfügen. Mit dieser Datei können Sie Magnolia-Vorlagen auf Vue-Komponenten abbilden - wiederverwendbare UI-Elemente. Sie haben auch die Möglichkeit, die Art und Weise zu ändern, wie Bereichskomponenten Kindknoten abrufen, aber für viele Anwendungen wird der Standardansatz funktionieren.

Wenn Sie Ihre Vue-Komponenten erstellen, können Sie sie mit Magnolia-Seiten- und Bereichselementen integrieren. Damit die Bibliothek weiß, auf welches Magnolia-Element sich jede Vue-Komponente bezieht, müssen Sie sie in der magnolia.config.js definieren. Sobald die Komponenten zugeordnet sind, können Entwickler die Vue-App in einer Struktur erstellen, die Magnolia-Benutzern vertraut ist, und Vermarkter können eine Vorschau anzeigen und Inhalte direkt in der Vue-App veröffentlichen.

Die Akzeptanz der wichtigsten SPA-Frameworks wird wahrscheinlich weiter zunehmen, und Headless Content Management ist der beste Weg, um Unternehmen bei der Gestaltung des Kundenerlebnisses zu unterstützen. Diese Bibliotheken vereinfachen die Entwicklung von SPAs, indem sie es Entwicklern ermöglichen, vorgefertigte Framework-Komponenten zu nutzen, die den Magnolia-Seiten, -Bereichen und -Komponenten entsprechen. Das bedeutet, dass es einfach ist, Ihre SPA mit Magnolia-Inhalten in Einklang zu bringen, ohne dass die Entwicklungsteams zusätzlichen Aufwand betreiben müssen. Im Gegenzug können Marketer die SPA intuitiv innerhalb der CMS-Oberfläche verwalten. Dazu gehört auch das Erstellen, Bearbeiten und Vorschauen von Inhalten, die direkt in der SPA-App über Headless Content Delivery veröffentlicht werden.

Magnolia hat sich zum Ziel gesetzt, die Entwicklung für Unternehmen zu vereinfachen, damit sie ihre Anwendungen schneller und zu geringeren Kosten auf den Markt bringen können. Aus diesem Grund haben wir entwicklerfreundliche Funktionen für Headless Content Management, leichte Entwicklungsfunktionen und die neuesten SPA-Integrationsbibliotheken entwickelt. Aber das ist noch nicht alles: Halten Sie in naher Zukunft Ausschau nach weiteren entwicklerfreundlichen Funktionen. Magnolia wird Ihre digitalen Ambitionen beschleunigen.