Der Zauber um Jamstack und Sanity.io

Was ist Jamstack und warum bekommt es soviel Aufmerksamkeit? Und welche Rolle spielt Sanity.io?

Sascha Gros
Sascha Gros 27. Oktober 2021 · 8 Minuten zum Lesen
Foto von Almos Bechtold auf Unsplash

Stellt euch vor, ihr wollt eine Website aufbauen, auf der ihr eure eigenen Inhalten präsentieren könnt. Viele würden jetzt direkt an Wordpress denken. Aber ihr wollt auch, dass die Website schnell geladen werden kann. Das spricht erstmal nicht direkt gegen Wordpress, aber je mehr Plugins ihr verwendet, desto langsamer wird die gesamte Website. Zusätzlich wollte ihr eure Inhalte auch anderen Plattformen und Integratoren zur Verfügung stellen. Auch das ist theoretisch möglich mit Wordpress, wenn ihr euch das Headless CMS WordPress plugin installiert.

Damit könnten wir schon am Ende dieses Beitrags angekommen sein. Wir nehmen Wordpress und gut ist. Aber so einfach machen wir es uns dann doch nicht. Denn obwohl wir Wordpress über viele Jahre - wohl auch aus Bequemlichkeit - verwendet haben, hatten wir auch schon immer unsere lieben Probleme damit, eigene Inhalte in Wordpress zu erstellen. Viele Wordpress Vorlagen verwenden Plugins wie Elementor oder Visual Composer, um uns das Erstellen von Websites und Inhalten zu erleichtern, aber am Ende wird es trotzdem immer kompliziert, spätestens dann, wenn die Inhalte in eine andere Umgebung migriert oder die Wordpress Vorlage ausgetauscht werden soll. Und das ist genau der Grund, warum wir uns dafür entschieden haben, neue Wege zu gehen.

Wir wollen unsere Inhalte unabhängig machen von deren Verwendung und Darstellung.

Bekanntlich führen viele Weg nach Rom und entsprechend viele Werkzeuge und Ansätze gibt es. Aber in diesem Beitrag soll es nicht darum gehen, diese verschiedenen Ansätze miteinander zu vergleichen. Es soll vielmehr um den sogenannten Jamstack gehen und warum wir Sanity für uns entdeckt und zu schätzen gelernt haben.

Was genau ist ein Jamstack? JAM ist ein Akronym für Javascript, API und Markup und der Begriff wurde initial vom Netflix Mitgründer Mathias Biilmann geprägt. Die inhärente Reihenfolge dieses Akronyms ist allerdings verwirrend, deshalb werde ich auf die einzelnen Bestandteile in einer anderen Reihenfolge eingehen.

  • Die API ist dafür zuständig, unsere Inhalte entgegenzunehmen und sie auch wieder auszuliefern. Die API erwartet hierbei strukturierte Inhalte ohne formgebende Bestandteile, die von einer Vielzahl von Konsumenten entgegengenommen und verarbeitet werden können.
  • Das Markup gibt unseren Inhalten eine Gestalt. Entgegen dem Trend, dass Websites zur Laufzeit im Browser dynamisch mit Javascript erzeugt werden, wird hier alles statisch generiert und als fertig kompilierte HTML Datei ausgeliefert. Das funktioniert am besten mit Generatoren für statische HTML Seiten wie Eleventy oder Hugo.
  • Für den dynamischen Teil kommt dann noch Javascript ins Spiel. Aber anstatt der Hauptakteur wie bei den sogenannten Single Page Applications (SPAs) zu sein, soll Javascript hier nur eine Nebenrolle einnehmen.

Wenn man jetzt API, Markup und Javascript aufeinander legt, dann hat man den JAM Stack. Okay, genau genommen hat man dann den AMJ Stack, aber habt ihr schonmal versucht das auszusprechen?

image

Photo by Dan Cook auf Unsplash

Es gibt nicht DEN einen Jamstack

Der Jamstack beschreibt eine Architektur keine spezifische Technologie. Als ich das erste Mal davon gehört habe, dachte ich sofort an den bekannten MEAN Stack, aber im Gegensatz zu MEAN referenziert der Jamstack keine spezifischen Frameworks sondern verweist eher auf Methoden und Prinzipien. Deshalb war ich initial auch etwas überfordert: es gibt diverse Alternativen sowohl für den API Teil also auch für den Generator Teil und man weiß überhaupt nicht, wo man überhaupt starten soll. Wir haben uns letztendlich für die Kombination aus Sanity und Eleventy entschieden und haben diese Entscheidung bisher nicht bereut.

Heute soll es aber nicht um Eleventy gehen sondern vor allem um eine Einführung in Sanity. Mit Sanity könnt ihr die Datenstrukturen frei definieren, die ihr braucht, um eure Inhalte strukturiert abzulegen. Ihr könnt also definieren, welche Entitäten es gibt (wie z.B. in unserem Fall “Beitrag”, “Kategorie” und “Author”) und diese Entitäten dann auch untereinander in Verbindung setzen. Außerdem könnte ihr frei bestimmen, welche Datenattribute die jeweiligen Entitäten aufweisen sollen und ob sie optional oder verpflichtend auszufüllen sind.

Sanity generiert euch auch direkt eine GraphQL API, die ihr dann benutzen könnt, um eure Inhalte abzurufen oder zu verändern. Als Alternative könntet ihr auch Sanity’s GROQ Abfragesprache verwenden, die ihren Mehrwert vor allem im Filtern und Umwandeln von Datensätzen hat. Uns reicht derzeit aber die GraphQL API, deshalb können wir nicht viel zu GROQ sagen. Aber sobald euch die GraphQL Möglichkeiten nicht mehr ausreichen, könnte GROQ eine gute Alternative sein.

Das Zentrum des Sanity Universums ist Sanity Studio. Das ist der Teil, in dem ihr die meiste Zeit verbringen werden, um Inhalte zu erstellen und zu editieren. Es zeigt eine Übersicht der verfügbaren Inhaltstypen (wie in unserem Beispiel oben Beitrag, Kategorie und Author) und zeigt auch die einzelnen Elemente, die für den jeweiligen Inhaltstyp angelegt wurden. Wenn ihr eines der Elemente anklickt, kommt ihr dann in die Ansicht zum Bearbeiten des Elements und könnt sämtliche Datenattribute für diesen spezifischen Inhaltstyp anpassen. Zusätzlich bringt Sanity Studio - ähnlich wie Google Docs - die Möglichkeit zur Kollaboration in Echtzeit mit sich.

Alle von euch erstellten Inhalte landen am Ende in der Sanity Datenbank, die “Content Lake” genannt wird. Ihr werdet in den meisten Fällen nicht direkt auf diese Datenbank zugreifen müssen (obwohl es Anwendungsfälle wie eine Kommentarfunktion durchaus gibt). Stattdessen werdet ihr euch drauf verlassen müssen, dass die Inhalte über die API sowohl in der Datenbank landen als auch wieder aus ihr abgerufen werden können. Aber es ist wichtig sich darüber im Klaren zu sein, dass ihr die Hoheit über eure Daten an Sanity abtreten werden und falls ihr im Konzernumfeld unterwegs seid oder sicherheitsrelevante Daten speichert, solltet ihr euch vorher über eure Datenschutzvorschriften schlau machen und überprüfen, ob Sanity damit konform ist.

Neben Sanity Studio und der “Content Lake” Datenbank gibt es noch eine dritte Säule im Sanity Universum: Die Entwicklerwerkzeuge. Für Entwickler stellt Sanity eine Reihe von npm Paketen zur Verfügung, die alle den Scope @sanity haben, und zusätzlich ein React Projekt, in dem ihr eure sogenannten Schemata definieren könnt. Ihr könnt zusätzlich auch noch Plugins und Konfiguration in diesem React Projekt hinterlegen und alles lokal zum Laufen bringen. So könnt ihr Änderungen zuerst lokal testen, bevor ihr die Änderungen auf den von Sanity gehosteten Live Server deployed.

Moment, wie bitte?

image

Photo by Lennart Nacke auf Unsplash

Ja, ihr habt mich richtig verstanden. Ihr passt eure ganz persönliche Sanity Studio Version bei euch lokal in einem Node.js / React Projekt an und sobald ihr mit euren Änderungen zufrieden seid, könnt ihr alles auf die Sanity Live Server deployen. Wie genial ist denn bitte das?

Als Full Stack Entwickler habe ich schon an und mit vielen Frameworks und Plattformen gearbeitet, aber ich hatte noch nie im Leben eine derart gute Erfahrung als Entwickler wie bei der Verwendung der Sanity Plattform.

Zusammenfassung

Mit Sanity habt ihr die Freiheit und vollständige Kontrolle darüber, wie ihr eure Inhalte nach euren Vorstellungen modellieren wollt und es gibt so gut wie keine technischen Einschränkungen in der Implementierung eurer Datenstrukturen. Während wir Sanity aktuell nur für unseren Blog verwenden, fallen uns auf Anhieb deutlich mehr Anwendungsfälle ein, bei denen wir zukünftig gerne Sanity zum Einsatz bringen wollen.

Bei all dem Lobgesang gibt es auch einen kleinen Kritikpunkt: es gibt keine Möglichkeit, Sanity lokal auf unternehmensinternen Servern zu betreiben. Ihr habt also keine Kontrolle darüber wie und wo eure Daten gespeichert werden. Aber Sanity ist sich dessen bewusst und hat viel Aufwand betrieben, um einerseits die GDPR zu erfüllen und andererseits die Themen rund um Datenschutz und Datensicherheit ausführlich zu beschreiben.

Insgesamt ziehen wir trotz dieses einen Kritikpunktes ein äußerst positives Fazit und so bleibt uns nicht mehr viel zu sagen außer:

Vielen Dank Sanity für dieses geniale Stück Technologie!