UPDATE: Ich habe inzwischen eine neuere Version dieses Projekts erstellt, die Vue statt React verwendet. Sie sollten darüber lesen!

Index:
Teil 2 – Das Setup
Teil 3-Das Schema

In den folgenden Wochen werde ich in einer Reihe von Artikeln erklären, wie ich Node.js und Express am Backend mit einem GraphQL-Server verwende, der an eine MYSQL-WordPress-Datenbank angeschlossen ist, die Apollo verwendet, um Daten zu holen und sie in React-Komponenten zu leiten. Keine Sorge, ich werde weiterhin die bewährte WordPress-Administrationsoberfläche verwenden.

Wenn sich das nach einem großen Mundwerk anhört, dann ist es das auch. Es war eine Herausforderung, besonders weil dies mein erster Ausflug in GraphQL und Apollo ist. Die Dinge werden sich ändern. Veränderung ist gut.

Dieser Beitrag wird erklären, warum.

WordPress ist ein Riese. 25% aller Websites sind auf WordPress aufgebaut. Es ist ein großartiges CMS, mit einer großartigen Community und großartigem Support. Die Verwaltung von Inhalten ist einfach, und das ist das Hauptziel eines jeden CMS.

Bei nclud entwickle ich täglich WordPress-Websites. Die Verwaltung von WordPress-Websites ist ein Vergnügen. Sie zu entwickeln ist es nicht. Ich sage das als Javascript-Entwickler, der erfahren hat, wie isomorphe Javascript-Anwendungen aussehen und sich anfühlen. Javascript hat mich twitterpated. WordPress-Entwicklung nicht.

Was soll ich sagen? Ich mag PHP nicht. Ich mag keine Templates. Ich mag „die Schleife“ nicht. Ich bin verwöhnt von Node, Express, Webpack, React, Babel und jetzt Graph QL und Apollo.

Die Vorteile von Javascript

Ich betrachte das Ganze von der Seite der Frontend-Entwicklung. Node und Express sind großartig, aber die treibende Kraft hinter diesem Setup ist für mich die Möglichkeit, ES2015 mit React und CSS-Modulen zu verwenden.

Die größte Herausforderung bei der Entwicklung und Wartung jeder anständig großen Website oder Anwendung ist die Fähigkeit, Änderungen (Hinzufügen neuer Funktionen oder Ändern bestehender Funktionen) zu bewältigen, ohne etwas kaputt zu machen. Dazu gehört in der Regel, dass die Anwendung oder Änderung von Stilen keine unbeabsichtigten Folgen hat. Dies ist eine Herausforderung, wenn man bedenkt, dass CSS global skaliert ist. Es gibt ganze CSS-Methoden, die entwickelt wurden, um dieses Problem zu lösen (SMACSS, BEM, etc.), aber sie beinhalten entweder esoterische Namenskonventionen oder erfordern, dass man sich eine Zillion verschiedener Klassennamen merken muss.

Mit React können wir CSS-Module verwenden, um lokal skaliertes CSS zu erstellen. Jede Komponente hat ihr eigenes Styling, das die Möglichkeit bietet, CSS-Klassen für andere Stile oder einen Satz globaler Stile zusammenzustellen. Das ist sehr mächtig. Es ist auch nicht mit WordPress möglich.

Man kann auch Inline-Stile verwenden, JSXStyles oder unzählige andere Lösungen – ich bin ein Fan von CSS-Modulen, also werde ich das verwenden.

Diese Methode bedeutet auch, dass React-Komponenten leicht zwischen Projekten ausgetauscht werden können. Sie sind wiederverwendbar, pluggable. Da die Stile lokal auf eine Komponente bezogen sind, kann man sie nach Belieben hinzufügen und entfernen, ohne sich Sorgen machen zu müssen, dass etwas anderes kaputt geht.

Ein weiterer Vorteil ist die Möglichkeit, den Zustand der Anwendung oder der Website auf eine viel elegantere Weise zu behandeln. Mit Apollo (auf das ich in einem anderen Beitrag näher eingehen werde) können wir nicht nur Anwendungsdaten, sondern auch den Zustand der Benutzeroberfläche verwalten. Viel zu oft sehe ich in WordPress eine große Javascript-Datei, die Ereignisse und Interaktionen für eine ganze Website verwaltet. Zu oft sehe ich in dieser langen Datei Tests, um zu sehen, ob ein Element eine Klasse hat, die eine Animation auslösen soll. Das führt zu einer schmerzhaften Fehlersuche, weil der Zustand der Anwendung nicht konsistent ist.

Schließlich können wir jetzt auch Unit-Tests durchführen. Testen ist wichtig! Huzzah testing!

Tut WordPress nicht schon was für Node?

Wenn Sie die WordPress-Nachrichten verfolgt haben, haben Sie wahrscheinlich gehört, dass Automattic, das Unternehmen hinter WordPress, eine auf Node basierende Verwaltungsoberfläche entwickelt hat. Sie ist ziemlich gut und wurde als Open-Source-Projekt veröffentlicht. Es wird von der WordPress REST API angetrieben, so dass man all sein WordPress-Zeug in JSON bekommen und damit zaubern kann.

Das ist ziemlich klasse.

Als ich ursprünglich versuchte, PHP durch Javascript zu ersetzen, war mein erster Gedanke, diese API zu benutzen. Es hat einige nette eingebaute Endpunkte, und man hat die Möglichkeit, seine eigenen zu erstellen. Die V2-Dokumentation ist etwas dürftig, aber das liegt wohl daran, dass sie noch so neu ist.

Ich war mit dem Ergebnis nicht sehr zufrieden, obwohl ich zugeben muss, dass ich nur einen Tag lang damit herumgespielt habe. Und da ich bereits React verwende, könnte ich genauso gut das gesamte Ökosystem übernehmen.

Einstieg in GraphQL

Wäre es nicht toll, wenn die Benutzeroberfläche unserer Anwendung oder Website selbst bestimmen könnte, welche Daten sie benötigt? Bei REST sendet der Server alle Daten, die die Benutzeroberfläche benötigt, und überlässt es dann dem Client, den Rest zu sortieren. Möglicherweise müssen Sie mehrere REST-Endpunkte aufrufen, um alle möglichen Daten zu erhalten.

Mit GraphQL bestimmt der Client die Beziehungen der benötigten Daten und stellt eine einzige Abfrage, um alle Daten zu erhalten. Es gibt nur einen Weg. Und man bekommt genau das, was man braucht.

Wie auch immer, Sie können hier mehr über GraphQL vs. Rest lesen.

Nächste Schritte

In meinem nächsten Beitrag werde ich das grundlegende Node.js/Express Setup durchgehen und wie man den grundlegenden GraphQL Server einrichtet. Ich werde auch durchgehen, wie ich Webpack verwende, um CSS-Module mit SASS zu behandeln, wie Hot Module Replacement funktioniert. Ich werde auch Sequelize verwenden, um eine Verbindung zu einer WordPress MYSQL-Datenbank zu erstellen, was bedeutet, dass wir keine EINZELNE Zeile von SQL-Abfragen schreiben müssen! Wizardry!

In der Zwischenzeit habe ich ein Github Repo, das enthält, wo ich derzeit in diesem Prozess bin. Es enthält einige grundlegende Post- und Postmeta-Abfragen und einige andere nette Dinge. Es ist offensichtlich in aktiver Entwicklung, und ich bin sicher, dass es einige peinliche Fehler enthält, also machen Sie sich ruhig lustig.