Ein Datenimport aus diversen Quellen zugleich, automatisch aktivierte Offline-Funktionen und Service Workers: Das alles steht Entwickler in Gatsby zur Verfügung, einem Static Site Generator auf Basis von React. Das Framework ist nun in Version 1.0 erschienen. Wir werfen einen Blick darauf.

Statische Seiten gelten als schneller, sicherer und leichter zu erstellen als andere Arten von Websites. Diese Eigenschaften wollte Kyle Mathews mit den Vorzügen der Entwicklung von React-Apps verbinden. Herausgekommen ist ein Framework zur Erstellung von Static Sites auf Basis von React, für dessen Benutzung man nicht programmieren können muss. Das besagt zumindest das Tutorial zum Tool. Obwohl v1.0 von GatsbyJS gerade erst erschienen ist, berichtet der Projekt-Initiator im Blogpost zur Veröffentlichung bereits von 500.000 Downloads auf npm bis zum aktuellen Release.

Gatsby macht Tempo

Eine zentrale Eigenschaft von Seiten, die mit Gatsby erstellt wurden, ist ihre hohe Ladegeschwindigkeit. In einer Case Study vom März dieses Jahres stellte der Entwickler des Frameworks ein Projekt namens Gatsbygram vor, das er als Klon von Instagram erstellt und gegen die bekannte Foto-Plattform getestet hat. Mathews berichtet, dass Gatsbygram im Test sowohl für den ersten Aufruf als auch bei wiederholten Seitenbesuchen fertig geladen sei, bevor Instagram überhaupt zu laden beginne. Die Zeit bis zur Anzeige der ersten Pixel liege bei wiederholten Aufrufen einer Seite bei weniger als einer halben Sekunde und sei somit besonders gering, so Mathews.

So funktioniert Gatsby. Quelle: https://www.gatsbyjs.org/

Der hohen Ladegeschwindigkeit von Websites, die mit Gatsby erstellt wurden, liegen verschiedene Prinzipien zugrunde: Service Workers, Offline-Support und Routen-basiertes Code-Splitting sind die zentralen Features des Frameworks auf diesem Gebiet. Einerseits wird somit immer nur der Code heruntergeladen, der aktuell benötigt wird; andererseits wird über Service Workers per Pre-Caching Code vorgehalten, der für das Laden weiterer Seiten notwendig ist. Dadurch sind Seiten beim Klick unmittelbar verfügbar. Das alles führt zur oben genannten guten Performance, die auch bei langsamen Internetverbindungen gewährleistet ist, sowie zur Offline-Funktionalität. Gatsby folgt dabei der PRPL-Architektur, die von Google entwickelt wurde.

Vue, Vite,Vitest

Explore Vitest, the JavaScript testing framework built for Vite, with React, Vue, and Node.js support plus modern features like ECMAScript modules.

Download for free

GraphQL und Plugins

Dieses Websiteverhalten muss außerdem nicht von Hand konfiguriert werden; die nötigen JavaScript-Einstellungen sind per Default in Gatsby aktiviert. Die Arbeit in Gatsby erfolgt in HTML, CSS und React. Das vereinfacht die Benutzung des Frameworks: Der Anwender erstellt eine Seite, das Framework entscheidet, wie diese am besten geladen wird, so erklärt es Mathews.

Für den Import der notwendigen Daten in die Websites wird ein GraphQL Data Processing Layer verwendet, das gemeinsam mit verschiedenen Plugins einen Datenimport aus diversen Quellen ermöglicht. Daten aus verschiedenen Quellen werden in ein GraphQL Schema umgewandelt und können somit wie Datenbankeinträge verarbeitet werden. Derzeit stehen Plugins beispielsweise für die CMS Contentful, WordPress und Drupal zur Verfügung; auch eine Vielzahl von Features kann bereits per Plugin integriert werden. Dazu gehören Transformer-Plugins für JSON, YAML, JSDoc, Markdown, React Prop-Types und Bilder.

Zu den Plugins für GatsbyJS gehört auch ein Blog Starter auf Basis von Material Design, der bereits an v1.0 angepasst wurde. Das Projekt Gatsby Material Starter baut auf react-md auf, einer Liberary von React-Components, die den Material-Design-Standards folgen. Gatsby Material Starter bringt neben dem Layout-Stil auch eine Integration der FontAwesom-Collection und einen Disqus-Support mit. Mit der Integration einer Material-Design-Layoutoption ist Gatsby übrigens nicht alleine. Mit Angular Material wurde erst kürzlich eine Library für Angular Design veröffentlicht; auch lässt sich mit Material Design Lite eine Framework-agnostische Implementierung der Designsprache zu jedem Webprojekt hinzufügen.

Migration & Dokumentation

Auf der Projektwebsite findet sich ein Migrationsguide für alle Nutzer von Version 0.x sowie eine umfassende Dokumentation zu den Features von GatsbyJS. Das Tutorial, das Schritt für Schritt durch die Arbeit mit dem Framework führt, soll in vier Teilen erscheinen; bisher ist der erste Teil verfügbar, der beschreibt, wie Projekte aufgesetzt und mit grundlegenden Funktionen versehen werden. Das Framework kann via npm bezogen werden und steht unter MIT-Lizenz; auf GitHub finden sich detaillierte Release Notes zu v1.0.