Alles, was Sie über Decoupled Drupal wissen müssen!

Es ist schon eine Weile her, dass Decoupled Drupal zu einem viel diskutierten Begriff geworden ist. Dieser API-First-Ansatz mit der Technologie "Einmal erstellen, überall veröffentlichen", bei der der Inhalt von der Präsentationsebene getrennt wird, hat der Webtechnologie neue Dimensionen eröffnet.

Aber was bedeutet das wirklich für einen Webentwickler oder einen Marketer?

Es bedeutet, dass Sie die Möglichkeit haben, Inhalte für eine Vielzahl von Bildschirmen und Technologien wie Alexa, Fitbit-Tracker oder Digital-Signage-Systeme zu erstellen und zu veröffentlichen. (Sie haben die Macht!)

Decoupled Drupal trennt Ihre Front-End-Erlebnisse vom Backend-CMS.

Wie?

Finden wir es heraus! Aber zuerst...

Was ist ein Decoupled Drupal?

Das Konzept der Entkopplung impliziert die separate Verwaltung verschiedener Inhaltsebenen mit einer agnostischen Präsentationsebene. Genauer gesagt, ist es die Kommunikation zwischen Backend und Frontend über eine API.

Eine so förmliche Architektur, oder?

Drupal kann auf zwei Arten entkoppelt werden:

• Progressiv

Progressive Entkopplung ermöglicht es, das Rendering-System von Drupal mit der gleichzeitigen Verwendung von JavaScript-Frameworks wie React und Angular zu nutzen, um die clientseitige Interaktivität für eine umfassende Benutzererfahrung zu verbessern.

Es ist ein attraktiver Ansatz, der sowohl Redakteuren als auch Entwicklern wichtige Funktionen bietet. Für Entwickler bringt die progressive Entkopplung einen Abschnitt der Seite in das JavaScript-Framework, sodass sie ihre eigene Geschwindigkeit beibehalten können, während die Site-Assembler entsperrt bleiben.

Während kontextbezogene Schnittstellen, Content-Workflow, Site-Vorschau und andere Funktionen weiterhin nutzbar und in Drupal als Ganzes integriert sind, ist dies hauptsächlich für alle Content-Redakteure gedacht.

• Vollständig

Eine vollständig entkoppelte Methode klingt in der Theorie ausgezeichnet und kann für die richtige Art von Anwendung einen enormen Vorteil darstellen. Die vollständige Entkopplung beinhaltet eine vollständige Trennung zwischen dem Front- und Backend von Drupal, bei der die Twig-Theme-Ebene vollständig durch eine andere Frontend-Technologie ersetzt wird. Kurz gesagt, die vollständige Entkopplung ist so, als würde man seine Web-Erfahrung als eine weitere Anwendung betrachten, die bereitgestellt werden muss.

Sollten Sie Drupal entkoppeln?

Es müssen eine Reihe von Fragen gestellt werden. Die Antwort darauf, ob Sie ein entkoppeltes Website-Setup haben sollten, ist etwas komplizierter als ein einfaches Ja oder Nein. Um alles zusammenzufassen:

Die Entkopplung einer Drupal-Website ist geeignet für	Die Entkopplung einer Drupal-Website ist nicht geeignet für
Erstellung wiederverwendbarer Designs	Sicherheit und Eingabe-Validierung
Neugestaltung der Struktur einer Website	Reduzierung der Gesamtkomplexität
Verbessert die Benutzererfahrung	Ein Team, das mit den Frontend-Lösungen nicht vertraut ist
Zukunftssichere Gestaltung einer Website	Kontextbezogene Bearbeitung und Administration

Wann sollten Sie entkoppeln?

Bei dieser Frage ist es wichtig zu fragen: "Was versuchen Sie zu bauen?"

1. Wenn die Idee darin besteht, mehrere Erlebnisse zu schaffen (wie für Web, Mobile, IoT usw.), dann können Sie Drupal verwenden, um Webdienst-APIs bereitzustellen, die Inhalte für andere Erlebnisse bereitstellen. Andere Erlebnisse wie:
    
   • Content-Repository ohne öffentlich zugängliche Komponente
   • eine traditionelle Website, die gleichzeitig ein Content-Repository ist.
      
2. Letztendlich bestimmen die Bedürfnisse des Endbenutzers die Nützlichkeit von Decoupled Drupal. Es gibt keinen technischen Grund für eine Entkopplung, wenn Sie eine eigenständige Website erstellen, die redaktionelle Funktionen erfordert.
    
3. Achten Sie genau auf die Anforderungen Ihrer Redakteure und stellen Sie sicher, dass Sie keine wichtigen Funktionen entfernen, indem Sie den entkoppelten Ansatz verwenden. Ebenso können Sie die Entkopplung von Drupal nicht zurückziehen, wenn Sie es als Content-Repository für IoT- oder native Anwendungen verwenden.
    
4. Drupal erleichtert die Erstellung von Anwendungen, wenn es entkoppelt ist. Selbst wenn Sie Drupal als Content-Repository verwenden, um Inhalte für andere Anwendungen bereitzustellen, senken gut verstandene Spezifikationen wie JSON API, GraphQL und OpenAPI effizient die Lernkurve und öffnen die Tür zu Tooling-Ökosystemen.

Warum ist Drupal eine gute Option für die Entkopplung?

• Es ist API First und nicht nur API

API First bezieht sich auf die Interaktion zwischen einem zentralen Webserver und mehreren anderen Anwendungen, die es den beiden Systemen ermöglicht, Daten über ein Netzwerk auszutauschen. Diese Art von Austausch ist nicht nur auf eine Website beschränkt, sondern erstreckt sich auch auf mobile Apps, Internet der Dinge-Geräte und Wearables.

Webdienste als sich entwickelnde Technologie bieten so viele Möglichkeiten, aber diejenige, die sich als Gewinner herausstellt, ist die RESTful API. Representational State Transfer (REST) ermöglicht die Kommunikation zwischen Geräten wie Computern, Telefonen, Bankensystemen, Fernsehern und IoT-Geräten, die über das Standard-HTTP-Protokoll mit einem Netzwerk verbunden werden. Es ist einer der führenden API-Ansätze für Webdienste aufgrund seiner breiten Akzeptanz im Web.

Darüber hinaus ist Drupal auch für nicht-RESTful-Ansätze wie GraphQL aktiviert. Verschiedene beigesteuerte Module ermöglichen es Ihnen, Webdienste zu einer Drupal-Installation hinzuzufügen, ohne Code schreiben zu müssen.

Entwickler können beispielsweise das Services-Modul und das RESTful Web Services-Modul verwenden, um einen Server zu konfigurieren, der es der Drupal-Installation ermöglicht, Daten zu pushen oder zuzulassen, dass Daten bei Bedarf mithilfe der REST-API abgerufen werden. Egal, ob die Aktion gepusht oder gezogen wird, Drupal ist die Services-Ebene.

Mit API-First-Initiativen im Frontend hat Drupal 8.0 den Beginn der Transformation von Drupal zu einer API-First-Plattform markiert. Es bewegt sich ständig in Richtung eines robusten API-First-Ökosystems.

• API kann auf mehrere Konsumenten wachsen

In Anbetracht der Tatsache, dass das Website-Frontend die gleichen APIs wie mobile Apps verwendet, verstehen App-Entwickler, dass sie kein Publikum zweiter Klasse sind. Neue mobile Apps können erstellt werden, ohne tiefen Zugriff auf Backend-Content-Stores zu benötigen. APIs können dokumentiert und Dritten oder der Öffentlichkeit mit wenig Aufwand zugänglich gemacht werden. Dies führt zu Wachstum in Bezug auf mehrere und unabhängige Konsumenten.

• Unterschiedliche Entwicklungsgeschwindigkeiten

Nehmen wir das Beispiel einer Organisation, in der ein Team zwischen Entwicklern mit Frontend-Expertise und anderen, die als Drupal-Entwickler erfahren sind, aufgeteilt ist. Ein Problem im Fortschritt Ihres Projekts entsteht aufgrund der Verringerung der Verständlichkeit zwischen beiden Kompetenzbereichen.

Die vollständige Entkopplung von Drupal ermöglicht es beiden Teams, ihre eigenen Geschwindigkeiten zu verfolgen. Frontend-Entwickler werden nicht mehr durch die Einschränkungen der Drupal-Theme-Ebene behindert und haben die Befugnis, die Kontrolle über alle Markups und Renderings auszuüben. Ebenso müssen sich Drupal-Entwickler keine Sorgen um die Feinheiten des Frontends machen, sondern konzentrieren ihre Aufmerksamkeit stattdessen auf die Erstellung einer robusten RESTful-API.

Heads in Decoupled

Bevor wir uns mit den Herausforderungen des Decoupled Drupal befassen, ist es wichtig, das in die Entkopplung involvierte JavaScript-Framework zu kennen.

• Angular und AngularJS

Dieses JavaScript-basierte Open-Source-Frontend-Framework wird seit einiger Zeit als entkoppeltes Frontend verwendet. Es zielt darauf ab, sowohl die Entwicklung als auch das Testen von Anwendungen zu vereinfachen, indem es ein Framework für Client-seitige Model-View-Controller- und Model-View-ViewModel-Architektur zusammen mit Komponenten bereitstellt, die üblicherweise in einer Rich-Internet-Anwendung verwendet werden.

• ReactJS

Eine weitere JavaScript-Bibliothek, die schnell an Popularität gewonnen hat und für die Erstellung interaktiver UIs bekannt ist. Wenn Sie einfache Ansichten für jeden Zustand in einer Anwendung entwerfen, aktualisiert und rendert ReactJS effizient die richtigen Komponenten, wenn sich die Daten ändern, und verwendet das Konzept des Virtual Dom (In ReactJS ist ein virtuelles DOM-Objekt eine Darstellung eines DOM-Objekts, wie eine leichtgewichtige Kopie.)

Die Bibliothek implementiert eine render()-Methode, die Eingabedaten aufnimmt und das zurückgibt, was angezeigt werden muss. React-Anwendungen erfordern in der Regel die Verwendung zusätzlicher Bibliotheken für Zustandsverwaltung, Routing und Interaktion mit einer API.

• Vue.js

Vue.js, eines der neuesten dieser Frameworks, ist ein Open-Source-Framework, das JavaScript verwendet, um die Entwicklung von Weboberflächen und Single-Page-Anwendungen einfacher zu machen als zuvor.

Die Funktionen von Vue.js gelten als inkrementell anpassbare Architektur, die sich auf deklaratives Rendering und Komponentenkomposition konzentriert.

Die Herausforderungen

• Sicherheit

In der Welt der Webdienste ist eine Cross-Origin-Ressource ein Prozess, der zusätzliche HTTP-Header verwendet, um den Browser aufzufordern, Webanwendungen, die von einem Ursprung aus ausgeführt werden, die Erlaubnis zu erteilen, auf ausgewählte Ressourcen von einem Server mit einem anderen Ursprung zuzugreifen.

In Anbetracht der Sicherheitsfaktoren schränken jedoch alle modernen Webbrowser Cross-Origin-Anforderungen ein, die innerhalb von Skripten initiiert werden. Einfacher ausgedrückt: Es ist Ihnen nicht gestattet, JavaScript zu verwenden, um Daten von einer separaten Domain abzurufen. Die Skripte können nur HTTP-Anforderungen an ihre eigene Domain stellen.

Dies hinterlässt uns mit einem größeren Problem: Wenn Sie eine entkoppelte Website erstellen, die auf einer separaten Domain ausgeführt wird, würde das Frontend keine vorhandenen Tools bedienen. Die Sicherheit von Benutzereingaben wird an diesem Punkt wichtig. Die leistungsstärksten JavaScript-Frameworks und Anwendungs-Frameworks verfügen über Mechanismen zur Abwehr von Cross-Site-Scripting-Angriffen (wie z. B. Eingabe-Validierung). Ein vollständig entkoppeltes Drupal erfordert, dass Sie die Sicherheitsauswirkungen einer Architektur sorgfältig prüfen. Drupal umfasst beispielsweise Text-Validierung und Formularvalidierung standardmäßig für alle Arten von Feldern, aber die Nutzung dieser Funktion erfordert eine gekoppelte Implementierung.

• Routing

Die Redakteure, die das CMS verwenden, verfügen über zahlreiche Routing-Tools. Sie können beispielsweise den URL-Alias für einen bestimmten Knoten konfigurieren. Der URL-Alias ist das Rückgrat und der wichtigste Faktor einer Website. In einer entkoppelten Welt kann dieser vereinfachende Ansatz, der mehrere Komplikationsfaktoren ignoriert, als reines Frontend-Anliegen betrachtet werden.

Komplikationsfaktoren wie - gibt es einen eindeutigen Bezeichner im Alias? Können wir den Inhalt, der mit der Anfrage verbunden ist, ohne einen eindeutigen Bezeichner finden?

Die Antwort darauf ist, dass ja, dies möglich ist, da die URL-Aliaswerte einen eindeutigen Bezeichner haben, der API-Anforderungen einfach macht.

URL-Aliase ermöglichen es den Content-Redakteuren, den Pfad einer Webseite anzugeben, die ein Stück Inhalt darstellt

Als Drupal-Entwickler kontrollieren Sie, dass Sie keinen Unterschied zwischen solchen Inhalten und der Webseite machen, die Drupal automatisch dafür erstellt. Der Grund dafür ist, dass Drupal die Komplexität abdeckt, die mit dem Treffen von Annahmen verbunden ist. Annahmen wie:

1. Es deutet darauf hin, dass Sie eine Webseite für jeden Knoten benötigen. Wobei jeder von diesen einen Pfad node/<nid> zusammen mit einem benutzerdefinierten Pfad (URL-Alias) hat.
2. Dies bedeutet, dass es in Ordnung ist, Präsentationsinformationen im Content-Modell anzuhängen. Es würde es einfach machen, der Twig-Vorlage mitzuteilen, "wie der Inhalt angezeigt werden soll", um ihn so auszuführen, wie es der Redakteur beabsichtigt hat.

Somit wird das Routing in entkoppelten Anwendungen aufgrund von Faktoren wie:

1. Anstelle eines Pfads müssen wir uns an mindestens zwei (einen für das Frontend und einen für das Backend) Router erinnern.
2. Viele Konsumenten können sich für unterschiedliche Routing-Muster entscheiden. Dies kann gemildert werden, indem eine Einigung zwischen den Konsumenten erzielt wird.
    

• Effizienz

Das Argument gegen die Verwendung von End-to-End-Drupal aus Gründen der Seitenladeleistung ist weniger überzeugend, da Drupal 8 Core Cache-Tags oder Metadaten umfasst, mit denen Sie von Drupal verwaltete Abhängigkeiten deklarieren und Cache-Elemente ungültig machen können, die auf granularen Inhalten basieren. Dies präsentiert eine progressive Ladung von Seiten basierend auf der Cache-Fähigkeit einer Seitenkomponente.

Somit kann diese Form des progressiven Ladens basierend auf unterschiedlicher Cache-Fähigkeit nicht als Funktion in einer vollständig entkoppelten Implementierung genutzt werden.

• SEO und Bildgestaltung

Drei Probleme, die bei der Arbeit in einem entkoppelten Drupal auftreten, wären:

1. Das Meta-Tag-Modul ist installiert und in Drupal 8 ordnungsgemäß konfiguriert, aber die Daten werden nicht auf die Seite gepusht. Dies führt zu gescheiterten Versuchen der Suchmaschinen, diese Seiten zu sehen. Der zusätzliche Code musste geschrieben werden, um die Meta-Tags von Drupal abzurufen. Die Aufgabe dauerte Wochen und Dutzende von Stunden zwischen dem Entwickler und dem SEO-Team, was zu Komplikationen und Problemen führte.
    
2. Entkoppelte Sites, die nicht standardmäßige URLs haben, werden als Problem in entkoppeltem Drupal gezählt. Wenn Sie die Funktionsweise von URLs ändern, gehen andere Dinge kaputt, wie z. B. die Sitemap der Website. Dies ist ein weiterer Fall, in dem die Funktionalität neu erstellt werden musste. Kurz gesagt, es wird ausgewählt, die verfügbaren Module nicht zu verwenden und einen Drittanbieterdienst zu verwenden, um eine Sitemap manuell zu crawlen und zu erstellen, da der Entwicklungsaufwand zu kostspielig wäre.
    
3. SASS ist ein Präprozessor, der es den Benutzern ermöglicht, CSS-Code mit der erweiterten SCSS-Syntax zu schreiben, die viele Funktionen umfasst. Funktionen wie Variablen, Verschachtelung, Funktionen - unter den bemerkenswertesten. Die aktuelle Gruppe von SEO-SAAS-Tools funktioniert nicht auf Headless-Sites. Wenn Sie Tools von Drittanbietern wie Moz verwenden, erkunden Sie Verluste, wenn es darum geht, die entkoppelte Site zu verstehen

Zukunft von Decoupled Drupal

Mit dem Zeugen der rasanten Entwicklung im Bereich der Entkopplung hat sich die Kluft zwischen den Entwicklern und Content-Redakteuren massiv verringert. Schließlich war dies das allererste Ziel von Drupal.

Content-Autoren dabei zu helfen, ihre eigene Website zusammenzustellen

Heute beginnen Entwickler, Drupal nicht nur als Content-Repository für ihre verschiedenen Anwendungen zu verwenden, sondern auch als Mittel zur Erstellung benutzerdefinierter redaktioneller Schnittstellen. Die Zukunft von Decoupled Drupal verspricht mehr Experimente rund um überzeugende neue redaktionelle Schnittstellen, die Ihnen helfen würden, die volle Kontrolle über die wachsende Anzahl von Kanälen zu haben

Nicht nur das, sondern Decoupled Drupal würde es Ihnen auch ermöglichen, ein Content-Modell einmal zu erstellen, dann den Inhalt auf jedem Kanal in der Vorschau anzuzeigen und vertraute Tools zu verwenden, um Inhalte entweder zu bearbeiten oder zu platzieren, unabhängig davon, ob der betreffende Kanal mobil, Chatbots, digitale Schilder oder sogar Augmented Reality ist.

Die Zukunft ist in der Tat rosig!

Am Ende

Drupal war ein ständiger Leistungsträger, wenn es darum geht, eine kontinuierliche API-First-Architektur zu sein. Ja, es ist eine sehr gute Option, wenn es entkoppelt ist, da die moderne CMS-Revolution von heute die Nachfrage nach flexibleren, skalierbareren und anpassbareren Systemen erhöht, die die Erfahrung liefern, die Ihre Kunden erwarten. Das Trennen Ihres Front- und Backends mit einer Headless- oder Decoupled-Implementierung ermöglicht es Unternehmen, die Lieferzeiten zu verkürzen und gleichzeitig schneller zu iterieren.

Bei OpenSense Labs glauben wir an die Freiheit der Frontend-Wahl. Deshalb haben wir unser CMS so konzipiert, dass es je nach den spezifischen Bedürfnissen jedes Kunden als traditionell, entkoppelt oder Headless fungiert.

Erreichen Sie uns unter [email protected] und machen Sie es einfach, Inhalte einmal mit einem einzigen Authoring-Punkt zu veröffentlichen und sie überall dort bereitzustellen, wo Sie möchten, mit weniger Stress und Durcheinander.