F. Scott Fitzgeralds hochmoderner Roman über das Amerika des Jazz-Zeitalters, Der große Gatsby, gilt als eines der besten Bücher, die je geschrieben wurden. Er hat die Leser fasziniert, indem er eine Art Nachwirkung des Staunens erzeugte. Im digitalen Zeitalter gibt es einen weiteren "Gatsby", der einen wunderbaren Empfang findet und als ein großartiges Werkzeug für die Webentwicklung gilt.

Das Aufkommen der statischen Seitengenerierung, bei der Ansichten im Voraus gerendert werden, um die Belastung von APIs und anderen Backend-Systemen zu verringern, erweist sich als bemerkenswerte Lösung für eine großartige Web-Performance. Gatsby, als statischer Seitengenerator, kann die Web-Performance dramatisch verändern. In Kombination mit Drupal als Backend für die Erstellung von Single-Page-Anwendungen kann dies eine hervorragende Option sein.

Kein Wunder, dass Kyle Mathews, der Gründer von GatsbyJS, 2017 twitterte:

GatsbyJS: Erläutert

Derzeit ist GatsbyJS auf dem Vormarsch, was seine Nutzung betrifft, wie in der obigen Grafik zu sehen ist. Was ist es also? GatsbyJS, ein Open-Source-Generator für statische Websites, vereint das Beste aus ReactJS, Webpack, Routing, GraphQL und anderen Front-End-Tools zu einem sehr angenehmen Entwicklererlebnis.

Gatsby nutzt eine leistungsstarke Vorkonfiguration für die Entwicklung einer Website. Es verfügt über sofort einsatzbereite Funktionen für spektakulär schnelle Seitenladezeiten, Daten-Prefetching, Asset-Optimierung, Code-Splitting, serverseitiges Rendering, Service Worker und intelligentes Laden von Bildern.

Funktionen von Gatsby

Im Folgenden werden die Gründe aufgeführt, die bei der Wahl von Gatsby berücksichtigt werden sollten:

Gut strukturierter Plugin-System

Mit Gatsby wird der Inhalt als React-Komponenten geschrieben und zur Build-Zeit als statische HTML-, CSS- und JavaScript-Dateien in das Document Object Model (DOM) gerendert. Mit einem umfangreichen Daten-Plugin-Ökosystem können die gerenderten statischen Inhalte aus einer Vielzahl von Quellen und Formaten bezogen werden, darunter Markdown, CSV (Comma-separated values) und Content-Management-Systeme (CMS) wie Drupal.

Hervorragende Skalierbarkeit

Gatsby kann auf das gesamte Internet skaliert werden, da es die Website als statische Dateien erstellt, die problemlos auf zahlreichen Diensten bereitgestellt werden können. Es hilft, komplizierte Bereitstellungen mit Datenbanken und Servern, deren zeitaufwändige Einrichtungskosten, Wartung usw. loszuwerden.

Performance und Progressive Web Apps out-of-the-box

Gatsby erzwingt Best Practices und optimiert Ihre Website standardmäßig. Wenn der Build-Prozess ausgeführt wird, werden statische HTML-Dateien für einzelne Seiten erstellt, um schnelle anfängliche Ladezeiten zu bieten.

Wenn die Seite vom Browser geladen wird, startet Gatsby React und navigiert auf Ihrer Website, als ob Sie durch eine Single-Page-Anwendung mit nahezu sofortigen Übergängen ohne Seitenneuladungen navigieren würden.

Gatsby lädt benachbarte/verwandte Seiteninhalte im Hintergrund vorab, wodurch jegliche Verzögerungen vermieden werden, wenn der Benutzer auf einen Link klickt. Das clientseitige Erlebnis ist mit aktiviertem JavaScript großartig, da es keinen Verlust von Inhalten oder Navigation gibt, wenn der Benutzer JavaScript deaktiviert hat.

Gatsby kann auch Offline-Unterstützung bieten, indem ein einzelnes Plugin hinzugefügt wird, wodurch Ihre Website zu einer vollwertigen Progressive Web App (PWA) wird.

JAMstack-Setup

In der Webentwicklungs-Szene hat ein Paradigmenwechsel stattgefunden, bei dem das JAMstack-Setup in den Mittelpunkt rückt. Die Kombination aus clientseitigem JavaScript, wiederverwendbaren APIs und vorgefertigtem Markup ist die Zukunft der Webentwicklung. Gatsby kann ein hervorragendes JavaScript-Framework für eine JAMstack-basierte Webanwendung sein.

Vorteile der Integration von Gatsby und Drupal

Drupal eignet sich hervorragend für die Bereitstellung komplizierter Seitenlayouts oder Content-Modellierung mit zahlreichen Abschnitten pro Seite. Es ist eine erstaunliche Lösung für Teams mit mehrstufigen Prozessen zur Erstellung und Bewertung von Inhalten. Decoupled Drupal ist eine erstaunliche Lösung für die Erstellung von Websites der Enterprise-Klasse und wird von den Drupal Community-Leadern umfassend unterstützt. 

Die Nutzung der Vorteile von Drupal mit Gatsby ist ein hervorragender Ansatz, um ein CMS der Enterprise-Klasse kostenlos zu erhalten, zusätzlich zu einer modernen Entwicklungserfahrung und den Vorteilen von JAMstack wie Sicherheit, Skalierbarkeit und Leistung. Eines der großartigen Beispiele für die Implementierung von Decoupled Drupal und Gatsby ist die Demo-Site des Umami Food Magazine, das von Contenta CMS, einer Headless-Drupal-Distribution und GatsbyJS betrieben wird.

Die Integration von Gatsby in ein Decoupled-Drupal-Setup ermöglicht Ihnen den Zugriff auf die beeindruckende Content-Architektur und die Workflow-Funktionen von Drupal 8 sowie auf die hervorragenden Tools von Gatsby zur Erstellung von Benutzeroberflächen und zur Leistungssteigerung. Darüber hinaus sind sowohl Drupal als auch Gatsby Open Source, verfügen über eine große und aktive Community-Präsenz und ein hervorragendes Ökosystem von Add-on-Modulen oder Plugins. Hinzu kommt, dass die integrierten Webdienste von Drupal 8 den Integrationsprozess rationalisieren.

Demonstration

Um Gatsby in eine neue oder bestehende Drupal-Site zu integrieren, wird das gatsby-source-drupal-Plugin zur Gatsby-Site hinzugefügt. Das Gatsby-source-drupal-Plugin ist ein Quell-Plugin, das verwendet wird, um Daten von Drupal-Sites in Gatsby zu ziehen, und zwar mit Hilfe des JSON:API-Moduls. Anschließend wird das Plugin mit Ihren Drupal-Zugangsdaten und der gehosteten URL konfiguriert. Sie können dann mit Hilfe von GraphQL-Abfragen auf die Drupal-Daten zugreifen.

Eine Digitalagentur demonstrierte, wie Drupal-Inhalte in eine Gatsby-Site übernommen werden. Sie hatte bereits eine Drupal 8-Site installiert und einen Inhaltstyp namens Coffee mit drei Feldern erstellt: Titel, Text und Bild. Drupal wurde mit der Installation der Module JSON:API und JSON:API Extras in einen API-Server verwandelt. Für den Zugriff auf die JSON-API-Ressourcenliste wurde die Berechtigung für anonyme Benutzer erteilt.

Darauf folgte der Build-Prozess der Gatsby-Site namens coffees.gatsby, wobei sichergestellt wurde, dass Node und npm auf dem Computer installiert sind. Dann wurden die Inhalte vom Drupal-Server abgerufen. Dazu wurde eine einfache Seite erstellt, auf der alle Kaffeesorten von der Drupal-Site angezeigt wurden.

Anschließend wurde das Plugin gatsby_source_drupal verwendet, um Drupal-Inhalte vom Standard-Endpunkt /jsonapi zu lesen. GraphQL wurde verwendet, um alle Coffee-Nodes von Drupal abzufragen. Schließlich wurde die Gatsby-Site veröffentlicht, indem einfach Inhalte in /public auf den Server kopiert oder verschoben wurden.

Fazit

Gatsby ist ein unglaublicher Generator für statische Websites, der den Prozess der Erstellung blitzschneller Websites rationalisiert. Gatsby extrahiert Daten aus Quellen wie Drupal und verwendet diese Daten dann, um zur Build-Zeit statische Seiten zu generieren. Die Daten, die aus zahlreichen Backends stammen, können sogar zusammengeführt werden. Diese Technik hilft, die Vorteile von statischen Websites wie Geschwindigkeit, einfache Bereitstellung usw. und die Content-Management-Systeme wie den einfachen Aktualisierungsprozess, die benutzerfreundliche redaktionelle Oberfläche usw. zu nutzen.

Das Zusammenkommen von Drupal und Gatsby führt zu unglaublich schnellen statischen Seiten und verbindet diese dann mit dem traditionellen React für Benutzerauthentifizierung und Personalisierung.

Wir engagieren uns für die Bereitstellung ambitionierter digitaler Erlebnisse mit unserer Expertise in der Drupal-Entwicklung.

Kontaktieren Sie uns unter [email protected], um das Beste aus der Drupal + Gatsby-Integration herauszuholen.