Drupal 8 + React. Decoupled (headless) vs. Progressively Decoupled

In letzter Zeit besuchte ich viele Drupal Events, schaute Präsentationen und Videos an, laß Artikel auf dem Drupal Community Blog – und bemerkte schließlich, dass Keywords wie “entkoppelt”, “headless” oder “schrittweise entkoppelt” große Aufmerksamkeit geschenkt wurde.

Ich stellte fest, wie die größten Drupal Unternehmen anfingen Success-Stories ihrer Kunden über entkoppelte Drupal Websites, deren Vorteile, sowie Probleme während der Entwicklungsphase, zu teilen. 

Ich wollte diesen großen Hype nicht verpassen und begann daher mein Wissen in diesem Bereich zu erweitern und zu lernen, wie man das stärkste CMS mit einem der bekanntesten Javascript Bibliotheken verbinden kann.

In diesem Beitrag werde ich mein Wissen und meine wichtigsten Erkenntnisse mit Euch teilen.

Ein kurzes Intro

Lasst uns mit einer kleinen Einführung zu folgenden zwei herausragenden Tools starten. Drupal ist ein Content Management System (CMS) mit leistungsstarker API für Web Services. React ist eine JavaScript Bibliothek, die eine kinderleichte Erstellung von interaktiven Benutzeroberflächen ermöglicht.

Decoupled (headless) vs. Progressively Decoupled

Während ich das Thema eingehend studierte stellte ich fest, dass es zwei Möglichkeiten gibt, Drupal 8 und React miteinander zu benutzen.  

Eine “Entkoppelte (headless)” Anwendung interagiert mit Drupal nur über eine Web Services API um Content zu laden oder Benutzer zu authentifizieren. In anderen Worten: Es ist eine eigenständige React Anwendung welche Endpunkte der Drupal 8 Services API benutzt.

2. Eine “Schrittweise entkoppelte” Anwendung benutzt das Drupal Theme, Layout (Blöcke, Regionen etc.), Ansichten, Anzeigen usw.

Es handelt sich hierbei also um eine reguläre Drupal 8 Installation mit einigen entkoppelten Komponenten. Diese sind etwa eine Liste an Artikeln, ein Einreichungsformular oder auch komplexere Teile einer Website. 
Entkoppelt (headless)

Lasst uns nun tiefer in die Materie gehen und einige grundlegende Aspekte eines entkoppelten (kopflosen) Ansatzes untersuchen. Dieser Ansatz funktioniert hervorragend für Entwicklerteams, die bereits vertraut mit der Funktionsweise von Reactjs sind. 

Frontend Entwickler haben uneingeschränkte Kontrolle über das Layout, wobei Seitenadministratoren Drupal Regionen nicht benutzen, sowie keinen Block in einer Region platzieren oder neu anordnen können.

Frontend Entwickler können die Tools verwenden, mit denen sie vertraut sind und müssen nicht lernen, wie man innerhalb des Drupal Themes arbeitet.

Schrittweise entkoppelt:
Ein paar grundlegende Aspekte dieses Ansatzes:

Keine Notwendigkeit sich über serverseitiges Rendering Gedanken zu machen (meistens aus SEO-Gründen). Sie können die eingebauten leistungsstarken Tools von Drupal für Layout, Ansichten, Anzeigen etc. nutzen.

Sollten Sie alle CRUD Aktionen (Create, Read, Update und Delete) verwenden wollen, können Sie das CSRF-Sitzungstoken zur Authentifizierung verwenden. In einem anderen Fall müssen Sie „OAuth“ oder ein ähnliches Berechtigungs-Framework einrichten.
 
Welche Methode ist besser für Ihr Projekt geeignet? 
 
Es ist offensichtlich, dass beide Methoden Ihre Vor- und Nachteile haben. Allerdings sollten Sie beachten, dass Sie die Entscheidung für die ein oder andere Methode direkt am Anfang treffen sollten. So können Sie Probleme wie Over-Engineering vermeiden.

Die Entscheidung sollte für jedes Projekt individuell getroffen werden, folgende Fragen können allerdings bei der Entscheidungsfindung helfen.

Die erste Frage lautet: 

Basiert Ihr existierendes Projekt auf Drupal? 

Wenn Sie diese Frage bejahen können, sollten Sie bei dem Ansatz des “schrittweisen entkoppeln” bleiben und React weiterhin nur für einige Website-Komponenten nutzen ohne dabei eingebaute Drupal Tools (Layouts, Ansichten, Anzeigen etc.) auszuschließen.
 
Sollten Sie diese Frage mit “nein” beantworten, stellen sich einige Fragen von größerer Bedeutung:

Sind die Anforderungen an das Front-End sehr strikt, d.h. die Entwickler wollen den Umgang mit Drupal unter keinen Umständen lernen? Hat Ihr Back-End Entwicklerteam Drupal Erfahrung? 

Verfügt Ihre Website über mehrere Integrationen (einige Daten aus Inhaltsverzeichnissen, Medienverwaltungssystemen, sozialen Medien usw.)?

Verfügt Ihre Website über mehr als einen Verbraucher (eine Anwendung die von der Website bereitgestellte Inhalte verwendet) und diese Inhalte sollen zur selben Zeit veröffentlicht werden?

Sind Sie sicher, dass Ihre Website keine Drupal-eigenen Tools wie Layouts, Ansichten, Anzeigen etc. erfordert? 

Wenn Sie dem Großteil der Antworten auf diese Fragen zustimmen konnte und Sie denken, dass Sie oder Ihr Team die passenden Fähigkeiten haben dann…

Lassen Sie uns entkoppeln!