Como usar Node.js y Express en el backend con un servidor GraphQL conectado a una base de datos MYSQL WordPress que usa Apollo para buscar datos y canalizarlos en React componentes.
WordPress es un gigante. El 30% de todos los sitios web están construidos en WordPress. Es un gran CMS, con una gran comunidad y un gran soporte. Administrar contenido es fácil y ese es el objetivo principal de cualquier CMS30 En nclud desarrollo sitios de WordPress a diario. Administrar sitios web de WordPress es una delicia. Desarrollarlos no lo es. Digo esto como un desarrollador de Javascript que ha experimentado cómo se ven y se sienten las aplicaciones de Javascript isomorfas.
Los beneficios de Javascript
Estoy llegando a esto puramente desde el lado del desarrollo front-end. Node y Express son increíbles, pero la principal fuerza impulsora detrás de esta configuración, para mí, es la capacidad de usar ES2015 con React y CSS-Modules
El mayor desafío de desarrollar y mantener cualquier sitio web o aplicación de tamaño decente es la capacidad de manejar con gracia los cambios (agregar nuevas funciones o modificar las existentes) sin romper cosas. Esto generalmente implica asegurarse de que aplicar o modificar estilos no tenga consecuencias no deseadas. Esto es desafiante teniendo en cuenta que CSS tiene un alcance global. Hay metodologías CSS completas que se crearon para aliviar este dolor (SMACSS, BEM, etc.) pero implican convenciones de nombres esotéricos o requieren que recuerdes un montón de nombres de clases diferentes.
Con React, podemos usar módulos CSS para crear CSS con ámbito local. Cada componente tiene su propio estilo, que es la capacidad de componer clases CSS para otros estilos, o un conjunto de estilos globales. Es muy poderoso Tampoco es posible con WordPress.
También puede hacer estilos en línea, usar JSXStyles o una miríada de otras soluciones: soy un fanático de los Módulos CSS, así que eso es lo que usaré.
Este método también significa que los componentes React se cambian fácilmente entre proyectos. Son reutilizables, conectables. Debido a que los estilos tienen un alcance local para un componente, puede agregarlos y eliminarlos a voluntad sin tener que preocuparse por romper algo más.
Otro beneficio es la capacidad de manejar el estado de la aplicación o del sitio web, es una forma mucho más elegante. Usando Apollo (que abordaré en otra publicación) podemos administrar no solo los datos de la aplicación, sino también el estado de la interfaz de usuario. Demasiadas veces en WordPress veo un gran archivo javascript que maneja eventos e interacciones para todo un sitio web. Demasiadas veces veo en ese archivo largo pruebas para ver si un elemento tiene una clase que debería desencadenar una animación. Esto lleva a una depuración dolorosa porque el estado de la aplicación no es consistente.
¿WordPress ya no está haciendo cosas de nodo?
Si ha estado siguiendo las noticias de WordPress, probablemente haya escuchado que Automattic, la compañía detrás de WordPress, ha desarrollado una interfaz de administración basada en Node. Es bastante dulce, y ha sido de código abierto. Está alimentado por la API REST de WordPress, por lo que puede obtener todas sus cosas de WordPress-y en JSON y hacer magia con él.
Eso es bastante bueno.
Cuando originalmente me propuse tratar de reemplazar PHP con Javascript, mi primer pensamiento fue usar esta API. Tiene algunos puntos finales integrados, y tiene la capacidad de crear los suyos propios. La documentación de V2 es un poco escasa, pero lo atribuyo a que es tan nueva.
No estaba terriblemente feliz con el resultado, aunque admito que solo jugué con él durante un día más o menos. Además, como ya estoy usando React, podría abarcar todo el ecosistema.
Introduce GraphQL
¿No sería genial si nuestra aplicación o la interfaz de usuario de nuestro sitio web pudieran manejar los datos que necesita? Con REST, el servidor envía todos los datos que la IU pueda necesitar, luego permite que el cliente clasifique el resto. Es posible que deba realizar llamadas a varios puntos finales REST para obtener todos los datos posibles.
Con GraphQL, el cliente determina las relaciones de datos que requiere y realiza una consulta para recuperarlo todo. Solo hay un viaje. Y obtienes exactamente lo que necesitas.