SPAs mit Wordpress

In einer Welt, in der neue Technologien wie Pilze aus dem Boden schießen, ist es schwer oft zu differenzieren welche Technologie wirklich nachhaltig bleibt. Seit Beginn der Softwareentwicklung hat sich einiges bewährt. Gerade in der Webentwicklung hat sich in den letzten 15 Jahren so einiges getan. Trotz dessen und trotz technischer Alternativen hat sich ein wesentliches Merkmal und eine Technik über all die Jahre halten können: der page reload beim Seitenwechsel.

Bei einem Seitenwechsel verschwindet die komplette Seite und baut sich von Neuem wieder auf. So verhalten sich die meisten Seiten im Web und so ist auch das klassische Verhalten einer Webseite. Die meisten Nutzer des Internets haben sich bereits daran gewöhnt und sollten sich nicht daran stören. Doch kann man die Welt des Internets um so viel besser machen mit “Single Page Applications”. Ähnlich wie bei einem klassischen Software Verhalten, können Inhalte dynamisch nachgeladen werden - ohne einen kompletten Neuaufbau der Seite.

Single Page Applications (SPA)

SPAs sind Webanwendungen (dazu zählen auch Webseiten), die im Gegensatz zu einer klassischen Webanwendung aus einem initialen Seitenaufruf besteht und dabei der Inhalt dynamisch erzeugt bzw. nachgeladen wird. Um die Inhalte dynamisch zu laden kommunizieren SPAs meist mit einer Schnittstelle (API; application programming interface). Bei SPA ist meist eine strikte Trennung zwischen dem Frontend (HTML, CSS, JS) und dem Backend (API und Businesslogic) vorgesehen. Das hat verschiedene Vorteile.

Zum einen wird die Serverlast im Betrieb drastisch reduziert. Der Client wird Initial mit sämtlichen Informationen ausgestattet und kümmert sich selbst um die Inhalte, die der Client benötigt. Hierbei Antwortet der Server meist mit einer schlanken JSON Struktur, die auch pro Anfrage auf dem Server gecacht werden kann.

Ein weiterer Vorteil bietet die Möglichkeit bei SPAs eine Offline Funktionalität zu integrieren oder vollständig als Progressive Web App zu entwickeln. Dadurch dass der Webclient bereits mit ausreichenden Daten ausgestattet ist, um selbständig auf dem Gerät zu existieren und nur Inhalte über eine Schnittstelle ausgeliefert werden, kann eine Bedienbarkeit für bereits geladenen Inhalt zur Verfügung gestellt werden. Zudem kann eine Synchronisation mit dem Server via Service Worker, sobald der Nutzer wieder online ist, mit realisieren.

JavaScript Framework - VueJS

Die Umsetzung von Single Page Applications lassen sich am Besten mit JavaScript Frameworks realisieren. Frameworks unterstützen mit integriertem Datenhandling, Routing und Databindings. Die bekanntesten in dem Bereich sind Angular und React. Doch auch VueJS wird im Entwickler Kreis immer bekannter und das auch berechtigt.

Der Einstieg in VueJS ist einfach, so dass schnell die gewünschten Ergebnisse erzielt werden. Dennoch so weit skalierbar um auch komplexere Anwendungen effizient umzusetzen.

VueJS wurde von Evan You entwickelt, der bereits bei Google mit unter am Angular Framework entwickelt hatte. Er startete mit seinem Framework als kleines Nebenprojekt. Doch als VueJS immer bekannter wurde und auch Taylor Otwell, der Entwickler von Laravel, einem beliebten PHP Framework, auf VueJS gestoßen ist, konnte sich You komplett seinem Nebenprojekt widmen. Mittlerweile existiert VueJS in der 2. Version und hat eine große Anhängerschaft und entwickelt sich immer weiter unter dem zwei großen Aspekten “Simplicity” und “Performance”.

Um erfolgreich eine pflegbare bzw. dynamische Single Page Application realisieren zu können, braucht man auch das serverseitige Gegenstück. Hier fungieren sogenannte “Headless Content Management Systeme” als optimale Lösung. Das sind CM Systeme, die kein spezielles Frontend besitzen sondern meist über eine REST API Antworten. Und dies wiederum ist perfekt für die Realisierung von SPAs.

WP REST API

Den Meisten müsste Wordpress ein Begriff sein. Als weit verbreitetes Blogging System, findet Wordpress auch in anderen Bereichen im Web seinen Platz. Zum Beispiel als ecommerce Plattform, als Unternehmenswebseite oder seit dem Update zu 4.7 auch als headless CMS. Denn mit diesem Update wurde die WP REST API im Core integriert. Eine genaue referenz findet man auf https://v2.wp-api.org/.

Durch diese Neuerung in Wordpress und mit VueJS als das Framework unserer Wahl. Lassen sich benutzerfreundliche editierbare Single Page Applications mit Wordpress im Hintergrund umsetzen. Ein Kickstart Projekt findet ihr hier auf Github. https://github.com/comaag/spa-wp-vuejs

Über den Autor:

Danny Stey studierte Medientechnik an der Hochschule Deggendorf mit dem Schwerpunkt Medieninformatik und ist seit 2010 als Webentwickler bei der Münchner Online Agentur coma AG angestellt. Seit 2016 leitet er zusammen mit Vorstand Martin Kirmaier die Unit coma DEV. Mit über 8 Berufsjahren konnte er sich ein fundiertes Wissen in den Bereichen der Frontend-, sowie Backend-Entwicklung aneignen.