Frontity – Headless CMS mit WordPress & React

Es gibt viele Möglichkeiten, eine WordPress-Seite zu erstellen. Du kannst sowohl ein kostenloses CMS verwenden, als auch ein professionelles Design kaufen. Immer weiter verbreitet sind sogenannte Headless CMS. Während ein traditionelles CMS typischerweise die Inhalts- und Präsentationsschichten einer Website kombiniert, wird ein Headless CMS nur den Inhalt verwendet und konzentriert sich ganz auf die administrative Schnittstelle für die Ersteller von Inhalten. Es erleichtert durch die einfache Bedienbarkeit den Workflow enorm. Das Headles CMS kümmert sich nicht um Präsentationsschichten, Vorlagen, Seitenstruktur oder Design, sondern sorgt für die Speicherung des Inhalts und bietet über gekoppelte APIs Zugang zu anderen Komponenten wie Analysetools. Es eignet sich dank der Entkopplung von Inhalt und Darstellung besonders, wenn Du mehrere Apps und Webseiten gleichzeitig mit Inhalten füllen möchtest.

Frontity WordPress API React
Frontity – WordPress + Json API + React Frontend

Welche Vorteile bringt ein Headless CMS mit sich?

Mit einem Headless CMS kannst Du nicht nur mehrere Apps und Webseiten gleichzeitig mit Content beliefern, sondern dabei auch viel Zeit sparen, da der Content nur einmalig veröffentlicht werden muss. Dadurch erreichst Du Deine Kunden schneller und hast einen Wettbewerbsvorteil gegenüber Mitbewerbern. Durch die Trennung von Front- und Backend bist Du zudem sehr flexibel. Redakteure können in jedem beliebigen kopflosen CMS arbeiten, während Entwickler in ihrer bevorzugten Programmiersprache(z. B. Ruby, PHP, Java oder Swift) das Frontend erstellen. Beides wird dann einfach über APIs (wie JSON oder XML) miteinander verbunden. Durch ebendiese APIs ist zudem eine hohe Skalierbarkeit möglich, eine Ausgabe auf beliebig vielen Plattformen ist möglich. Ebenso sind dynamische Abfragen möglich: Inhalte können zum Beispiel für eine Website nachgeladen werden, ohne die Website neu zu laden.

Während traditionelle CMS-Systeme dazu neigen, schwerfällig und komplex zu sein (die Anbieter versuchen, alle verfügbaren Funktionen in einem Tool anzubieten), konzentrieren sich Headless-Systeme auf die Inhaltsverwaltung; sie halten die Dinge einfach für diejenigen, die sie täglich benutzen.

Ein weiterer wichtiger Aspekt ist die Software-Sicherheit. Da die Inhalte in der Regel über ein hochleistungsfähiges Content Delivery Network (und nicht direkt aus der Datenbank) bereitgestellt werden, wird das Risiko von verteilten Denial-of-Service-Angriffen (DDOS) verringert. Wenn Du mehr über die verschiedenen Attacken auf Webseiten erfahren möchtest, kannst Du das hier nachlesen.

Ein weiterer Pluspunkt ist die Geschwindigkeit: Eine Anwendung, die sich nur auf die Auslieferung von Inhalten fokussiert, weist normalerweise eine niedrigere Reaktionszeit auf. Durch die Trennung von Inhalten und Auslieferung können die Systeme optimal performen.

Nicht zuletzt sind auch die Betriebskosten ein wichtiger Aspekt bei der Wahl eines CMS. Du sparst durch die einmalige Erstellung des Contents für diverse Plattformen nicht nur viel Zeit, sondern auch einiges an Geld, da in der gleichen Zeit mehr Nutzer erreicht werden können. Weiterhin werden Software-Lizenzkosten reduziert, da mittels bei einem Headless CMS eine Software für alle Plattformen verwendet wird.

TechTalk über Headless CMS

Gibt es Nachteile?

Wie bei jeder guten Anwendung gibt es auch bei Headless CMS einige Nachteile. Das fehlende Frontend benötigt meist Tools zu Ergänzung. Durch die komplexe Konfiguration der API’s für Zugriffsrechte, könnte unter Umständen zu Sicherheitsproblemen auftreten. Ein weiterer Nachteil ist die Verwendung mehrerer Softwaresysteme. Um Inhalte erfolgreich zu veröffentlichen, müssen die individuellen Software-Anforderungen der jeweiligen Systeme beachtet werden. Weiterhin kann das Headless CMS durch die begrenzten Fähigkeiten der API limitiert werden.

Welche Headless CMS gibt es?

Im Internet werden zahlreiche kostenlose und kostenpflichtige Headless CMS angeboten. Eine Auswahl ist oft schwer. Wir wollen Dir unseren Favoriten, Frontity vorstellen. Weitere Open-Source CMS werden bei Hosteurope und cmsstash vorgestellt.

Frontity wurde als Open Source Projekt mit der Apache 2.0-Lizenz veröffentlicht. Somit kannst Du das Framework für jedes Deiner Projekte kostenlos nutzen.

Auf der offiziellen Webseite (https://frontity.org/) erfährt man weitere Details über dieses Headless CMS. Dort schreiben die Entwickler, dass es Dir die einfache Erstellung eines React-basierten Frontends für eine kopflose WordPress-Seite ermöglicht. Soweit so gut. Doch was ist „React“?

React – Facebook Technologie für Jedermann

React (https://reactjs.org/) ist eine super leistungsfähige JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Sie wurde von Facebook erstellt und übernimmt die Front-End-Entwicklung. Kurz gesagt: Reactvereinfacht die Erstellung interaktiver Benutzeroberflächen. Für jede Applikation kannst Du einfache Ansichten erstellen und React aktualisiert und rendert effizient genau die richtigen Komponenten, sobald Du Content hinzufügst. Durch Deklarative Ansichten ist Dein Code besser lesbar und einfacher zu debuggen.

REACT JS Logo
React JS Logo

React ist außerdem komponentenbasiert. Du erstellst einfache Komponenten wie Textblöcke und Buttons und kombinierst sie dann zu komplexen Benutzerinterfaces. Möchtest Du irgendwann Deine Webseite erweitern, musst Du nicht alles komplett neu entwerfen. Neue Funktionen können in React entwickelt werden, ohne bestehenden Code neu schreiben zu müssen. Die React API rendert außerdem direkt auf Deinem Server, was wiederum Deinen Workflow erhöht. Durch eine der größten Open Source Front-End Communitys ist Dir schneller Support garantiert, zahlreiche Tutorials helfen Dir beim Erlernen der React-Funktionen. (z.B. Tutorial auf der offiziellen Webseite)

Funktionsweise von Frontity

Nachdem wir jetzt wissen, welches Frontent unser Headless CMS nutzt, gehen wir nun detaillierter auf Frontity ein. Neben React nutzt Frontity wie schon angesprochen WordPress. Dies hat mehrere Gründe, z.B. die weite Verbreitung und die größte Open Source CMS Community.

Um ein WordPress-Theme mit React zu erstellen, müssen Entwickler viele verschiedene Dinge lernen und konfigurieren: Bündelung, Transpiling, Routing, Server-Rendering, Abrufen von Daten aus WordPress, Statusverwaltung, Verwaltung von css, Linting, Testen

Deshalb gibt es zahlreiche React-Frameworks, wie z.B. Next.js und GatbsyJS. Beide können mit WordPress arbeiten, aber sie sind nicht auf WordPress ausgerichtet. Daher muss der Entwickler noch einige Konfigurations- und Zusatzarbeit machen.

  • Frontity hingegen ist ein eigenwilliges React-Framework, das sich auf WordPress konzentriert:
  • Fokussiert auf WordPress: Jeder Teil des Frameworks wurde vereinfacht und für die Verwendung mit WordPress optimiert.
  • Opinionated Framework: Entwickler müssen nicht herausfinden, welche Tools sie für Dinge wie css oder State Management verwenden sollen.
  • Content und CSS getrennt: Wie bei jedem Headless CMS ist auch bei Frontity der Inhalt vom CMS abgekoppelt, was Dir die oben angesprochenen Vorteile liefert
Headless CMS erklärt
Bildquelle: https://github.com/frontity/frontity

Wieso ausgerechnet Frontity?

Frontity hat einige erstaunliche Features, welche Dir einen optimalen Workflow ermöglichen:

  • Entwicklung ohne zusätzliches Setup: Du kannst dich nun auf das Erstellen der Webseite Fokussieren. Dinge wie das Aufsetzen von React, Webpack, Babel, SSR, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing übernimmt das Framework.
  • Sehr kurze Ladezeiten: Frontity sendet ein HTML, das sofort bereit ist, mit dem Navigieren auf der Website zu beginnen, sodass der Benutzer das Laden kaum bemerkt. Dieses HTML ist voll funktionsfähig und ohne JavaScript navigierbar. Sobald React lädt, übernimmt es die Kontrolle über die Anwendung, ohne dass es die Benutzer bemerken.
  • Instant in-app navigation: Sobald React geladen ist, werden verlinkte Daten automatisch abgerufen. Benutzer müssen somit niemals warten, wenn sie innerhalb der Anwendung navigieren.
  • Rendering auf dem Server: Frontity antwortet mit einer vollständig ausgefüllten HTML-Datei, die mit React generiert wurde. Dies reduziert die Ladezeit. Der Inhalt wird über die WordPress REST API abgerufen. Sobald React im Browser geladen ist, übernimmt er die Kontrolle über die Seite und beginnt mit seiner „Magie“.
  • Erweiterbarkeit: Frontity erlaubt Dir sehr einfach deinem Theme über Erweiterungen und NPM-Pakete neue Funktionen hinzuzufügen, ohne diese von Grund auf neu erstellen zu müssen. Au der Webseite von Frontity werden diverse Erweiterungen bereits angekündigt. Einige Beispiele sind Yoast SEO, AdSense, SmartAds, DoubleClick für Publisher, OneSignal Push-Benachrichtigungen, Disqus, Google Analytics, Google Tag Manager oder ComScore. Abgesehen von diesen Erweiterungen gibt es viele andere Schnittstellen-Tools, die speziell für Frontity entwickelt wurden: Context-Routing, Swipe-Navigation, unendliches Scrollen, html-to-react, gutenberg-to-react, usw. Die Themes können auch jedes der 80.000 React-Pakete verwenden, die derzeit in npm verfügbar sind.
  • Klein & skalierbar: Der Frontity-Server ist so klein, dass er perfekt für serverlose Anforderungen geeignet ist. Das bedeutet nahezu unendliche Skalierbarkeit für das Frontend. Der gesamte Servercode ist in einer Datei gebündelt und bereit, mit serverlosen Diensten wie Vercel (jetzt mit seiner CLI) oder AWS Lambda zu arbeiten. Frontity ist auch für die horizontale Skalierung in jedem Node.js-Server vorbereitet.
  • TypeScript-Unterstützung: TypeScript kann alternativ zu JavaScript genutzt werden
  • ES6 Unterstützung: ES6 auch ECMAScript6 oder JavaScript 6 wurde 2015 entwickelt und wird mittlerweile von jedem modernen Browser unterstützt. Kurz gesagt verkürzt es die Ladezeiten der Webseiten. Um jedoch mit älteren Browsern kompatibel zu sein, erzeugt Frontity zwei Arten von JavaScript: Eines in ES6 für moderne Browser, das andere in ES5 für die alten Browser, die ES6 nicht unterstützen. Moderne Browser, die ES6-Module unterstützen, fordern das ES6-Bundle an, was sich in einer reduzierten Bundle-Größe und einer kürzeren Evaluierungszeit im Browser niederschlägt. Dies garantiert, dass die Leistung in den modernen Browsern nicht beeinträchtigt wird, und gewährleistet gleichzeitig die Abwärtskompatibilität mit den alten Browsern.
  • Unterstützt WordPress.com & WordPress.org: Frontity kann mit verschiedenen „Quell“-Erweiterungen arbeiten. Die erste Beta-Version enthält eine „wp-source„, die mit der REST-API jeder beliebigen WordPress.com- oder WordPress.org-Site funktioniert. Unabhängig davon, ob Du eine selbst gehostete Seite hast oder nicht, wird Frontity damit zurechtkommen. Frontity wurde außerdem so konzipiert, dass es in Zukunft auch andere Quellen unterstützen kann (wie die GraphQL-API für WordPress).
  • Unterstützt „multiple sites with a single installation“: Vergleichbar mit WordPress Multisite: Frontity ermöglicht es, mit nur einer Installation eine beliebige Anzahl von Seiten zu verwalten.
Frontity NPM Downloads
Im Mai 2019 hatte Frontity bereits mehr als 12,700 npm Downloads.

Voraussetzungen

Um Frontity zu nutzen, gibt es einige technische Voraussetzungen, aber auch Du als Entwickler solltest einige Skills haben. Fangen wir mit den Skills an:

  • Du musst dich mit der Inhaltsverwaltung in WordPress auskennen
  • Du benötigst für die Gestaltung des Frontends Kenntnisse über React. Diese kannst Du leicht im Tutorial auf der offiziellen Webseite von React erlernen

Technische Voraussetzungen sind:

  • Eine WordPress-Installation – Diese kann lokal oder auf einem Web-Server gehostet werden, Du kannst auch eine auf WordPress.com gehostete Website verwenden. Wenn Du Dein erstes Frontity-Projekt startest, bekommst Du zunächst eine Testseite, sodass Du beim ersten Ausprobieren von Frontity eine Art Vorlage hast.
  • Node.js sollte lokal oder auf einem Web-Server mit Javascript installiert sein – Falls Du es noch nicht hast, kannst Du Node.js von der offiziellen Website beziehen. Dadurch werden auch npm und npx zusammen mit Node.js installiert. Du benötigst diese Tools, um Frontity-Befehle während der Einrichtung und Entwicklung des Projekts auszuführen.

Wie fange ich nun mein Projekt an?

Am Anfang eines neuen Projektes ist man oft ratlos, was man genau machen muss. Frontity hat dafür sehr verständliches Tutorial erstellt: https://docs.frontity.org/

Dort kannst Du die Basics erlernen, aber mit Beispielsweise SEO auch weiter in die Materie einsteigen. Außerdem gibt es eine Demoseite, auf der Du Dir eine Beispielseite ansehen kannst: https://twentytwenty.frontity.org/

Frontity TwentyTwenty Demo
Bildquelle: https://frontity.org/ TwentyTwenty Theme Demo

Anleitung zum Aufsetzen des eigenen Frontity Projektes

Node.JS muss auf der lokalen Testumgebung oder dem Server installiert sein. In diesem Tutorial nutze ich meinen RaspberryPi um lokal ein eigenes Frontity Theme zu erstellen.

Ich starte mein Terminal, zu dem Verzeichnis navigieren in dem das neue Projekt erstellt werden soll

Ich richte meins im Verzeichnis „Tutorials“ ein und geben dann „npx frontity create“ gefolgt von dem Namen des neuen Projekts ein.
Für dieses Beispiel werde ich meins einfach „my-app“ nennen.

Frontity Anleitung Erstinstallation
Ordnererstellung und Node.js App bauen

Die Einrichtung beginnt und man muss ein Starttheme zu wählen, die Wahl liegt zwischen zwei Themen, Mars und Twenty-Twenty.
Ein Frontity-Theme ist wie ein Theme in WordPress, es erlaubt Dir das Aussehen und die Gestaltung der Website vollständig anzupassen.
Es wird unter Verwendung von React-Komponenten anstelle von PHP-Vorlagendateien erstellt.

Mars ist ein Minimal-Theme, um den Einstieg in Frontity zu erleichtern. Wer Frontity zum ersten Mal nutzt sollte mit diesem Thema beginnen.

Jetzt wird man noch gefragt, ob man regelmäßige Emails bekommen will. Danach ist der Setup-Prozess abgeschlossen und man kehrt zur Eingabeaufforderung zurück.

Frontity hat für Dich ein neues Verzeichnis mit dem von Dir gewählten Projektnamen angelegt.
Wechsel in das Verzeichnis mit „cd“ und dem Namen Deines Projekts, in meinem Fall war das also „my-app“.

Frontity Anleitung nach der Installation
Frontity Ordneransicht nach der Installation

Jetzt kannst Du den Entwicklungsserver hochfahren. Ich gebe dazu im Verzeichnis „my-app“ den Befehl „npx frontity dev“ ein und drücke Enter.

Frontity bringt einen Webserver auf Port 3000 in Gang. Um sich seine neue Seite anzuschauen, gebe „localhost:3000“ in die Adressleiste Deines Browsers ein.

Frontity Anleitung Server im Development Mode gestartet
Die App wurde jetzt im Development Mode gestartet und hört auf den Port :3000

Jetzt sieht man die Beispielseite im Browser mit dem Mars Theme und Testbeiträge von Frontity.

Ansicht Mars Theme im Development Mode nach Installation
Ansicht des Frontends vom Mars Theme auf meinem lokalen Server

Der nächste Schritt wird sein den Inhalt Deiner WordPress-Seite mittels der Json-API zu holen. Dazu solltest Du ein 2. Terminal öffnen, damit Änderungen sofort sichtbar sind. Ich öffne die Datei frontity.settings.js und habe jetzt einige Einstellmöglichkeiten. Z.b. kann ich hier schon das Menü, weitere Module, den Titel und die Beschreibung ändern. Für uns ist Zeile 48 wichtig in der steht: „api“: „https://test.frontity.org/wp-json“.

Diese Zeile ändern wir zu unserer Domain, auf der das WordPress läuft. Ich habe noch den Namen und das Menü etwas bearbeitet. Hier siehst Du die Startseite out-of-the-box.

Frontity Lightweb Media Mars Theme
Ansicht Startseite mit JSON Daten von Lightweb-media.de

Und hier ein Beispielbeitrag:

Ansicht einzelner Beitrag
Ansicht eines Beitrages. Natürlich fängt das Styling jetzt erst an..

Somit wäre die Einrichtung komplett. Jetzt kannst Du in Ruhe dein Theme stylen und dich ausprobieren.

Die Frontity Community bietet jetzt schon eine Handvoll Themes, die man nutzen kann. Darunter zählen:

Fazit

Ein Headless CMS, insbesondere das relativ neue Framework Frontity bietet Dir bei der Auslieferung von Content an verschiedene Seiten zahlreiche Vorteile gegenüber einem Klassischem CMS. Es ist gewiss nicht leicht als Nutzer von einem „all in one“ CMS an ein Framework zu gewöhnen, dennoch solltest Du es aufgrund der zahlreichen Vorteile in Betracht ziehen.

Immer Informiert bleiben..

Trage hier Deine E-Mail Adresse ein, um unseren Newsletter mit den wichtigsten Neuigkeiten, Tools und Tipps zu erhalten:

Vielen Dank für die Eintragung

Irgendwas lief schief..

Hinterlasse eine Anmerkung