Headless CMS vs. Traditional CMS

Was bedeutet headless bzw. traditionelles CMS eigentlich?

WordPress an sich bietet alles was man braucht, um eine Website zu erstellen. Des Weiteren stellt es eine große Anzahl an Plugins und Themes zur Verfügung. Jeglicher Content wird am Backend erstellt, gespeichert, verwaltet und in einer verknüpften Datenbank abgesichert. Ebenfalls wird das Design der einzelnen Seiten am Backend konfiguriert. Das bedeutet es gibt eine enge Verbindung zwischen Backend und Frontend.

Mit Einführung der WordPress REST API entstanden völlig neue Anwendungsfälle und der Weg für eine headless Variante von WordPress wurde frei gemacht. Grundsätzlich ermöglicht die REST API das Bereitstellen von WordPress Daten für jegliche Clients. Der große Vorteil darin besteht, dass der Entwickler nun selbst entscheiden kann welche Frontend Technologie er nun verwenden möchte. WordPress verwendet man weiterhin, um Daten zu speichern. Nur liefert man diese Daten dann via REST API an das gewünschte Frontend Framework aus.

Aber warum sollte man nun auf ein Headless System wechseln?

Der größte Kritikpunkt von Entwicklern in den letzten Jahren waren die vielen Einschränkungen, die das Templating System von WordPress mit sich bringt und vor allem den Entwicklern wenig Spielraum für neue innovative Technologien, die es im Web-Frontend Bereich ja eigentlich genügend gibt, bietet. Im Fall von einer headless Version mit WordPress ist man dadurch nicht an die PHP Templates gebunden, sondern kann in einer Sprache wie zum Beispiel JavaScript Daten anzeigen lassen. Daher liegt es nun bei dem Entwickler sich ein geeignetes Konzept zu überlegen und den Client dann entsprechend an die API anzubinden.

Frontend-Entwickler müssen sich nun bei zukünftigen Änderungen nur noch über die Daten Gedanken machen, die das Backend ihnen bereitstellt. Hierbei kann man als Entwickler seine Kreativität spielen lassen und auf State-of-the-art Frameworks wie ReactJS, Vue.js oder Angular zurückgreifen. Meistens ist es schneller (und auch angenehmer für den Entwickler) ein User Interface komplett neu aufzuziehen, als auf basierenden PHP Templates immer wieder neue Änderungen durchführen zu müssen.

Heutzutage muss eine Website vielen Anforderungen entsprechen

Neben Responsiveness und der klaren Darstellung der wichtigsten Punkte gehört die Reaktionsfähigkeit einer Seite zu den wichtigsten Einflussfaktoren für ein gutes User-Empfinden. Lange Ladezeiten mindern die User Experience. Wobei durch die Separierung von WordPress Backend und einem Client-seitigen Frontend wie zum Beispiel ReactJS, kann der Browser Daten schnell und effektiv anzeigen.

Das bedeutet natürlich nicht, dass man klassische WordPress Websites nicht mehr verwenden soll. Ganz im Gegenteil, WordPress hat sich in den letzten Jahren nicht um sonst als meistverwendetes CMS System etabliert. Mit Unterstützung von Plugins und Templates lassen sich ganze Websites in kurzer Zeit neu gestalten. Mittlerweile gibt es fast für jeden Usecase ein geeignetes Plugin, sei es ein Kontaktformular, Slider Funktionalität oder eine Kalender Integration. Auch die Preview Funktionalität ist ein großes Plus. Vor allem für Nicht-Entwickler ist die Bedienung zur Content Eingabe leicht und intuitiv gestaltet und durch den WYSIWYG Editor oftmals unkompliziert zu bedienen. Durch die enge Verlinkung zwischen Frontend und Backend kann man stets die aktuelle Seite abrufen.

Benutzt man all diese Plugins und Funktionalitäten nach dem Basis Schema, gibt es eigentlich keinen Grund von diesem System wegzugehen. Gibt es jedoch Änderungswünsche und sind Individuallösungen erfordert, wird jedem Entwickler schnell klar warum man davon besser die Finger lassen sollte. Änderungen in Plugins erfordern oft viel Expertise und dauern daher oft auch länger als geplant. Deswegen stellt sich die Frage, ab wann man ein System von Grund auf neu als Headless CMS mit zum Beispiel ReactJS (ja wir kriegen nicht genug von React) als Frontend erstellen sollte. Und wann es besser ist die traditionelle Variante von WordPress zu verwenden.

Ein Beispiel

In unserem Beispiel ist es die Aufgabe eine bestehende Website neu zu implementieren und das System dabei auf WordPress umzustellen. Die Website besteht aus teilweise statischem Content, allerdings auch einen großen Teil an dynamischen Content, der über eine externe API ausgeliefert wird. Darüber hinaus soll es einen eigenen Login Bereich geben, der user-spezifische Daten anzeigen soll.

Das alte System ist ebenfalls ein CMS System. Das heißt, wenn man sich für die klassische WordPress Variante entscheidet, könnte man statische HTML Pages teilweise übernehmen. Ebenfalls könnte man Style Elemente mit bestimmten Anpassungen wiederverwenden. Spezielle Funktionen müsste man jedoch nach implementieren. Da diese individuell sind können sie auch keinem bestehenden Plugin entnommen werden. Das bringt wiederum eine große Menge an Entwicklungsarbeit mit sich. Externe Requests muss man entweder mit der WordPress HTTP API (wp-remote-get und wp-remote-post) oder wiederum mit AJAX laden. Die eingehenden Daten würde man mit Hilfe der vordefinierten WordPress Templates darstellen.

Auf der anderen Seite, bei Verwendung der Headless CMS Variante und der Trennung von Backend und Frontend sieht es anders aus. Angenommen wir entscheiden uns für die Verwendung von ReactJS als Frontend Framework. In diesem Fall haben wir statischen Content, den man via WordPress REST API holen kann. Dynamischer Content können wir via API Requests vom bereits vorhandenen Backend direkt in unser React Frontend laden. Auch den notwendige Login kann man leicht handhaben. Da etwaige Tokens nun client-seitig gespeichert werden. Des Weiteren profitieren wir natürlich von allen Vorteilen eines Headless CMS. Spezielle Features kann der Entwickler direkt in ReactJS umsetzen und implementieren. Durch die strikte Abkapselung vom Backend, sind auch Änderungen in der Zukunft leicht umzusetzen. Von Vorteil ist natürlich auch die Expertise und das Knowhow, das wir uns mittlerweile in React angeeignet haben.

Nachteil

Der große Nachteil allerdings bei diesem Ansatz ist, dass man das System komplett von neu aufbauen muss. Legacy HTML Pages kann man nicht auf die Form von React bringen, da die Struktur schlichtweg eine andere ist. Da ReactJS mit einer anderen Styling Struktur arbeitet, als reines HTML das tut, kann auch das Design nur marginal übernommen werden. Die Möglichkeit der Übernahme eines Grundstylings ist zwar gegeben, jedoch muss man größtenteils alle Komponenten neu designen. Das bedeutet auch wenn das Ergebnis schön und modern ist, wird diese Variante vermutlich den größeren Zeitaufwand bedeuten.

Fazit

Im Grunde genommen kann man sagen, dass beide Varianten durchaus möglich und vorstellbar sind. Eine klassische WordPress Variante liefert vermutlich schneller ein annehmbares Resultat, was aber dann, wenn es ums Detail geht jede Menge Kleinarbeit mit sich bringt. Die Implementierung in ReactJS ist wohl oder übel die Variante, die mit dem größeren Aufwand verbunden ist.  Der große Vorteil darin ist aber, dass man nach Fertigstellung ein gutes, leicht wartbares Produkt hat, welches schnell, effizient und innovativ ist. Im Großen und Ganzen kann man nicht sagen, dass es eine perfekte Lösung gibt. Für Websites mit statischem Content ist das traditionelle WordPress definitiv die bessere Entscheidung. Die Leichtigkeit mit der man Content darstellt, hinzufügt und anpasst, ist einfach unübertrefflich.

Gibt es jedoch eine große Anzahl an individuellen Features und sollen verschiedene Kanäle angesprochen werden, ist die Headless CMS Variante die vermutlich bessere. Als Entwickler strebt man stets neue Technologien an und ist interessiert Neues zu lernen. Durch die große Auswahl an Frameworks und Möglichkeiten in diesem Bereich ist es eine einfache und zielorientierte Variante, Entwickler glücklich zu machen und dabei ein modernes Produkt zu schaffen. ?