Headless CMS vs. Traditional CMS

Wenn es dazu kommt eine Website neu zu gestalten, gibt es heutzutage viele Möglichkeiten. Es gibt aber auch Vieles was man beachten muss. Während traditionelle CMS Systeme, vor allem WordPress, das Internet dominieren, haben sich durch das Aufkommen neuer Technologien neue Möglichkeiten ergeben, Content zu publishen. In meinem heutigen Beitrag werde ich kurz erklären auf was man alles achten kann, bevor man eine Entscheidung trifft eine Website neu zu gestalten. Bevor ich weiter ins Detail gehe werde ich kurz die oben genannten Begriffe am Beispiel von WordPress, da es unser und auch das meist verwendetes CMS System ist, erklären.

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.

WordPress Traditional vs Headless CMS System (source: https://humanmade.com/wordpress-rest-api-white-paper/)

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 wird weiterhin verwendet, um Daten zu speichern, nur werden diese Daten dann via REST API an das gewünschte Frontend Framework ausgeliefert.

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, können Daten im Browser schnell und effektiv angezeigt werden.

Das bedeutet natürlich nicht, dass klassische WordPress Websites nicht mehr verwendet werden sollen. 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 ein System von Grund auf neu als Headless CMS mit zum Beispiel ReactJS (ja wir kriegen nicht genug von React) als Frontend erstellt werden 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, würde man sich für die klassische WordPress Variante entscheiden, könnten statische HTML Pages teilweise übernommen werden. Ebenfalls könnten Style Elemente mit bestimmten Anpassungen wiederverwendet werden. Spezielle Funktionen müssten jedoch nachimplementiert werden. 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 müssten entweder mit der WordPress HTTP API (wp-remote-get und wp-remote-post) oder wiederum mit AJAX geladen werden. 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, der via WordPress REST API geholt werden kann. Dynamischer Content kann via API Requests vom bereits vorhandenen Backend direkt in unser React Frontend geladen werden. Auch der notwendige Login kann leicht gehandhabt werden, da etwaige Tokens nun client-seitig gespeichert werden. Des Weiteren profitieren wir natürlich von allen Vorteilen eines Headless CMS, die vorhin schon erwähnt worden sind. Spezielle Features können von den Entwicklern direkt in ReactJS umgesetzt und implementiert werden. 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.
Der große Nachteil allerdings bei diesem Ansatz ist, dass man das System komplett von neu aufbauen muss. Legacy HTML Pages können nicht auf die Form von React gebracht werden, 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 müssen größtenteils alle Komponenten neu designed werden. 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 Content dargestellt, hinzugefügt und angepasst werden kann 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. 😉