Headless-CMS: Ein Traum für Frontend-Gurus

|
HTML5

WordPress, TYPO3, Drupal, Neos – der Markt ist voll von „gewöhnlichen“ Content Management Systemen. Doch in letzter Zeit haben sich die Anforderungen an ein CMS extrem gewandelt. So war früher lediglich das einfache Bearbeiten von Inhalten auf Webseiten mithilfe eines WYSIWG-Editors das Einsatzgebiet. Heutzutage wollen wir mit nur einer Verwaltungsoberfläche gleich eine hohe Anzahl von Medien bespielen. Angefangen von einer normalen Webseite, über eine mobile App auf einem Smartphone bis hin zum Wearable oder einem Onlineshop. Genau hier kommt ein Headless-CMS ins Spiel. Wieso? Das erkläre ich euch in diesem Beitrag.

Was ist ein Headless-CMS?

Bei dem oben genannten Szenario kommen wir mit einem „normalen“ CMS an unsere Grenzen. Möglicher Ausweg ist ein sogenanntes Headless-CMS. Was ist der Unterschied? Bei einem traditionellen CMS sind das Front- und Backend eng verzahnt. Das sieht bei der Headless-Variante anders aus. Hier kümmert sich das Backend – verbunden mit einer Datenbank – um die Bearbeitungsfunktionalitäten sowie die Bereitstellung einer API (Programmierschnittstelle) und verzichtet komplett auf ein Frontend. Für die Erstellung eines Frontends, welches die im Backend eingetragenen Daten ausliefert, muss sich der Betreiber in Eigenregie kümmern.

Mit einem Headless-CMS kannst du verschiedene Medien bespielen.
HTML5

Mit Headless ist alles möglich

Technisch funktioniert das Ganze wie folgt: Das Backend speichert die Content-Daten in einer Datenbank (z. B. MySQL). Diese Daten werden vom Headless-CMS mit einer REST-API bereitgestellt, über die sie eine Frontend-Applikation abrufen kann. Das ist mit den verschiedensten Programmiersprachen und Technologien möglich. Egal, ob React, vue.JS oder Angular, hier sind euch keine Grenzen gesetzt.

Somit könnt ihr mit einem Headless-CMS bspw. eine Website in PHP und eine iOS-App in Swift entwickeln. Anders als bei einem üblichen CMS, seid ihr nicht nur an PHP und MySQL gebunden. Der Vorteil: Die Daten werden vom Headless-CMS verwaltet und standardisiert bereitgestellt. Somit können sie von unterschiedlichsten Clients und Programmiersprachen einheitlich im JSON-Format abgerufen werden.

Natürlich gilt hierbei immer: Abgerufen werden kann nur das, wofür Berechtigungen vergeben sind. Ihr müsst also keine Angst haben, dass alle Daten über die öffentliche API zur Verfügung stehen.

Eure Vorteile

Ihr könnt ein und dieselbe Datenquelle für eure Applikationen verwenden. Denn die Inhalte werden serverübergreifend über die API abgerufen. Im Umkehrschluss habt ihr es mit weniger Komplexität zu tun, als bei einem normalen CMS. Außerdem könnt ihr eure Frontends in verschiedenen Sprachen entwickeln und habt zumeist zusätzlich eine hervorragende Skalierbarkeit.

Ein Nachteil

Es ist euch nicht möglich, „mal eben“ eine Microsite zusammenzuklicken. Schließlich ist hierfür immer ein Frontend-Entwickler von Nöten, der die Anpassungen macht.

Headless-CMS in verschiedenen Varianten

Zudem sei noch gesagt, dass es verschiedene Varianten eines Headless-CMS gibt. Einige sind in PHP geschrieben, andere in Node.js oder Go. Ein Richtig oder Falsch gibt es hier nicht – schaut selbst, welches System euch zusagt. Eine Übersicht findet ihr unter: https://headlesscms.org/.

Directus

Bei Mittwald haben wir mit Directus ganz gute Erfahrungen gemacht. Das Programm ist in PHP geschrieben und arbeitet mit MySQL als Datenspeicher. So kann es problemlos auf jedem Hosting-Account bei uns betrieben werden. Schaut gerne mal auf deren Webseite vorbei und probiert das System aus. 
Ich wünsche viel Spaß dabei! Solltet ihr Fragen dazu haben, schreibt sie gerne in die Kommentare. ;-)

Directus ist ein Headless-CMS, das Webhoster Mittwald schon getestet hat.
headless cms

Ähnliche Artikel:

Webentwicklung

Joomla! und Barrierefreiheit – Tipps von Expertin Sigrid Gramlinger (Agentur webgras)

Wie werden Joomla-Websites barrierefrei? Expertin Sigrid Gramlinger gibt Einblicke in Accessibility-Features, Tools & das Barrierefreiheitsstärkungsgesetz.

Webentwicklung

Stefan Farnetani (mindscreen) über Barrierefreiheit und die Auswirkung auf Agentur-Prozesse

„Wir können die Zeit nicht mehr zurück in die 90er drehen, als wildwestmäßig programmiert wurde.“ Der Accessibility Specialist Stefan Farnetani (Geschäftsführer ...

Weiße Schrift auf blauem Hintergrund: "Links nicht im neuen Tab öffnen"
Webentwicklung

Sollen Links im selben Fenster oder im neuen Tab öffnen? Wer auf Barrierefreiheit setzt, sollte bei der Frage Regeln beachten. Welche, liest du hier.

Foto auf dem viele Hände von allen Seiten des Bild reinkommen und in der Mitte übereinandern liegen. Darüber liegt Text: Warum Barrierefreiheit für alle wichtig ist.
Webentwicklung

Warum Barrierefreiheit für alle wichtig ist

Die Optimierung für Barrierefreiheit erweitert deine Zielgruppe und ist gut für SEO. Warum du deine Projekte außerdem accessible machen solltest, liest du hier

Weiße Schrift auf blauem Hintergrund: "Barrierefreiheitsstärkungsgesetz - Das müssen Agenturen jetzt wissen"
Webentwicklung

Barrierefreiheitsstärkungsgesetz – Inhalt, Verpflichtungen und Ausnahmen

Im Juni tritt das Barrierefreiheitsstärkungsgesetz in Kraft. Welche Verpflichtungen ergeben sich für dich und deine Agentur? Hier gibt's Klarheit.

Kommentare

Patrick am

Ja, wir brauchen wirklich dringend node.js, um effektiver als Entwickler arbeiten zu können.

Stefan  am

Wann bietet Mittwald endlich nodejs an?

Matthias Andrasch am
Hi,

bin gerade über den Mittwisser-Podcast auf diesen Beitrag gestoßen.

Interessante Entwicklung:
Directus wird künftig als node-first weiterentwickelt, die PHP-Version soll weiterhin bestehen bleiben als Priorität 2.
Siehe https://twitter.com/directus/status/1330642898610688002

VG
Sascha Thattil am
Super Beitrag. Danke für den Hinweis auf Contentful und das es auf PHP läuft. Das kann eine interessante Alternative sein.

Sicherlich kann man auch TYPO3 oder WordPress als Headless nutzen. Und dann im Frontend Sachen, wie von Euch beschrieben, wie React.JS. Damit sind die Webseiten dann auch schneller beim laden.

Ich beschäftige mich nun seit einiger Zeit mit dem Thema. Danke nochmal für die Informationen.

Viele Grüsse
Sascha Thatti
Matthias Kurz am
Spannende Sache, gerade für Angular-Applikationen. @Mirko - du motivierst mich immer, mal wieder Neos unter die Lupe zu nehmen ...
Viele Grüße, Matthias
Mirko Kaufmann am
Ein schöner Tech-Artikel. :)

Der Headless Ansatz lässt sich auch wunderbar in Neos CMS realisieren: In Neos werden die Inhalte gepflegt und dann die Ausgabe einfach im gewünschten Format bestimmt. Entweder in HTML, in JSON oder GraphQL. Die GraphQL API steht aktuell noch als eigenständiges Package zur Verfügung. Der Plan ist es aber die Schnittstelle mittelfristig in den Core von Neos aufzunehmen.

GraphQL Package auf Github:
https://github.com/bwaidelich/Wwwision.Neos.GraphQL

Why monolith? Go headless! Using Neos as content API provider:
https://www.youtube.com/watch?v=KwSwoSKx4cY

Viele Grüße

Mirko
Kristina El-Issa am
Hey Mirko,

vielen Dank – auch für den Hinweis zu Neos. ;-)

Gigahertzliche Grüße
Kristina