Experimentos do projeto WordExpress com o GraphQL para o WordPress

Em 2012, quando o Facebook começou a rearquitetar seus aplicativos móveis baseados em HTML5 para serem aplicativos iOS ou Android nativos, a empresa inventou o GraphQL. Essa nova linguagem de consulta de código aberto está sendo anunciada como uma substituição direta do REST. O GraphQL fornece uma maneira mais eficiente de suportar o volume de interação que ocorre nos aplicativos do Facebook todos os dias, mas é independente de banco de dados e construído para ser usado além do Facebook.

Embora o GraphQL ainda seja relativamente novo, grandes empresas como Intuit, Coursera, Pinterest e Shopify o estão usando na produção. No mês passado, o GitHub anunciou o suporte GraphQL para sua API GitHub para responder a algumas das desvantagens de sua arquitetura REST.

O GraphQL oferece uma nova maneira de estruturar a comunicação do cliente para o servidor que torna a busca de dados mais eficiente. Em seu artigo GraphQL na era das APIs REST, Petr Bela resume a diferença entre os dois tipos de arquitetura:

O poder do GraphQL vem de uma ideia simples — em vez de definir a estrutura das respostas no servidor, a flexibilidade é dada ao cliente. Cada solicitação especifica quais campos e relacionamentos deseja obter de volta, e o GraphQL construirá uma resposta personalizada para essa solicitação específica. O benefício: apenas uma viagem de ida e volta é necessária para buscar todos os dados complexos que poderiam abranger vários endpoints REST e, ao mesmo tempo, retornar apenas os dados realmente necessários e nada mais.

No mês passado, o Facebook anunciou que o GraphQL está saindo do estágio de “visualização técnica” e agora está pronto para produção. Ele foi implementado em diversas linguagens de programação e já foi adotado por empresas que queriam uma forma mais eficiente de acessar dados.

WordExpress traz GraphQL para WordPress

Ramsay Lanier, um desenvolvedor front-end de JavaScript que trabalha na nclud em Washington, DC, criou uma implementação do WordPress baseada em GraphQL chamada WordExpress. Lanier não é fã de PHP e não gosta de trabalhar com loop ou templates, todas as coisas que historicamente compuseram a maior parte do desenvolvimento front-end do WordPress. Ele criou o WordExpress como um aplicativo Node.js com o objetivo de substituir o PHP por JavaScript para o lado de apresentação do WordPress. Ele usa o Express no backend e os componentes React no frontend. O GraphQL fica entre os dois para recuperar dados do banco de dados do WordPress.

“Quando comecei originalmente com a ideia do WordExpress, queria usar a API REST, mas descobri que os endpoints existentes não eram o que eu queria”, disse Lanier. “Eu acabaria tendo que escrever vários endpoints personalizados e encadear chamadas. Então pensei em experimentar o GraphQL.”

Ele descobriu que o GraphQL é mais eficiente que o REST, porque reduz as viagens de ida e volta ao servidor, permitindo que os desenvolvedores se concentrem nos dados que o cliente realmente precisa. Lanier destacou os benefícios relacionados aos sites WordPress:

Com o GraphQL, o cliente determina os dados exatos de que precisa por meio de uma consulta do GraphQL. A consulta GraphQL tem uma função de resolução personalizada que determina como esses dados são recuperados. Nessa função, você pode até acessar vários bancos de dados. Por exemplo, com o WordPress você tem um banco de dados MySQL, mas também pode ter um banco de dados Mongo para um aplicativo que armazena outros dados que não precisam ser relacionais. Na função de resolução do GraphQL, você pode fazer chamadas para recuperar dados de ambos os bancos de dados e enviá-los de volta ao cliente em uma viagem de ida e volta ao servidor.

O WordExpress, em sua forma atual, é um bom ponto de partida para criar aplicativos baseados em JavaScript que usam o WordPress para administração. Lanier disse que essa configuração de desenvolvimento permite que ele crie componentes de páginas e aplicativos da Web com muito mais facilidade do que com modelos PHP.

“Com o React, cada componente contém não apenas a marcação para exibir coisas, mas o estilo desse componente, os dados necessários para funcionar e qualquer lógica de interação também – tudo em um ou dois arquivos”, disse ele.

Desafios atuais do WordExpress: compatibilidade de plug-ins e renderização no lado do servidor

Apesar de todos os benefícios empolgantes de consultas mais eficientes e da possibilidade de um frontend baseado em JavaScript, o projeto WordExpress tem vários desafios sérios que tornariam problemático o uso em produção além de uma simples instalação de blog. Não é compatível com a grande maioria dos plugins do WordPress, pois a maioria é escrita em PHP.

“Essencialmente, substituí todo o front-end, o que significa que qualquer plug-in que afete o front-end não fará nada”, disse Lanier. “No entanto, você certamente pode aproveitar os plug-ins existentes que afetam o lado administrativo das coisas (como campos personalizados avançados ou o plug-in AWS S3). Qualquer coisa que manipule como os dados do WordPress são armazenados no MySQL ainda é utilizável – você só precisa modificar seu esquema e consultas do GraphQL para trabalhar com eles.”

O outro grande desafio é fazer com que a renderização do lado do servidor funcione, o que é necessário para lidar com coisas como SEO e meta tags. Apollostack, que o WordExpress usa para buscar os dados e entregá-los aos componentes do React, apenas recentemente adicionou suporte inicial para renderização automática do lado do servidor.

“Eu mudei o uso do Relay do Facebook para o ApolloStack”, disse Lanier. “Ambas são tecnologias bastante novas e não tenho certeza se alguma delas realmente descobriu como lidar muito bem com a renderização do lado do servidor. Não investigo isso há alguns meses, e as coisas estão se movendo muito rapidamente com o ApolloStack, então eles devem ter descoberto agora.”

Por enquanto, o WordExpress é apenas uma prova de conceito e Lanier disse que não tem planos de tentar oferecer suporte a plugins existentes. Dado que o WordExpress atualmente não pode alavancar temas e plugins, algumas das melhores partes do ecossistema WordPress, Lanier disse que os desenvolvedores que usam essa pilha provavelmente estão mais interessados ​​em preservar o poder do lado administrativo do WordPress.

“Eu amo o administrador do WordPress”, disse ele. “É muito poderoso e fácil de usar para gerenciar conteúdo. WordExpress seria um ponto de partida para qualquer desenvolvedor JavaScript que queira construir aplicativos WordPress usando apenas JavaScript.”

O objetivo de Lanier com o WordExpress é transformá-lo em um pacote npm que pode ser reutilizado em vários projetos React diferentes. Ele já publicou dois pacotes npm do WordExpress que funcionam juntos: wordexpress-schema (trata o esquema GraphQL e configurações de conexão) e wordexpress-components (atualmente abriga os dois primeiros componentes, WordExpressPage e WordExpressMenu). Como o projeto é construído em Node.js, os desenvolvedores podem usar qualquer pacote npm que quiserem, um consolo para a compatibilidade limitada de plugins.

GraphQL e a API REST WP

Muitos daqueles que estão prevendo que o GraphQL se tornará um substituto direto do REST também são da opinião de que os dois podem coexistir. Na verdade, o Facebook escreveu recentemente um guia para encapsular uma API REST no GraphQL.

“É provável que, se o GraphQL provar ser eficaz, ele coexistirá com as APIs REST”, disse Petr Bela. “Algumas APIs usarão REST, outras usarão GraphQL. Alguns podem suportar ambos.” Ele prevê que a indústria levaria anos, talvez até uma década, para mudar completamente do REST para o GraphQL.

O WordExpress de Lanier, que recentemente ultrapassou 1.000 estrelas no GitHub, é atualmente o único projeto de código aberto que está explorando publicamente uma implementação do WordPress baseada em GraphQL. Uma pesquisa superficial no GitHub revela que muitos outros estão experimentando configurações semelhantes. Felizmente, o GraphQL não requer nenhuma alteração no núcleo do WordPress para permitir que os sites usem a API para consultar o banco de dados.

Lanier disse que aprecia o trabalho daqueles que estão tentando mesclar a API REST do WP no núcleo e não vê as implementações do GraphQL como uma ameaça a isso.

“Acho que o trabalho que eles estão fazendo com a API REST é uma coisa boa”, disse ele. “Eles definitivamente precisavam dar esse passo. REST já existe há muito tempo – o GraphQL ainda é muito novo, então faz sentido seguir a rota REST. Além disso, muito mais pessoas sabem como usá-lo. O legal do GraphQL é que você pode usá-lo para envolver uma API REST, para que ambos possam coexistir.”

A possibilidade do WordExpress ir além de uma simples prova de conceito depende do feedback da comunidade. Lanier disse que os desenvolvedores estão demonstrando interesse no WordExpress fazendo um fork e fazendo perguntas.

“As pessoas estão usando, brincando e (espero) tornando-o seu”, disse ele. “Acho que o interesse existe. Para torná-lo realmente viável, porém, você precisa de uma equipe inteira de desenvolvedores, tornando-o uma opção de primeira qualidade.”

Lanier recentemente assumiu um novo emprego em que está usando o React 100% e não teve a oportunidade de usar o WordPress por um tempo, mas disse que está aberto a explorar a colaboração para preparar a produção do WordExpress.

“Se as pessoas realmente estivessem interessadas e quisessem se reunir para transformá-lo em uma solução viável, eu estaria 100% envolvido nisso”, disse ele.

Os desenvolvedores que desejam testá-lo e começar a desenvolver com o WordExpress precisarão de um entendimento básico de como o React funciona. Lanier escreveu uma documentação detalhada de como a implementação do GraphQL é configurada e como estender as consultas do GraphQL e os modelos de banco de dados. O site WordExpress.io é uma demonstração ao vivo do código, que você pode encontrar no GitHub.