Frontity es React para WordPress

Algunos desarrolladores simplemente prefieren trabajar en React. Realmente no los culpo, porque a mí también me gusta React. Quizás eso fue lo que aprendieron primero. Lo he estado usando durante suficiente tiempo y me resulta algo reconfortante. Pero sobre todo lo que me gusta es el modelo de componentes fuertes. Hay algo agradable en una base de código en la que las cosas se construyen a partir de componentes con tareas y responsabilidades claras.

Sin embargo, no es muy común ver sitios de WordPress creados con React. La forma estándar de utilizar WordPress es a través de temas que son esencialmente estilos y archivos PHP que manejan las plantillas. Sin embargo, Frontity está cambiando eso. Frontity es un marco impulsado por React que digiere la API de su sitio de WordPress y construye toda la interfaz en React con todas las herramientas poderosas que espera de ese tipo de entorno.

Dios mío, esa es una configuración rápida

Así pude empezar. En la línea de comando, hice:

npx frontity create my-app

Luego entré en la carpeta que creó e hice:

npx frontity dev

Eso crea instantáneamente un sitio con el que puede comenzar a trabajar.

Para que me parezca más real, entré frontity.settings.jsy cambié la API de origen para que apunte a CSS-Tricks:

{  name: "@frontity/wp-source",  state: {    source: {      api: "https://css-tricks.com/wp-json",    },  },},

Y ahora mira lo que obtengo:

Eso es salvaje . Para algunos proyectos, está listo para implementarse.

Mira su video de introducción que explica exactamente esto.

Llegando al trabajo

Mi primer instinto con cosas como esta es poner mis manos en el estilo de inmediato. El tema que se instala de forma predeterminada es el tema de Marte y tienen una buena guía que le ayudará a comprender cómo funciona. El tema utiliza Emotion para el estilo, por lo que los componentes tienen estilos con los que puedes modificar directamente. ¡Encontré el HeadContainercomponente index.jse inmediatamente hice el background: redcambio!

const HeadContainer = styled.div`  display: flex;  align-items: center;  flex-direction: column;  background-color: red;`;

Recargó el módulo en caliente ese tonto al instante:

¿Es esta una de esas tecnologías exclusivas del lado del cliente?

Eso es lo que pensé para mis adentros. Quiero decir, una de las ventajas de usar WordPress tal cual es que obtienes el procesamiento del servidor de forma gratuita. Eso significa que no hay preocupaciones de SEO (sabemos que los sitios renderizados del lado del cliente pueden tardar una semana o más en rastrearse para cada cambio). Eso significa resiliencia y velocidad.

¡Frontity realiza renderizado del lado del servidor! Utiliza renderizado isomórfico, lo que significa que necesita un servidor Node para renderizar las páginas, ¡pero eso significa que el navegador obtendrá HTML completamente formado para las páginas!

Es una combinación perfecta para Vercel , básicamente.

De manera similar a lo fácil que es desarrollar y ejecutar un sitio nuevo en desarrollo, todo lo que tiene que hacer para prepararlo para la producción es:

npx frontity build

Luego ejecute el servidor de nodo:

npx frontity serve

Fresco.

I also really like that there is community around all this. If you need help, you’ll get it.

This is a best-of-all-worlds scenario.

I’m always very happy building sites with WordPress, and doubly so now that we have the block editor to use. I really like having an editor experience that helps me write and craft the kind of pages I want to create.

But I also like working with component-based architectures that have fast, easy-to-use, hot refreshing local development environments. Once you work in this kind of dev environment, it’s hard to use anything else! Beautiful DX.

And I also also want to make damn sure the sites I deploy to production are fast, robust, resilient, accessible, and SEO friendly.

I’d get all that with a Frontity site.

Another thing I like here is that Automattic themselves is on board with all this. Not just in spirit, but they are literally big investors. I think they are very smart to see this as an important part of the WordPress ecosystem. Building with WordPress doesn’t mean not building with React, especially with Frontity doing so much of the heavy lifting.