Construyendo frontends de React para WordPress

Así que primero, permítanme darles un poco de contexto sobre WordPress. WordPress es el sistema de gestión de contenido más popular en la web. Alimenta el 30% de ella. También es una de las comunidades de código abierto más grandes con más de 15,000 temas y más de 55,000 complementos. Y también es la plataforma elegida para los especialistas en marketing y creadores de contenido.

Pero supongo que se estarán preguntando, ¿por qué este tipo está hablando de WordPress en una conferencia de JavaScript, ¿verdad? Bueno, es porque después de años de trabajar mano a mano con editores y desarrolladores de WordPress, hemos encontrado una forma de combinar WordPress en el frontend y JavaScript en el frontend, quiero decir, WordPress en el backend y JavaScript en el frontend. Así que permítanme explicarles cómo podemos combinar React y WordPress.

Hay tres puntos principales a tener en cuenta. El primero es, la primera razón es crear una gran interfaz de usuario y experiencia de usuario para el visitante web. Al mismo tiempo, queremos mantener una gran experiencia de desarrollo para el equipo técnico encargado de crear y mantener el sitio web. Y por último, también debemos tener en cuenta que necesitamos proporcionar una gran experiencia de gestión de contenido para el equipo encargado de administrar el contenido del sitio web.

Entonces, ¿cómo podemos lograr este triángulo de oro utilizando React y WordPress? Es fácil. Desde 2016, WordPress incluye una API REST. Esta API REST abre un mundo de posibilidades. Y ahora podemos usar WordPress como un CMS sin cabeza. Usar WordPress como un CMS sin cabeza significa que usamos WordPress solo en el backend para administrar el contenido y exponerlo utilizando nuestra API REST en formato JSON. Con esta API REST, cualquier equipo técnico puede elegir la tecnología que desee para el frontend. Por ejemplo, pueden construir el frontend con una aplicación React.

En realidad, este enfoque no es nuevo para nosotros. Hemos estado trabajando con esta arquitectura desde 2017. Cuando algunos editores de WordPress vinieron a nosotros con una solicitud. Querían mejorar la experiencia de usuario de sus sitios móviles con un objetivo. Querían mejorar la participación de los usuarios en sus sitios web. Entonces, para ayudarlos a lograr este objetivo, desarrollamos un producto llamado Frontity Pro, que era un tema móvil con navegación instantánea y deslizamiento. Este tema móvil se programó utilizando React porque con PHP y jQuery, era muy difícil lograr estas características.

Este es Gudo, uno de estos grandes clientes que quería usar Frontity Pro.

Este es su sitio web. Puedes navegarlo tú mismo usando tu teléfono móvil, pero déjame hacer una demostración rápida. Así es su sitio web. Puede parecer un sitio web normal, pero como dije, tiene algunas características geniales como el deslizamiento entre categorías. También tiene carga instantánea en los artículos y también deslizamiento entre artículos. Nuestro objetivo era proporcionar una experiencia de usuario lo más cercana posible a una aplicación móvil nativa, pero en el navegador móvil. Y como puedes ver, este sitio web funciona muy bien.

Este sitio web, este proyecto fue un éxito y logró excelentes resultados para este editor. GoodLock vio un aumento en todos los KPI que estaban midiendo, incluyendo las vistas de página, el tráfico orgánico, el tiempo pasado en el sitio web y también un aumento en la adquisición de usuarios. Después de ayudar a docenas de editores, decidimos liberar toda nuestra tecnología y abrir nuestro proyecto. Y el resultado fue el framework Frontity.

Frontity es la forma más fácil de crear sitios web ultrarrápidos utilizando WordPress y React. Estas son algunas de las características clave del framework. Frontity es realmente fácil de usar. Viene con una arquitectura de configuración cero y una gran experiencia para desarrolladores. Babel, Webpack, el enrutamiento, el gestor de estado, todo está configurado y funciona directamente. También es un framework compatible con SEO. Hemos resuelto la renderización del lado del servidor de la aplicación. También es un framework extensible, lo que significa que puedes reutilizar fácilmente partes de tu código en diferentes proyectos. Y no solo tu propio código, sino también incluir temas y extensiones creados por la comunidad. Y como dije, hemos estado utilizando este framework con Frontity Pro, ayudando a esos editores y está probado en batalla. Frontity Pro ha servido millones de vistas de página en todo el mundo y está listo para producción. Antes de terminar, quiero hacer un resumen rápido. Hemos construido un puente sólido entre dos mundos que estaban totalmente desconectados, WordPress y React. Y estamos muy seguros de las posibilidades de esta nueva combinación. El ecosistema de WordPress ya está emocionado por comenzar a usar React en el frontend. Y esperamos que la comunidad de React también acepte la posibilidad de usar WordPress en el backend, como dije, para proporcionar una gran experiencia para desarrolladores, una gran experiencia para usuarios y una gran experiencia de gestión de contenido. Si tienes curiosidad y quieres comenzar a explorar e investigar Frontity, te invito a visitar nuestro sitio web, frontity.org. También puedes consultar nuestra documentación, donde tenemos una guía de inicio realmente fácil paso a paso. Y también quiero invitarte a unirte a nuestra comunidad, donde podrás iniciar una conversación con los creadores de Frontity, la comunidad, personas que utilizan el framework y compartir todos tus comentarios. También estaremos encantados de mantener la conversación en Twitter. Así que no dudes en contactarnos allí. Muchas gracias por estar aquí con nosotros en la conferencia. Disfruta del resto de las charlas.