Expériences de projet WordExpress avec l'apport de GraphQL à WordPress

En 2012, lorsque Facebook a commencé à réorganiser ses applications mobiles basées sur HTML5 pour en faire des applications iOS ou Android natives, la société a inventé GraphQL. Ce nouveau langage de requête open source est présenté comme un remplacement direct de REST. GraphQL fournit un moyen plus efficace de prendre en charge le volume d'interaction qui a lieu chaque jour dans les applications de Facebook, mais il est indépendant de la base de données et conçu pour être utilisé au-delà de Facebook.

Bien que GraphQL soit encore relativement nouveau, de grandes entreprises comme Intuit, Coursera, Pinterest et Shopify l'utilisent en production. Le mois dernier, GitHub a annoncé la prise en charge de GraphQL pour son API GitHub afin de répondre à certains des inconvénients de son architecture REST.

GraphQL offre une nouvelle façon de structurer la communication du client au serveur qui rend la récupération des données plus efficace. Dans son article GraphQL à l'ère des API REST, Petr Bela résume la différence entre les deux types d'architecture :

La puissance de GraphQL vient d'une idée simple : au lieu de définir la structure des réponses sur le serveur, la flexibilité est donnée au client. Chaque requête spécifie les champs et les relations qu'elle souhaite récupérer, et GraphQL construira une réponse adaptée à cette requête particulière. L'avantage : un seul aller-retour est nécessaire pour récupérer toutes les données complexes qui pourraient autrement couvrir plusieurs points de terminaison REST, et en même temps ne renvoyer que les données réellement nécessaires et rien de plus.

Le mois dernier, Facebook a annoncé que GraphQL quittait l'étape "d'aperçu technique" et était maintenant prêt pour la production. Il a été implémenté dans de nombreux langages de programmation différents et a déjà été adopté par des entreprises qui souhaitaient un moyen plus efficace d'accéder aux données.

WordExpress apporte GraphQL à WordPress

Ramsay Lanier, un développeur JavaScript frontal qui travaille chez nclud à Washington, DC, a créé une implémentation WordPress alimentée par GraphQL appelée WordExpress. Lanier n'est pas un fan de PHP et n'aime pas travailler avec la boucle ou les modèles, toutes les choses qui ont historiquement constitué l'essentiel du développement frontal de WordPress. Il a créé WordExpress en tant qu'application Node.js dans le but de remplacer PHP par JavaScript pour le côté présentation de WordPress. Il utilise Express sur le backend et les composants React sur le frontend. GraphQL se situe entre les deux pour récupérer les données de la base de données WordPress.

"Lorsque j'ai commencé avec l'idée de WordExpress, je voulais utiliser l'API REST, mais j'ai trouvé que les points de terminaison existants n'étaient pas ce que je voulais", a déclaré Lanier. «Je finirais par devoir écrire un tas de points de terminaison personnalisés et enchaîner les appels ensemble. J'ai donc pensé essayer GraphQL.

Il a constaté que GraphQL est plus efficace que REST, car il réduit les allers-retours vers le serveur, permettant aux développeurs de se concentrer sur les données dont le client a vraiment besoin. Lanier a souligné les avantages en ce qui concerne les sites WordPress :

Avec GraphQL, le client détermine les données exactes dont il a besoin via une requête GraphQL. La requête GraphQL a une fonction de résolution personnalisée qui détermine comment ces données sont récupérées. Dans cette fonction, vous pouvez même accéder à plusieurs bases de données. Par exemple, avec WordPress, vous avez une base de données MySQL, mais vous pouvez également avoir une base de données Mongo pour une application qui stocke d'autres données qui n'ont pas besoin d'être relationnelles. Dans la fonction de résolution GraphQL, vous pouvez effectuer des appels pour récupérer les données des deux bases de données et les renvoyer au client en un aller-retour de serveur.

WordExpress, dans sa forme actuelle, est un bon point de départ pour créer des applications basées sur JavaScript qui utilisent WordPress pour l'administration. Lanier a déclaré que cette configuration de développement lui permet de créer des composants de pages Web et d'applications beaucoup plus facilement qu'avec des modèles PHP.

"Avec React, chaque composant contient non seulement le balisage pour afficher des éléments, mais le style de ce composant, les données dont il a besoin pour fonctionner, ainsi que toute logique d'interaction - le tout dans un ou deux fichiers", a-t-il déclaré.

Défis actuels de WordExpress : compatibilité des plugins et rendu côté serveur

Malgré tous les avantages intéressants de requêtes plus efficaces et la possibilité d'une interface alimentée par JavaScript, le projet WordExpress présente un certain nombre de défis sérieux qui le rendraient difficile à utiliser en production au-delà d'une simple installation de blog. Il n'est pas compatible avec la grande majorité des plugins WordPress, car la plupart sont écrits en PHP.

"Essentiellement, j'ai remplacé tout le front-end, ce qui signifie que tous les plugins qui affectent le front-end ne feront rien", a déclaré Lanier. "Cependant, vous pouvez certainement tirer parti des plugins existants qui affectent le côté administrateur des choses (comme Advanced Custom Fields ou le plugin AWS S3). Tout ce qui manipule la façon dont les données WordPress sont stockées dans MySQL est toujours utilisable – il vous suffit de modifier votre schéma GraphQL et vos requêtes pour les utiliser.

L'autre défi majeur est de faire fonctionner le rendu côté serveur, ce qui est nécessaire pour gérer des éléments tels que le référencement et les balises méta. Apollostack, que WordExpress utilise pour récupérer les données et les transmettre aux composants React, n'a que récemment ajouté une prise en charge précoce du rendu automatique côté serveur.

"Je suis passé de l'utilisation du relais de Facebook à ApolloStack", a déclaré Lanier. « Les deux sont des technologies assez récentes et je ne sais pas si l'une ou l'autre a vraiment compris comment gérer très bien le rendu côté serveur. Je ne m'y suis pas penché depuis quelques mois, et les choses évoluent assez rapidement avec ApolloStack, donc ils ont peut-être déjà compris.

Pour l'instant, WordExpress n'est qu'une preuve de concept et Lanier a déclaré qu'il n'avait pas l'intention d'essayer de prendre en charge les plugins existants. Étant donné que WordExpress ne peut actuellement pas exploiter les thèmes et les plugins, certaines des meilleures parties de l'écosystème WordPress, Lanier a déclaré que les développeurs qui utilisent cette pile sont probablement plus intéressés à préserver la puissance du côté administrateur de WordPress.

"J'adore l'administrateur WordPress", a-t-il déclaré. « Il est très puissant et facile à utiliser pour gérer le contenu. WordExpress serait un point de départ pour tout développeur JavaScript qui souhaite créer des applications WordPress en utilisant uniquement JavaScript.

L'objectif de Lanier avec WordExpress est de le transformer en un package npm qui peut être réutilisé dans une variété de projets React différents. Il a déjà publié deux packages WordExpress npm qui fonctionnent ensemble : wordexpress-schema (gère le schéma GraphQL et les paramètres de connexion) et wordexpress-components (héberge actuellement les deux premiers composants, WordExpressPage et WordExpressMenu). Étant donné que le projet est construit sur Node.js, les développeurs peuvent utiliser n'importe quel package npm de leur choix, une consolation pour la compatibilité limitée des plugins.

GraphQL et l'API WP REST

Beaucoup de ceux qui prédisent que GraphQL deviendra un remplaçant direct de REST sont également d'avis que les deux peuvent coexister. En fait, Facebook a récemment écrit un guide pour encapsuler une API REST dans GraphQL.

"Il est probable que si GraphQL s'avère efficace, il coexistera avec les API REST", a déclaré Petr Bela. "Certaines API utiliseront REST, d'autres utiliseront GraphQL. Certains pourraient soutenir les deux. Il prédit qu'il faudrait des années, voire une décennie, à l'industrie pour passer complètement de REST à GraphQL.

WordExpress de Lanier, qui a récemment dépassé 1 000 étoiles sur GitHub, est actuellement le seul projet open source qui explore publiquement une implémentation de WordPress alimentée par GraphQL. Une recherche rapide sur GitHub révèle que de nombreux autres expérimentent des configurations similaires. Heureusement, GraphQL ne nécessite aucune modification du noyau WordPress pour permettre aux sites d'utiliser l'API pour interroger la base de données.

Lanier a déclaré qu'il appréciait le travail de ceux qui essayaient de faire fusionner l'API WP REST dans le noyau et ne considérait pas les implémentations de GraphQL comme une menace pour cela.

"Je pense que le travail qu'ils font avec l'API REST est une bonne chose", a-t-il déclaré. «Ils avaient vraiment besoin de franchir cette étape. REST existe depuis longtemps - GraphQL est encore assez nouveau, il est donc logique d'emprunter la route REST. De plus, beaucoup plus de gens savent comment l'utiliser. La bonne chose à propos de GraphQL est que vous pouvez l'utiliser pour envelopper une API REST, afin qu'ils puissent tous les deux coexister.

La possibilité pour WordExpress d'aller au-delà d'une simple preuve de concept dépend des retours de la communauté. Lanier a déclaré que les développeurs manifestaient de l'intérêt pour WordExpress en le bifurquant et en posant des questions.

"Les gens l'utilisent, jouent avec et (espérons-le) se l'approprient", a-t-il déclaré. « Je pense que l'intérêt est là. Pour le rendre vraiment faisable, cependant, vous avez besoin de toute une équipe de développeurs, ce qui en fait une option de premier ordre.

Lanier a récemment pris un nouvel emploi où il utilise React à 100% et n'a pas eu l'occasion d'utiliser WordPress depuis un petit moment, mais a déclaré qu'il était ouvert à l'exploration d'une collaboration pour préparer la production WordExpress.

"Si les gens étaient vraiment intéressés et voulaient se rassembler pour en faire une solution réalisable, je serais impliqué à 100% là-dedans", a-t-il déclaré.

Les développeurs qui veulent le tester et commencer à développer avec WordExpress auront besoin d'une compréhension de base du fonctionnement de React. Lanier a rédigé une documentation détaillée sur la configuration de l'implémentation de GraphQL et sur l'extension des requêtes et des modèles de base de données GraphQL. Le site WordExpress.io est une démonstration en direct du code, que vous pouvez trouver sur GitHub.