Drupal + JAMstack: Ein Paradigmenwechsel

Köstlich. Süß. Lecker. Man schmeckt die Marmelade und sagt diese Worte, oder allein der Gedanke an gestapelte Marmeladengläser lässt einen diese Worte ausrufen. Apropos Stack: Im Technologiebereich sprechen wir nicht mehr nur von Betriebssystemen, spezifischen Webservern, Backend-Programmiersprachen oder Datenbanken. In der Webentwicklung denken wir an verschiedene Arten von Entwicklungs-Stacks wie den LAMP-Stack, den MEAN-Stack usw. Und es gibt einen Neuzugang namens JAMstack, bei dem es nicht um spezifische Technologien geht, sondern um eine neue Art, Websites und Anwendungen zu erstellen.

Was ist das Konzept hinter JAMstack?

Um ein Webentwicklungsprojekt mit dem JAMstack zu realisieren, müssen drei wesentliche Kriterien erfüllt sein, nämlich:

• JavaScript: Es steuert die dynamische Programmierung während des Request/Response-Zyklus, die vollständig auf dem Client läuft (z. B. Vue.js, React.js usw.).
• APIs: Alle serverseitigen Prozesse oder Datenbankaktionen werden in wiederverwendbare APIs abstrahiert, auf die über HTTPS mit JS zugegriffen wird (z. B. Twilio, Stripe).
• Markup: Durch den Einsatz eines Site-Generators für Content-Sites oder eines Build-Tools für Web-Apps muss das templatisierte Markup zur Bereitstellungszeit vorab erstellt werden (z. B. Gatsby.js, Webpack).

Vorteile von JAMstack

• Hohe Performance: Wenn es darum geht, die Time to First Byte zu reduzieren, verbessern vorab erstellte Dateien, die über ein Content Delivery Network (CDN) bereitgestellt werden, die Web-Performance. Sie müssen nicht warten, bis die Seiten dynamisch generiert werden, da JAMstack es Ihnen ermöglicht, sie zur Bereitstellungszeit zu erstellen.

• Robuste Sicherheit: Die Abstraktion serverseitiger Prozesse in Microservice-APIs minimiert Sicherheitsbedrohungen. Zudem kann das Fachwissen spezialisierter Drittanbieterdienste genutzt werden.
• Bessere Skalierbarkeit: CDNs sind eine hervorragende Möglichkeit, Skalierbarkeit zu gewährleisten, wenn Ihre Bereitstellung aus einem Stapel von Dateien besteht, die überall bereitgestellt werden können.
• Großartige Entwicklererfahrung: Entwickler können mit loser Kopplung und Trennung der Steuerung gezielter entwickeln und debuggen. Darüber hinaus entfällt die Notwendigkeit, einen separaten Stack für Inhalte und Marketing zu verwalten, da die Auswahl an CMS-Optionen für Site-Generatoren wächst.

Best Practices

• Die gesamte Website muss über ein CDN bereitgestellt werden. Anstatt auf einem einzigen Server zu liegen, können JAMstack-Projekte verteilt werden, da sie nicht auf serverseitigen Code angewiesen sind.
• Atomare Bereitstellungen sollten eingesetzt werden. Dies stellt sicher, dass keine Änderungen live gehen, bevor alle geänderten Dateien hochgeladen wurden.
• Die Steuerung sofortiger Cache-Löschungen durch das CDN stellt sicher, dass eine Bereitstellung, wenn sie live geht, auch wirklich live ist.
• Alles sollte in Git liegen. Dies minimiert die Reibung für Mitwirkende und optimiert Staging- und Test-Workflows.
• Moderne Build-Tools wie Babel, PostCSS, Webpack usw. nutzen.
• Markup-Builds automatisieren. Dies liegt daran, dass JAMstack-Markup vorab erstellt wird und Inhaltsänderungen erst live gehen, wenn Sie einen weiteren Build ausführen.

Wie unterscheidet sich JAMstack von anderen Entwicklungs-Stacks?

JAMstack ist eine Alternative zu den LAMP- (Linux, Apache, MySQL, PHP) und MEAN-Stacks (MongoDB, Express.js, Angular und Node.js).

LAMP wird zum Erstellen dynamischer Websites und Web-Apps verwendet. Dabei werden Seiten auf Anfrage aus einer Datenbank rekonstruiert, anstatt als flache, zur Auslieferung bereite Dokumente vorgehalten zu werden. Es ist einfach, Inhalte hinzuzufügen und zu ändern. JAMstack liefert Inhalte jedoch wesentlich schneller.

MEAN und LAMP ähneln sich stärker und unterscheiden sich erheblich von JAMstack.

MEAN ist ebenfalls für den Bau dynamischer Websites und Apps konzipiert. Alle MEAN-Komponenten sind in JavaScript geschrieben. Der Hauptunterschied besteht darin, dass MEAN Seiten immer noch auf Anfrage aus Datenbanken zusammensetzt, ähnlich wie LAMP. MEAN und LAMP ähneln sich stärker und unterscheiden sich erheblich von JAMstack.

JAMstack und Drupal gemeinsam implementieren

Webentwicklungsprojekte, die auf einer engen Kopplung zwischen Client und Server basieren, werden nicht mit dem JAMstack erstellt. Dazu gehören eine Website, die mit einem serverseitigen CMS wie Drupal erstellt wurde, eine monolithische, serverseitig laufende Web-App, die auf einer Backend-Sprache basiert, und eine Single-Page-App, die isomorphes Rendering zur Erstellung von Views auf dem Server zur Laufzeit verwendet. Wie können Drupal und JAMstack also zusammenarbeiten?

In einer Session auf dem Bay Area Drupal Camp 2018 wurde eine Methode zur Integration von Gatsby mit Drupal demonstriert. Gatsby ist einer der führenden JAMstack-basierten statischen Seitengeneratoren. Die Demo zeigte, dass Gatsby kein Ersatz für Drupal ist und Drupal weiterhin die Inhalte, die Seitenstruktur und die Art der Inhaltserstellung steuern würde. Gatsby hingegen würde kleinere Dinge wie die öffentlich zugängliche Website regeln.

Gatsby ist kein Ersatz für Drupal, und Drupal würde weiterhin die Inhalte steuern

Es wurde über das „Gatsby Drupal Kit“ gesprochen, das sich in der Entwicklungsphase befindet und dabei helfen kann, Gatsby-Drupal-Integrationen schnell zu starten. Es ist so konzipiert, dass es mit einer minimalen Drupal-Installation als Ausgangspunkt funktioniert und eine Struktur bietet, die zu einer größeren und komplexeren Website erweitert werden kann.

Die Demonstration konzentrierte sich auf eine Basis-Drupal-8-Website, die mit Gatsby verbunden ist, und auf die Best Practices, um Gatsby für reale Websites in der Produktion nutzbar zu machen. Der Schwerpunkt lag auch auf sinnvollen Mustern für die Übersetzung der Drupal-Struktur in Gatsby-Komponenten, -Templates und -Seiten.

Fazit

Sobald Sie die spezifischen Risiken vollständig verstanden und entsprechende Workflows etabliert haben, bietet der JAMstack eine Vielzahl von Möglichkeiten. Die Erstellung einer statischen Website braucht Zeit und erfordert eine Architektur, die die Orchestrierung mehrerer Lösungen beinhaltet. Heute mag es kompliziert erscheinen, aber so war es auch bei Ihrer ersten dynamischen Website, bei der Sie einen Host auswählen, FTP beherrschen, Webserver-Logs jonglieren mussten und so weiter. Mit zunehmender Erfahrung werden JAMstack-Nutzer immer versierter darin, sein volles Potenzial auszuschöpfen.

OpenSense Labs hat die Träume seiner Partner von der digitalen Transformation mit einer Reihe von Dienstleistungen wahr werden lassen.

Kontaktieren Sie uns unter [email protected], um JAMstack für Drupal-Sites zu nutzen.