Alles ist besser mit etwas JS im Head: Progressively Decoupled Drupal

Das 21. Jahrhundert ist eine wunderbare Zeit zum Leben. Es gibt so viel, was heute mit unbegrenzten Möglichkeiten erreicht werden kann. Es gibt keine Hemmungen bei den Menschen. Wenn wir etwas wollen, bekommen wir es. Ich meine, die Leute des 21. Jahrhunderts sind auf dem Mars gelandet, gibt es also etwas, das wir nicht tun können? Ich glaube nicht. 

Wenn man sich all unsere Errungenschaften ansieht, wird man feststellen, dass die Technologie die Wurzel von allem ist. Es sind die Fortschritte, die wir in der Wissenschaft gemacht haben, die die heutige Zeit so wunderbar gemacht haben.

Über all diese Technologien zu sprechen, würde so lange dauern wie ein Jahr, selbst wenn ich es kurz und bündig mache. Also werde ich nicht darauf eingehen. Ich werde jedoch über ein Segment der Technologie sprechen, das die Art und Weise, wie wir im Internet surfen, tiefgreifend beeinflusst hat. Und das ist der Webentwicklungsprozess. 

Um es kurz zu machen, möchte ich einen Trend in der Webentwicklung erörtern, der den Entwicklern, Designern und Projektmanagern geholfen hat, nach Herzenslust zu entwickeln, ohne sich auf eine bestimmte Technologie verlassen zu müssen, die sie früher eingeschränkt hat. Es ist ein Trend, der Einschränkungen beseitigt und Innovationen fördert. 

Finden wir heraus, was es ist. 

Das Drupal-Prequel

Bevor ich zur Hauptagenda dieses Blogs komme, hatte ich das Gefühl, dass ich über die zugrunde liegende Technologie sprechen muss, nämlich Drupal. Als Content-Management-Software erfüllt Drupal alle Anforderungen, wenn es darum geht, vielseitige Web-Erlebnisse zu schaffen. 

Websites von Grund auf neu zu erstellen und die vollständige Verantwortung für alle Aspekte der Website zu übernehmen, gilt als Drupal als traditionell oder monolithisch. Das bedeutet, dass Drupal die totale Kontrolle über den technologischen Stack einer Website hat. Das Frontend und alle präsentationsbezogenen Aspekte sowie das Backend und alle seine Datenschichten würden in den Bereich von Drupal fallen. Eine solche Verwendung von Drupal ist für eigenständige Websites und Anwendungen völlig ausreichend, bei denen die redaktionellen Bedürfnisse die der Entwickler überwiegen und erstere die vollständige Kontrolle über alle visuellen Elemente der Seite anstreben. Da Drupal Funktionen wie In-Place-Editing und Layout-Management bietet, bin ich damit einverstanden, eine solche Kontrolle zu wünschen. 

Was aber, wenn die Entwickler anfangen wollen, die aktuelle Technologie im Frontend zu implementieren? Was passiert, wenn die Website mehr Interaktivität benötigt als zuvor? Wären React oder Angular nicht eine bessere Option, um das zu erreichen? 

Ich denke schon, und das bringt mich zu dem Trend, über den ich in der Einleitung gesprochen habe, nämlich Decoupled Drupal.

Uneingeschränkte Innovation und Decoupled Drupal 

Decoupled Drupal entfernt im Wesentlichen die Verbindung zwischen Frontend und Backend und gibt den Entwicklern die Freiheit, mit der Präsentationsschicht der Website zu tun, was sie wollen. Der Grund für diese Trennung ist die Flexibilität, die sie der architektonischen Entwicklung verleiht, wodurch die Frontend-Entwickler die totale Kontrolle über das gerenderte Markup des Projekts zusammen mit der Benutzererfahrung haben.

Es ist nicht nur die Kontrolle über die Frontend-Schicht, die Entwickler dazu motiviert, auf die Entkopplung zu drängen, es gibt auch viele andere Vorteile, die die Leistung der Entkopplung zu gut machen, um sie aufzugeben. 

Dazu gehören: 

• Erstellung beeindruckender Funktionen durch serverseitiges Rendering oder Node.js; 
• Sicherung von Daten durch ein öffentlich unzugängliches CMS; 
• Veröffentlichung Ihrer Inhalte auf allen Arten von IOT-Geräten; 
• Erhöhung der Geschwindigkeit und Effizienz der Arbeit durch eine klare Trennung von Zuständigkeiten und Aufgaben, weniger gegenseitige Abhängigkeit und weniger Ärger; 
• Die Aktualisierung der Software geht ebenfalls schneller, ohne Auswirkungen auf die Funktionsweise des anderen Endes;
• Schließlich die Möglichkeit, die Vorteile des umfangreichen JavaScript-Frameworks oder eines Static-Site-Generators Ihrer Wahl für eine makellos interaktive Website zu nutzen. 

All diese Vorteile der Entkopplung haben den Trend zum Erfolg gemacht. Je nach Bedarf hat Decoupled Drupal das Potenzial, Ihr Projekt mit seinen eingebauten Webservices und APIs zu erstellen. REST, JSON:API und GraphQL sind in dieser Hinsicht die wichtigsten Anwärter, so dass der Informationsfluss von vorne nach hinten nahtlos ist.

Mit der Entkopplung ist es auch einfach, das richtige Personal für Ihr Projekt zu finden. Wenn Sie ein Frontend mit JavaScript erstellen, benötigen Sie Entwickler, die JS beherrschen, und es ist eine bekannte Tatsache, dass es weitaus mehr JS-Entwickler als Twig gibt.

Die Entkopplung von Drupal kann Sie aber auch in ein Dilemma stürzen. Wenn Sie Drupal entkoppeln, verabschieden Sie sich von vielen der Out-of-the-Box-Funktionen, die Drupal bietet, wie z. B. Layout- und Display-Management, Content-Vorschauen und bestimmte Sicherheitsfunktionen. Einige davon können von Ihren Entwicklern von Grund auf neu geschrieben werden, aber es gibt mehr als nur ein paar, die nicht kompensiert werden können. 

Wie können Sie in einer solchen Situation die Verluste minimieren? Wie stellen Sie sicher, dass Sie den uneingeschränkten innovativen Vorteil im Frontend erhalten und dennoch die Vorteile der Frontend-Funktionen von Drupal nutzen können? 

Der Mittelweg: Progressiv entkoppeltes Drupal

Wie entkoppelt man Drupal? Es gibt eine durchaus vernünftige Antwort auf das Entkopplungsdilemma, und sie liegt in seinen Kategorien. Die Entkopplung von Drupal kann in zwei verschiedenen Aspekten erreicht werden. 

• Die erste ist, wenn Sie vollständig entkoppeln und das Frontend vollständig aus dem Backend extrahieren. Dies wird als vollständig entkoppelte Drupal-Architektur bezeichnet. Dies kann für dynamische Websites mit JavaScript oder für statische Websites durch den Einsatz von Static-Site-Generatoren wie Gatsby und Metalsmith erfolgen. 
• Beim zweiten Ansatz trennen Sie die Präsentations- und Datenschichten, es besteht jedoch keine vollständige gegenseitige Abhängigkeit zwischen den beiden. Damit meine ich, dass einige Aspekte des Frontends außerhalb von Drupal entwickelt werden, während der Rest innerhalb von Drupal untergebracht wird. Dies wird als progressiv entkoppelte Drupal-Architektur bezeichnet. 

Beim ersten Ansatz, mit einer vollständigen Trennung, müssten Sie sich von den Out-of-the-Box-Funktionen von Drupal im Frontend trennen, daran führt kein Weg vorbei. Wenn Sie sich jedoch für den zweiten Ansatz entscheiden, nämlich Drupal progressiv zu entkoppeln, ist dies nicht der Fall. Sie können mit anderen Frontend-Technologien spielen und dennoch alle Funktionen von Drupal nutzen. Mehr über die besten Frontend-Technologien für Decoupled Drupal finden Sie hier.

Sie müssen sich fragen, wie das möglich ist, und das will ich Ihnen sagen. 

Wenn progressiv entkoppeltes Drupal im Spiel ist, können Sie ein Frontend mit Drupal und all seinen Out-of-the-Box-Funktionen erstellen. Sobald Sie das getan haben, können Sie ein JavaScript-Framework über die Ebene legen, die Sie erstellt haben. 

Es ist wichtig zu verstehen, dass es bei progressiv entkoppeltem Drupal an Ihnen und Ihren Bedürfnissen liegt, zu entscheiden, welche Art von Verantwortung Sie JavaScript übertragen. Die JS-Schicht über dem Drupal-Frontend könnte für das Rendern eines unabhängigen Blocks oder einer Komponente auf einer einzelnen Seite verantwortlich sein oder sogar jeden einzelnen Aspekt dieser Seite rendern. 

Die Art der progressiven Entkopplung, die Sie durchführen, hat einen direkten Einfluss auf die Art der Kontrolle, die Ihre Redakteure haben. Mehr JavaScript-Rendering bedeutet weniger Kontrolle für die Redakteure, da die administrativen Fähigkeiten von Drupal im Frontend abnehmen, während weniger JS-Rendering automatisch mehr Raum für die administrativen Fähigkeiten von Drupal und mehr Macht für die Redakteure bedeutet. 

Progressiv entkoppeltes Drupal ist in der Tat die perfekte Balance zwischen fortschrittlichen Frontend-Technologien und den leistungsstarken Fähigkeiten von Drupal. Sie müssen keine Kompromisse eingehen, um das eine oder das andere zu erhalten. Der Bezug auf den Mittelweg für die Webentwicklung im entkoppelten Sinne ist eine treffende Beschreibung des progressiven architektonischen Ansatzes.

Aber wie entscheiden Sie, ob die progressive Entkopplung die bessere Wahl ist? Die Frage, ob progressiv entkoppeltes Drupal oder vollständig entkoppeltes Drupal, kann oft schwer zu beantworten sein, aber wir müssen es versuchen. Also, lasst uns das tun.

Denken Sie an die Redakteure oder die Entwickler?

Für jedes Webprojekt, sei es eine Website oder eine Anwendung, gibt es zwei wichtige Akteure. Das sind die Leute, die das Projekt zum Leben erwecken, nämlich die Entwickler, und die Leute, die zur Stimme des Projekts werden, nämlich die Content-Autoren und Redakteure. Wenn Sie sich also entscheiden, ob Sie sich für gekoppelte, vollständig entkoppelte oder progressiv entkoppelte Drupal-Ansätze entscheiden, müssen Sie diese im Auge behalten. 

Für die Redakteure müssen Sie Folgendes berücksichtigen: 

• Die Art von Leichtigkeit, die sie bei der Bearbeitung von Seiteninhalten und Layout benötigen; 
• Die Art von In-Context-Tools, die sie benötigen würden; 
• Die Art von Zugänglichkeit, die sie standardmäßig im Drupal-HTML benötigen würden; 
• Und die Art von Vorschauen, die sie ohne kundenspezifische Entwicklung benötigen würden

Für die Entwickler müssen Sie Folgendes berücksichtigen: 

• Die Art von Kontrolle, die sie über die Frontend-Präsentation wünschen; 
• Die Art von serverseitigem Rendering, die sie wünschen; 
• Die Art von APIs, die sie zum Schreiben von JavaScript verwenden möchten;
• Und die Art von Datensicherheit, die sie wünschen.

Angenommen, die Redakteure wollen alles: eine einfache Bearbeitung von Seiteninhalten und Layout, Tools wie In-Place-Editing und kontextbezogene Links, die Möglichkeit, unveröffentlichte Inhalte in der Vorschau anzuzeigen, und einen ständigen Zugriff auf Inhalte. Nehmen wir nun an, dass die Entwickler die gleiche Art von Leichtigkeit benötigen, mit Kontrolle, mit der Möglichkeit, zwischen serverseitigem Rendering und Node.js-basierten Funktionen zu wählen, mit JSON:API in Aktion und einem öffentlich unzugänglichen CMS. 

Wenn dies der Fall ist, würde Ihnen eine progressiv entkoppelte Drupal-Architektur helfen, sowohl Ihren Entwicklern als auch Ihren Redakteuren das Beste zu geben. Die Entwickler wären in der Lage, JavaScript für Teile der Seiten zu verwenden und ihren Appetit auf Interaktivität und fortschrittliche Entwicklung zu stillen. Gleichzeitig könnten die Redakteure ohne jegliche Einschränkungen mit all den Drupal-Funktionen arbeiten, die sie sich schon immer gewünscht haben. Eine Win-Win-Situation für die wichtigsten Akteure. 

OSL und ein progressiv entkoppeltes Drupal-Projekt

Wir von OpenSense Labs haben mit einer globalen Marke, Produce Market Guide (PMG), zusammengearbeitet, um einen bestimmten Bedarf durch progressive Entkopplung zu decken. 

PMG ist ein führender Name auf dem Markt für die Erstellung von Rohstoffinformationen, Trends und Datenanalysen. Ein Teil der Farm Journal-Familie, aber mit dem Ziel, seinen Nutzern ein fortschrittliches und bereicherndes Erlebnis zu bieten. Allerdings aufgrund einer langsamen Suchfunktion, die unmöglich wurde. 

Abgesehen davon funktionierte die Website mit Drupal recht gut. Um die langsame Suchfunktion zu beheben, wurde von OSL ein progressiv entkoppelter Drupal-Ansatz implementiert. Mit React und Elastic wurde die neue Suchfunktion erstellt, wodurch die Zeit, die benötigt wurde, um das Ergebnis zu präsentieren, auf wenige Sekunden reduziert wurde. Sehen Sie sich die detaillierte Fallstudie für PMG an, um ein klareres Bild des Projekts zu erhalten. 

Dies war ein Projekt, das unseren Entwicklern half, Decoupled Drupal viel besser zu verstehen. Die Tatsache, dass man kein komplettes Frontend von Grund auf neu erstellen muss, ist ein herausragender Vorteil des progressiven Ansatzes. JS nur für eine Funktion zu verwenden, sie so fortschrittlich und interaktiv wie möglich zu gestalten und sie als erledigt zu betrachten, ist im Wesentlichen die Funktionsweise von progressiv entkoppeltem Drupal. Und ich denke, es gibt nur sehr wenige architektonische Ansätze, die besser sind als dieser.

Das endgültige Urteil 

Ich möchte zum Schluss noch ein Beispiel geben. 

"Stellen Sie sich vor, Sie haben eine Website, die viele interaktive Elemente benötigt, die die Auswahlmöglichkeiten der Benutzer umfassen und dem Benutzer die Möglichkeit geben, ein personalisiertes Erlebnis basierend auf seiner Historie mit zukünftigen Empfehlungen zu erhalten. Stellen Sie sich außerdem vor, dass Ihre Website viel Traffic und viele Inhalte zu verwalten hat, für die Sie unbedingt hochkompetente Content-Management- und Site-Building-Tools benötigen."

Für eine solche Website würde weder die gekoppelte Drupal-Architektur noch die vollständig entkoppelte Architektur funktionieren. Es braucht ein Gleichgewicht zwischen den beiden. 

Warum?

Weil Drupal allein keine hochinteraktive Website wie diese erstellen kann, müsste es sich auf JavaScript und Co. verlassen. Bei hohem Traffic sind jedoch viele Daten oft cachefähig, und Drupal ist in der Lage, dies sehr gut zu handhaben. Wenn die Inhalte nicht richtig verwaltet werden, wird die Leistung der Website drastisch beeinträchtigt. Deshalb muss ein Mittelweg gewählt werden, und progressiv entkoppeltes Drupal ist genau das. Ich würde nicht ganz falsch liegen, wenn ich sage, dass die Zukunft der Entkopplung von Drupal darin liegen könnte, sie progressiv zu gestalten. Stimmen Sie dem zu?