Se isso soa como uma boca cheia, é porque é. Tem sido um desafio, especialmente porque esta é a minha primeira incursão no GraphQL e no Apollo. As coisas vão mudar. A mudança é boa.

Este post vai explicar porque.

WordPress é um gigante. 25% de todos os sites são construídos em WordPress. É um grande CMS, com uma grande comunidade, e um grande suporte. Gerenciar conteúdo é fácil e esse é o objetivo principal de qualquer CMS.

A ncludindo que eu desenvolvo sites WordPress diariamente. Administrar sites WordPress é um prazer. Desenvolvê-los não é. Eu digo isto como um desenvolvedor Javascript que já experimentou o que as aplicações Javascript isomórficas parecem e sentem. O Javascript me fez twitterpated. Desenvolvimento de WordPress não.

O que posso dizer? Eu não gosto de PHP. Eu não gosto de templates. Eu não gosto de “o laço”. Fiquei mimado pelo Node, Express, Webpack, React, Babel, e agora Graph QL e Apollo.

The Benefits Of Javascript

I’m coming at this purely from the front-end development side. Node e Express são incríveis, mas a principal força motriz por trás dessa configuração, para mim, é a habilidade de usar o ES2015 com React e CSS-Modules.

O maior desafio de desenvolver e manter qualquer site ou aplicativo de tamanho decente é a habilidade de lidar graciosamente com mudanças (adicionando novas funcionalidades ou modificando as existentes) sem quebrar coisas. Isso geralmente envolve certificar-se de que a aplicação ou modificação de estilos não tenha nenhuma consequência não intencional. Isto é um desafio, considerando que o CSS tem uma abrangência global. Existem metodologias CSS inteiras que foram criadas para aliviar essa dor (SMACSS, BEM, etc.), mas ou envolvem convenções de nomes esotéricos, ou requerem que você se lembre de um zilhão de nomes de classes diferentes.

Com React, podemos usar Módulos CSS para criar CSS com escopo local. Cada componente tem seu próprio estilo, que é a capacidade de compor classes CSS para outros estilos, ou um conjunto de estilos globais. É muito poderoso. Também não é possível com o WordPress.

Você também pode fazer estilos inline, usar JSXStyles ou uma infinidade de outras soluções – Eu sou um fan boy dos Módulos CSS, então é isso que eu estarei usando.

Este método também significa que os componentes React são facilmente alternados entre os projetos. Eles são reutilizáveis, plugáveis. Como os estilos são escopados localmente para um componente, você pode adicioná-los e removê-los à vontade sem ter que se preocupar em quebrar outra coisa.

Um outro benefício é a habilidade de lidar com o estado do aplicativo ou do site é uma maneira muito mais graciosa. Usando o Apollo (no qual eu entrarei em outro post) nós podemos gerenciar não apenas os dados da aplicação, mas o estado do UI. Muitas vezes no WordPress eu vejo um grande arquivo javascript que lida com eventos e interações para um site inteiro. Demasiadas vezes vejo nesse longo arquivo testes para ver se um elemento tem uma classe que deve acionar uma animação. Isso leva a uma depuração dolorosa porque o estado da aplicação não é consistente.

Por último, agora também podemos realizar testes unitários. Os testes são importantes! Huzzah testing!

>

>

Isn’t WordPress Already doing Node Stuff?

Se você tem acompanhado as notícias do WordPress, você provavelmente já ouviu dizer que a Automattic, a empresa por trás do WordPress, desenvolveu uma interface administrativa construída sobre o Node. É muito doce, e tem sido de código aberto. É alimentada pela API REST do WordPress, então você pode obter todas as suas coisas do WordPress-y em JSON e fazer mágica com ela.

Isso é muito legal.

Quando eu originalmente me propus a tentar substituir PHP por Javascript, meu primeiro pensamento foi usar essa API. Ela tem alguns endpoints bem embutidos, e você tem a habilidade de criar o seu próprio. A documentação do V2 é um pouco inexistente, mas eu apenas giz que, até ser tão nova.

Não fiquei muito contente com o resultado, embora eu admita que só brinquei com ele por um dia ou mais. Além disso, como já estou usando React, eu poderia muito bem abraçar todo o ecossistema.

Enter GraphQL

Não seria ótimo se nossa aplicação ou a interface do site pudesse conduzir os dados que precisa? Com REST, o servidor envia todos os dados que a IU pode precisar, então deixa o cliente classificar através do resto. Você pode precisar fazer chamadas para múltiplos endpoints REST para obter todos os dados possíveis.

Com GraphQL, o cliente determina as relações dos dados que ele precisa e faz uma consulta para buscar todos os dados. Há apenas uma viagem. E você obtém exatamente o que precisa.

Anyway, você pode ler mais sobre GraphQL vs. Descanse aqui.

Passos seguintes

Eu sou o meu próximo post, eu vou caminhar através da configuração básica do Node.js/Express e como configurar o servidor GraphQL básico. Eu também vou caminhar através de como eu estou usando Webpack para lidar com Módulos CSS com SASS, como a substituição do módulo quente funciona. Eu também estarei usando Sequelize para criar uma conexão com um banco de dados MYSQL do WordPress, o que significa que não teremos que escrever UMA ÚNICA LINHA DE QUERIES SQL! Wizardry!

Entretanto, eu tenho um repo Github que contém onde eu estou atualmente neste processo. Tem algumas perguntas básicas sobre Post e Postmeta e algumas outras coisas legais. Está obviamente em desenvolvimento ativo, e tenho certeza que há alguns erros embaraçosos lá dentro, então sinta-se à vontade para se divertir.