rafaelboyero

Diseño y Desarrollo Web

React

by

API REST de WordPress

Cada desarrollador tiene algo que decir sobre WordPress, y no siempre es halagador. Sin embargo, incluso sus detractores más ávidos se verán obligados a notar esta nueva característica, ya que podría transformar la forma en que usamos el popular CMS.

WordPress Rest API es un gran paso adelante para los desarrolladores frontend que buscan combinar el poder de herramientas de JavaScript como React.js con WordPress.

¿Qué es la API REST de WordPress?

WordPress en sí no necesita ninguna introducción, pero echemos un vistazo más de cerca a la reciente API WP REST. Antes de comenzar a deslizarnos por el camino de su evolución, eliminemos algunas definiciones:

Una API (Application Program Interface) es un conjunto de protocolos para crear aplicaciones de software. Define la forma en que la información se comparte entre programas y estructura la forma en que los diferentes componentes de una aplicación interactuarán entre sí. Una buena API facilita el desarrollo del programa al proporcionar todas las piezas necesarias.

REST (Representational State Transfer) es un estilo arquitectónico que define restricciones en la forma en que se realizan los programas. Cuando los servicios web cumplen con esta arquitectura, los llamamos API RESTful o, simplemente, API RESTful.

JSON (JavaScript Object Notation) es un formato para estructurar datos para que una gran cantidad de aplicaciones puedan leerlo. Facilita las interacciones entre, por ejemplo, WordPress y cualquier tipo de aplicación.

A partir de WordPress 4.7, estos conceptos se han aplicado para crear la API REST JSON de WordPress. Permite un enfoque desacoplado, separando efectivamente los datos (parte posterior) de las vistas (parte frontal).

¿Qué significa para los usuarios?

De ahora en adelante, WordPress puede usarse como un CMS sin cabeza.

Esto ofrece un mundo completamente nuevo de posibilidades para los desarrolladores, ya que la interfaz de WordPress no necesita ser «WordPress» : vistas generadas por PHP. El creciente número de marcos frontend ahora se puede conectar a un backend de WordPress para desarrollar sitios web y aplicaciones.

Cuando se trata de WP REST API, abundan los beneficios. No solo confíe en mi palabra, los desarrolladores que ya lo usan están encantados con este cambio de paradigma.

Aplicaciones más fáciles y uso de React.js

WordPress REST API facilita la conexión a aplicaciones. Una aplicación móvil de aspecto personalizado ahora puede leer más fácilmente que nunca no solo datos de WordPress, sino también crear, editar y eliminar esos datos.

Muchos han comenzado a usar WordPress en «lugares extraños» , como en aplicaciones en las que hubiera sido difícil trabajar hace unos años.

En cuanto a nosotros? Elegimos React para esta demostración porque, bueno, hemos estado hablando demasiado sobre Vue recientemente. Bromas aparte, queremos mantener nuestro contenido diversificado, y React sigue siendo uno de los mejores marcos: sistema de componentes flexible y re utilizable, proyecto de código abierto respaldado por Facebook, flujo de trabajo eficiente con JSX, etc.

by

WordPress con Node, React y GraphQL

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.