Experimentos del proyecto WordExpress con la incorporación de GraphQL a WordPress

En 2012, cuando Facebook comenzó a rediseñar sus aplicaciones móviles impulsadas por HTML5 para convertirlas en aplicaciones nativas de iOS o Android, la empresa inventó GraphQL. Este nuevo lenguaje de consulta de código abierto se anuncia como un reemplazo directo de REST. GraphQL proporciona una forma más eficiente de admitir el volumen de interacción que se lleva a cabo en las aplicaciones de Facebook todos los días, pero es independiente de la base de datos y está diseñado para usarse más allá de Facebook.

Aunque GraphQL todavía es relativamente nuevo, grandes empresas como Intuit, Coursera, Pinterest y Shopify lo están utilizando en producción. El mes pasado, GitHub anunció la compatibilidad con GraphQL para su API de GitHub para responder a algunos de los inconvenientes de su arquitectura REST.

GraphQL ofrece una nueva forma de estructurar la comunicación del cliente al servidor que hace que la obtención de datos sea más eficiente. En su artículo GraphQL en la era de las API REST, Petr Bela resume la diferencia entre los dos tipos de arquitectura:

El poder de GraphQL proviene de una idea simple: en lugar de definir la estructura de las respuestas en el servidor, la flexibilidad se le da al cliente. Cada solicitud especifica qué campos y relaciones desea recuperar, y GraphQL construirá una respuesta adaptada a esta solicitud en particular. El beneficio: solo se necesita un viaje de ida y vuelta para obtener todos los datos complejos que, de lo contrario, podrían abarcar múltiples puntos finales REST y, al mismo tiempo, solo devolver los datos que realmente se necesitan y nada más.

El mes pasado, Facebook anunció que GraphQL está saliendo de la etapa de "vista previa técnica" y ahora está listo para la producción. Se ha implementado en muchos lenguajes de programación diferentes y ya lo han adoptado empresas que querían una forma más eficiente de acceder a los datos.

WordExpress trae GraphQL a WordPress

Ramsay Lanier, un desarrollador front-end de JavaScript que trabaja en nclud en Washington, DC, ha creado una implementación de WordPress basada en GraphQL llamada WordExpress. Lanier no es fanático de PHP y no le gusta trabajar con el bucle o las plantillas, todas las cosas que históricamente han compuesto la mayor parte del desarrollo front-end de WordPress. Creó WordExpress como una aplicación Node.js con el objetivo de reemplazar PHP con JavaScript para el lado de presentación de WordPress. Utiliza Express en el backend y componentes React en el frontend. GraphQL se encuentra entre los dos para recuperar datos de la base de datos de WordPress.

“Cuando originalmente comencé con la idea de WordExpress, quería usar la API REST, pero descubrí que los puntos finales existentes no eran lo que quería”, dijo Lanier. “Terminaría teniendo que escribir un montón de puntos finales personalizados y encadenar llamadas. Así que pensé en probar GraphQL”.

Descubrió que GraphQL es más eficiente que REST porque reduce los viajes de ida y vuelta al servidor, lo que permite a los desarrolladores concentrarse en los datos que realmente necesita el cliente. Lanier destacó los beneficios relacionados con los sitios de WordPress:

Con GraphQL, el cliente determina los datos exactos que necesita a través de una consulta de GraphQL. La consulta de GraphQL tiene una función de resolución personalizada que determina cómo se recuperan esos datos. En esa función, incluso puede acceder a varias bases de datos. Por ejemplo, con WordPress tiene una base de datos MySQL, pero también puede tener una base de datos Mongo para una aplicación que almacena otros datos que no necesitan ser relacionales. En la función de resolución de GraphQL, puede realizar llamadas para recuperar datos de ambas bases de datos y enviarlos de vuelta al cliente en un viaje de ida y vuelta del servidor.

WordExpress, en su forma actual, es un buen punto de partida para crear aplicaciones basadas en JavaScript que usan WordPress para la administración. Lanier dijo que esta configuración de desarrollo le permite crear componentes de páginas web y aplicaciones mucho más fácilmente que con las plantillas de PHP.

“Con React, cada componente contiene no solo el marcado para mostrar cosas, sino también el estilo de ese componente, los datos que requiere para funcionar y también cualquier lógica de interacción, todo en uno o dos archivos”, dijo.

Desafíos actuales de WordExpress: compatibilidad de complementos y representación del lado del servidor

A pesar de todos los emocionantes beneficios de consultas más eficientes y la posibilidad de una interfaz basada en JavaScript, el proyecto WordExpress tiene una serie de desafíos serios que dificultarían su uso en producción más allá de una simple instalación de blog. No es compatible con la gran mayoría de complementos de WordPress, ya que la mayoría están escritos en PHP.

“Esencialmente, he reemplazado todo el front-end, lo que significa que cualquier complemento que afecte al front-end no hará nada”, dijo Lanier. “Sin embargo, ciertamente puede aprovechar los complementos existentes que afectan el lado administrativo de las cosas (como los campos personalizados avanzados o el complemento AWS S3). Cualquier cosa que manipule cómo se almacenan los datos de WordPress en MySQL todavía se puede utilizar; solo necesita modificar su esquema y consultas de GraphQL para trabajar con ellos”.

El otro desafío importante es hacer que funcione la representación del lado del servidor, que es necesaria para manejar cosas como SEO y metaetiquetas. Apollostack, que WordExpress usa para obtener los datos y enviarlos a los componentes de React, recientemente agregó soporte temprano para la representación automática del lado del servidor.

“Pasé de usar Relay de Facebook a ApolloStack”, dijo Lanier. “Ambas son tecnologías bastante nuevas y no estoy seguro de si alguna realmente ha descubierto cómo manejar muy bien el renderizado del lado del servidor. No lo he investigado en algunos meses, y las cosas se han estado moviendo bastante rápido con ApolloStack, por lo que es posible que ya lo hayan descubierto".

Por ahora, WordExpress es solo una prueba de concepto y Lanier dijo que no tiene planes para tratar de admitir complementos existentes. Dado que WordExpress actualmente no puede aprovechar temas y complementos, algunas de las mejores partes del ecosistema de WordPress, Lanier dijo que los desarrolladores que usan esta pila probablemente estén más interesados ​​​​en preservar el poder del lado administrativo de WordPress.

“Me encanta el administrador de WordPress”, dijo. “Es muy poderoso y fácil de usar para administrar contenido. WordExpress sería un punto de partida para cualquier desarrollador de JavaScript que quiera crear aplicaciones de WordPress usando solo JavaScript”.

El objetivo de Lanier con WordExpress es convertirlo en un paquete npm que se pueda reutilizar en una variedad de proyectos React diferentes. Ya ha publicado dos paquetes de WordExpress npm que funcionan juntos: wordexpress-schema (maneja el esquema de GraphQL y la configuración de conexión) y wordexpress-components (actualmente alberga los dos primeros componentes, WordExpressPage y WordExpressMenu). Dado que el proyecto se basa en Node.js, los desarrolladores pueden utilizar cualquier paquete npm que deseen, un consuelo para la compatibilidad limitada de complementos.

GraphQL y la API REST de WP

Muchos de los que predicen que GraphQL se convertirá en un reemplazo directo de REST también opinan que los dos pueden coexistir. De hecho, Facebook ha escrito recientemente una guía para envolver una API REST en GraphQL.

“Es probable que si GraphQL demuestra ser efectivo, coexistirá con las API REST”, dijo Petr Bela. “Algunas API usarán REST, algunas usarán GraphQL. Algunos podrían apoyar a ambos”. Él predice que la industria tardaría años, tal vez incluso una década, en cambiar completamente de REST a GraphQL.

WordExpress de Lanier, que recientemente superó las 1000 estrellas en GitHub, es actualmente el único proyecto de código abierto que está explorando públicamente una implementación de WordPress impulsada por GraphQL. Una búsqueda superficial en GitHub revela que muchos otros están experimentando con configuraciones similares. Afortunadamente, GraphQL no requiere ningún cambio en el núcleo de WordPress para permitir que los sitios usen la API para consultar la base de datos.

Lanier dijo que aprecia el trabajo de aquellos que están tratando de fusionar la API REST de WP en el núcleo y no ve las implementaciones de GraphQL como una amenaza para eso.

“Creo que el trabajo que están haciendo con la API REST es bueno”, dijo. “Definitivamente necesitaban dar ese paso. REST existe desde hace mucho tiempo: GraphQL todavía es bastante nuevo, por lo que tiene sentido seguir la ruta REST. Además, mucha más gente sabe cómo usarlo. Lo bueno de GraphQL es que puede usarlo para envolver una API REST, para que ambos puedan coexistir”.

La posibilidad de que WordExpress vaya más allá de una simple prueba de concepto depende de los comentarios de la comunidad. Lanier dijo que los desarrolladores están demostrando interés en WordExpress bifurcándolo y haciendo preguntas.

“La gente lo está usando y jugando con él y (con suerte) haciéndolo propio”, dijo. “Creo que el interés está ahí. Sin embargo, para que sea realmente factible, se necesita un equipo completo de desarrolladores que lo conviertan en una opción de primer nivel”.

Lanier recientemente tomó un nuevo trabajo en el que usa React al 100% y no ha tenido la oportunidad de usar WordPress por un tiempo, pero dijo que está abierto a explorar la colaboración para preparar la producción de WordExpress.

“Si las personas estuvieran realmente interesadas y quisieran unirse para convertirlo en una solución factible, estaría 100% involucrado en eso”, dijo.

Los desarrolladores que quieran probarlo y comenzar a desarrollar con WordExpress necesitarán una comprensión básica de cómo funciona React. Lanier ha escrito documentación detallada sobre cómo se configura la implementación de GraphQL y cómo ampliar las consultas de GraphQL y los modelos de base de datos. El sitio WordExpress.io es una demostración en vivo del código, que puede encontrar en GitHub.