WordExpress-Projektexperimente mit der Einführung von GraphQL in WordPress

Als Facebook 2012 damit begann, seine HTML5-gesteuerten mobilen Anwendungen als native iOS- oder Android-Apps neu zu gestalten, erfand das Unternehmen GraphQL. Diese neue Open-Source-Abfragesprache wird als direkter Ersatz für REST angekündigt. GraphQL bietet eine effizientere Möglichkeit, das Interaktionsvolumen zu unterstützen, das jeden Tag in den Facebook-Apps stattfindet, aber es ist datenbankunabhängig und so konzipiert, dass es über Facebook hinaus verwendet werden kann.

Obwohl GraphQL noch relativ neu ist, verwenden große Unternehmen wie Intuit, Coursera, Pinterest und Shopify es in der Produktion. Letzten Monat kündigte GitHub GraphQL-Unterstützung für seine GitHub-API an, um einige der Nachteile seiner REST-Architektur zu beheben.

GraphQL bietet eine neue Möglichkeit, die Kommunikation vom Client zum Server zu strukturieren, wodurch das Abrufen von Daten effizienter wird. In seinem Artikel GraphQL im Zeitalter der REST-APIs fasst Petr Bela den Unterschied zwischen den beiden Architekturtypen zusammen:

Die Stärke von GraphQL beruht auf einer einfachen Idee – anstatt die Struktur der Antworten auf dem Server zu definieren, wird dem Client die Flexibilität gegeben. Jede Anfrage gibt an, welche Felder und Beziehungen zurückgegeben werden sollen, und GraphQL erstellt eine auf diese spezielle Anfrage zugeschnittene Antwort. Der Vorteil: Es wird nur ein Roundtrip benötigt, um all die komplexen Daten abzurufen, die sich sonst über mehrere REST-Endpunkte erstrecken könnten, und gleichzeitig nur die Daten zurückzugeben, die tatsächlich benötigt werden, und nicht mehr.

Letzten Monat gab Facebook bekannt, dass GraphQL die Phase der „technischen Vorschau“ verlässt und nun produktionsbereit ist. Es wurde in vielen verschiedenen Programmiersprachen implementiert und wurde bereits von Unternehmen übernommen, die einen effizienteren Datenzugriff wünschen.

WordExpress bringt GraphQL in WordPress

Ramsay Lanier, ein JavaScript-Frontend-Entwickler, der bei nclud in Washington, DC, arbeitet, hat eine GraphQL-basierte WordPress-Implementierung namens WordExpress erstellt. Lanier ist kein Fan von PHP und arbeitet nicht gerne mit Loops oder Templates, all die Dinge, die historisch gesehen den Großteil der WordPress-Frontend-Entwicklung ausgemacht haben. Er erstellte WordExpress als Node.js-Anwendung mit dem Ziel, PHP durch JavaScript für die Präsentationsseite von WordPress zu ersetzen. Es verwendet Express im Backend und React-Komponenten im Frontend. GraphQL sitzt zwischen den beiden, um Daten aus der WordPress-Datenbank abzurufen.

„Als ich ursprünglich mit der Idee für WordExpress begann, wollte ich die REST-API verwenden, fand aber, dass die vorhandenen Endpunkte nicht das waren, was ich wollte“, sagte Lanier. „Am Ende musste ich eine Reihe benutzerdefinierter Endpunkte schreiben und Aufrufe miteinander verketten. Also dachte ich, ich probiere GraphQL mal aus.“

Er stellte fest, dass GraphQL effizienter als REST ist, da es Roundtrips zum Server reduziert und es Entwicklern ermöglicht, sich auf die Daten zu konzentrieren, die der Client wirklich benötigt. Lanier hob die Vorteile in Bezug auf WordPress-Sites hervor:

Bei GraphQL ermittelt der Client über eine GraphQL-Abfrage genau die Daten, die er benötigt. Die GraphQL-Abfrage verfügt über eine benutzerdefinierte Auflösungsfunktion, die bestimmt, wie diese Daten abgerufen werden. In dieser Funktion können Sie sogar mehrere Datenbanken treffen. Mit WordPress haben Sie beispielsweise eine MySQL-Datenbank, aber Sie haben möglicherweise auch eine Mongo-Datenbank für eine Anwendung, die andere Daten speichert, die nicht relational sein müssen. In der Auflösungsfunktion von GraphQL können Sie Aufrufe durchführen, um Daten aus beiden Datenbanken abzurufen und sie in einem Server-Roundtrip an den Client zurückzusenden.

WordExpress in seiner aktuellen Form ist ein guter Ausgangspunkt für die Erstellung von JavaScript-basierten Anwendungen, die WordPress für die Verwaltung verwenden. Laut Lanier kann er mit diesem Entwicklungssetup Komponenten von Webseiten und Anwendungen viel einfacher erstellen als mit PHP-Vorlagen.

„Mit React enthält jede Komponente nicht nur das Markup zum Anzeigen von Inhalten, sondern auch das Styling für diese Komponente, die Daten, die sie benötigt, um zu funktionieren, und auch jegliche Interaktionslogik – alles in einer oder zwei Dateien“, sagte er.

Die aktuellen Herausforderungen von WordExpress: Plugin-Kompatibilität und serverseitiges Rendering

Trotz all der aufregenden Vorteile effizienterer Abfragen und der Möglichkeit eines JavaScript-gestützten Frontends hat das WordExpress-Projekt eine Reihe ernsthafter Herausforderungen, die es schwierig machen würden, es in der Produktion über eine einfache Blog-Installation hinaus zu verwenden. Es ist nicht mit der überwiegenden Mehrheit der WordPress-Plugins kompatibel, da die meisten in PHP geschrieben sind.

„Im Wesentlichen habe ich das gesamte Frontend ersetzt, was bedeutet, dass alle Plugins, die das Frontend betreffen, nichts bewirken“, sagte Lanier. „Sie können jedoch sicherlich vorhandene Plugins nutzen, die sich auf die Admin-Seite der Dinge auswirken (wie Advanced Custom Fields oder das AWS S3-Plugin). Alles, was manipuliert, wie WordPress-Daten in MySQL gespeichert werden, ist weiterhin verwendbar – Sie müssen nur Ihr GraphQL-Schema und Ihre Abfragen ändern, um damit zu arbeiten.“

Die andere große Herausforderung besteht darin, das serverseitige Rendering zum Laufen zu bringen, das für die Handhabung von Dingen wie SEO und Meta-Tags erforderlich ist. Apollostack, das WordExpress verwendet, um die Daten abzurufen und an die React-Komponenten zu liefern, hat erst kürzlich eine frühe Unterstützung für automatisches serverseitiges Rendering hinzugefügt.

„Ich bin von Facebooks Relay zu ApolloStack gewechselt“, sagte Lanier. „Beides sind ziemlich neue Technologien und ich bin mir nicht sicher, ob eine von beiden wirklich herausgefunden hat, wie man serverseitiges Rendering sehr gut handhabt. Ich habe mich seit ein paar Monaten nicht mehr damit befasst, und die Dinge haben sich mit ApolloStack ziemlich schnell entwickelt, also haben sie es vielleicht inzwischen herausgefunden.“

Im Moment ist WordExpress nur ein Proof-of-Concept und Lanier sagte, er habe nicht vor, zu versuchen, bestehende Plugins zu unterstützen. Angesichts der Tatsache, dass WordExpress derzeit keine Themen und Plugins, einige der besten Teile des WordPress-Ökosystems, nutzen kann, sagte Lanier, dass Entwickler, die diesen Stack verwenden, wahrscheinlich mehr daran interessiert sind, die Leistungsfähigkeit der Admin-Seite von WordPress zu erhalten.

„Ich liebe den WordPress-Admin“, sagte er. „Es ist sehr leistungsfähig und einfach zu verwenden, um Inhalte zu verwalten. WordExpress wäre ein Ausgangspunkt für jeden JavaScript-Entwickler, der WordPress-Anwendungen nur mit JavaScript erstellen möchte.“

Laniers Ziel mit WordExpress ist es, daraus ein npm-Paket zu machen, das in einer Vielzahl verschiedener React-Projekte wiederverwendet werden kann. Er hat bereits zwei WordExpress-npm-Pakete veröffentlicht, die zusammenarbeiten: wordexpress-schema (verwaltet das GraphQL-Schema und die Verbindungseinstellungen) und wordexpress-components (beherbergt derzeit die ersten beiden Komponenten, WordExpressPage und WordExpressMenu). Da das Projekt auf Node.js aufbaut, können Entwickler jedes gewünschte npm-Paket verwenden, ein Trost für die eingeschränkte Plugin-Kompatibilität.

GraphQL und die WP-REST-API

Viele derjenigen, die vorhersagen, dass GraphQL ein direkter Ersatz für REST werden wird, sind auch der Meinung, dass die beiden nebeneinander existieren können. Tatsächlich hat Facebook kürzlich einen Leitfaden zum Umhüllen einer REST-API in GraphQL geschrieben.

„Wenn sich GraphQL als effektiv erweist, wird es wahrscheinlich mit REST-APIs koexistieren“, sagte Petr Bela. „Einige APIs verwenden REST, andere GraphQL. Manche unterstützen vielleicht beides.“ Er prognostiziert, dass die Branche Jahre, vielleicht sogar ein Jahrzehnt brauchen würde, um vollständig von REST auf GraphQL umzustellen.

Laniers WordExpress, das kürzlich 1.000 Sterne auf GitHub erreicht hat, ist derzeit das einzige Open-Source-Projekt, das öffentlich eine GraphQL-basierte Implementierung von WordPress untersucht. Eine flüchtige Suche auf GitHub zeigt, dass viele andere mit ähnlichen Setups experimentieren. Glücklicherweise erfordert GraphQL keine Änderungen am WordPress-Kern, damit Websites die API zum Abfragen der Datenbank verwenden können.

Lanier sagte, er schätze die Arbeit derer, die versuchen, die WP-REST-API in den Kern zu integrieren, und sehe GraphQL-Implementierungen nicht als Bedrohung dafür.

„Ich denke, die Arbeit, die sie mit der REST-API leisten, ist gute Sache“, sagte er. „Diesen Schritt mussten sie unbedingt machen. REST gibt es schon lange – GraphQL ist noch ziemlich neu, also macht es Sinn, den REST-Weg zu gehen. Außerdem wissen viel mehr Leute, wie man es benutzt. Das Schöne an GraphQL ist, dass man damit eine REST-API verpacken kann, sodass beide nebeneinander existieren können.“

Die Möglichkeit, dass WordExpress über einen einfachen Proof-of-Concept hinausgeht, hängt vom Feedback der Community ab. Laut Lanier zeigen Entwickler Interesse an WordExpress, indem sie es forken und Fragen stellen.

„Die Leute benutzen es und spielen damit und machen es (hoffentlich) zu ihrem eigenen“, sagte er. „Ich denke, das Interesse ist da. Um es wirklich machbar zu machen, braucht man jedoch ein ganzes Team von Entwicklern, die es zu einer erstklassigen Option machen.“

Lanier hat kürzlich einen neuen Job angenommen, bei dem er React zu 100 % verwendet und seit einiger Zeit keine Gelegenheit mehr hatte, WordPress zu verwenden, sagte aber, er sei offen für die Erkundung einer Zusammenarbeit, um die WordExpress-Produktion vorzubereiten.

„Wenn die Leute wirklich interessiert wären und zusammenkommen wollten, um daraus eine machbare Lösung zu machen, würde ich mich zu 100 % daran beteiligen“, sagte er.

Entwickler, die es ausprobieren und mit der Entwicklung mit WordExpress beginnen möchten, benötigen ein grundlegendes Verständnis der Funktionsweise von React. Lanier hat eine ausführliche Dokumentation darüber geschrieben, wie die GraphQL-Implementierung eingerichtet ist und wie GraphQL-Abfragen und Datenbankmodelle erweitert werden können. Die Website WordExpress.io ist eine Live-Demo des Codes, die Sie auf GitHub finden können.