Escribe una vez, usa en todas partes: React se encuentra con Web Components

Hola a todos, gracias por estar aquí. Estoy muy emocionado de compartir esta charla con ustedes. Hoy, vamos a explorar algo que encuentro súper interesante. ¿Qué sucede cuando React se encuentra con web components? He estado trabajando con React durante años. Me encanta el modelo de componentes, el ecosistema, pero también siempre sentí que algo faltaba.

React nos da una promesa de componentes universales reutilizables, sin embargo, de alguna manera solo viven realmente dentro de las aplicaciones de React. Así que en esta charla, quiero desentrañar eso. Veremos lo que React afirma ser, lo que realmente es, y cómo los web components pueden ayudar a cerrar esa brecha. Así que antes de comenzar, un poco sobre mí. Soy Adar Geva, y he estado trabajando en sistemas front end durante bastante tiempo. Me gusta centrarme en donde los frameworks, las herramientas y la arquitectura se encuentran.

Últimamente, estoy trabajando en mi propio proyecto llamado myapp.dev. Se trata de hacer que la salida de IA, micro front end y UI remota se sientan más naturales de construir e integrar. Me encanta explorar cómo diferentes tecnologías se integran, y de eso se trata exactamente la charla de hoy, de traer React y web component a la misma conversación. Así que comencemos con esto. React. Todos conocemos este lema, ¿verdad? La biblioteca para interfaces de usuario web y nativas. Es corto, confiado, y de alguna manera establece grandes expectativas. Afirma potenciar interfaces a través de web y nativo, y me encanta eso porque suena como si la promesa de React fuera la universalidad.

Construir una vez, renderizar en todas partes. Pero como veremos, hay una brecha entre la promesa y lo que realmente obtenemos en la práctica. React realmente brilla cuando se trata de construir y gestionar componentes. La idea es súper simple. Construir pequeñas piezas reutilizables como miniaturas o botones de "me gusta", y luego componerlas juntas en algo más grande, una página, una aplicación, una experiencia completa. Es esa mentalidad de ladrillo de Lego de la que todos nos enamoramos. Cada pieza está aislada, fácil de leer y entender, y una vez que empiezas a pensar en componentes, es realmente difícil volver atrás.

Pero espera un minuto. Acabamos de decir que React es la biblioteca para las interfaces web y nativas, y nos permite construir componentes reutilizables, ¿verdad? Entonces, ¿no debería eso significar que podemos usar esos componentes en cualquier lugar? Bueno, no exactamente. Ahí es donde las cosas empiezan a ponerse interesantes. Aquí está la letra pequeña. React por sí solo es una biblioteca. Te da componentes, pero no la imagen completa. Si realmente quieres usar esos componentes en una aplicación real, generalmente necesitas envolver ellos dentro de un entorno completo de React. Next.js, Remix, React Router, algo que controle el enrutamiento, la obtención de datos, el flujo de renderizado.

Así que aunque React suena universal, realmente está un poco atrapado dentro de su propio ecosistema. No puedes simplemente colocar componentes de React en una página web simple, o digamos una aplicación de Angular. Al menos no es tan fácil. Así que eso me hizo pensar. Si los componentes de React son tan poderosos, pero están un poco encerrados dentro de React, ¿qué pasaría si hubiera una manera de hacer que esos componentes realmente funcionen en cualquier lugar? Componentes que no se preocupen si estás en React, Angular, Vue, o sin ningún framework. Ahí es donde entran los Web Components. No son un framework. En realidad están integrados directamente en la plataforma web. Los Web Components te permiten definir tus propios elementos HTML, completamente encapsulados, reutilizables y agnósticos al framework. Es como finalmente tener un verdadero modelo de componentes nativos para la web.

Algo que React prometió, pero que el propio navegador realmente entrega. Y la parte emocionante, los Web Components ya no son ese experimento de nicho, medio soportado que solían ser. En los últimos años, cada framework importante, React, Angular, Vue, Svelte, y más ha añadido un soporte sólido para trabajar con elementos personalizados. Así que ahora finalmente puedes compartir un componente entre proyectos, equipos, e incluso frameworks sin reescribirlos cada vez. El navegador maneja el trabajo pesado, y todos los frameworks finalmente acuerdan llevarse bien con él. Vamos a desglosar de qué están hechos realmente los Web Components.

Hay tres partes principales. Primero, el shadow dome. Esto es lo que ha dado a los Web Components una verdadera encapsulación. Los estilos y el marcado dentro están aislados del resto de la página, por lo que nada se filtra dentro o fuera por accidente. Segundo, elementos personalizados. Estos son cómo defines tus propias etiquetas HTML con comportamiento real, como user card o like button. Y tercero, plantillas HTML. Básicamente, trozos de marcado que permanecen ocultos hasta que decides clonarlos y usarlos. Juntos, estos hacen que los Web Components sean autónomos, reutilizables y verdaderamente portátiles, integrados directamente en la propia web.

Ahora, al igual que React, los Web Components tienen su propio ciclo de vida incorporado. Cuando creas un elemento personalizado, se llamará a un constructor. Un método llamado connected callback, cuando se añade al DOM, disconnected callback cuando se elimina, e incluso attribute change cuando su atributo se actualiza. Todo es nativo, no se necesita framework. Así que obtenemos la misma reactividad y control de componentes directamente a nivel del navegador. Muy bien, hemos visto que los Web Components tienen hooks de ciclo de vida y una verdadera encapsulación a nivel del navegador. Lo que quiero mostrar a continuación es una idea simple.

En lugar de escribir una plantilla a mano, dejamos que React renderice la UI, y luego usamos ese HTML renderizado como la plantilla dentro de un elemento personalizado. En otras palabras, React hace el trabajo pesado de describir la UI, y los Web Components se convierten en el contenedor portátil que lleva esa UI a todas partes. Eso nos da la ergonomía de desarrollo de React, JSX, States, Hooks, además de la portabilidad y encapsulación de elementos personalizados nativos.

Ahora, pasemos a una breve demostración. Recorreremos el código en piezas pequeñas, claras y paso a paso. Comenzamos con el Web Component más simple posible, aún sin React. Aquí, solo se define un nuevo elemento, llamado Hello World. Cuando se añade al DOM, el navegador llama al connected callback, y establecemos su inner HTML. Eso es todo. Sin paso de compilación, sin biblioteca, solo API pura del navegador. Una vez que lo registramos con custom element defined, literalmente podemos colocar Hello World en cualquier lugar.

Esta es la base. Y a continuación, veremos cómo podemos hacer que este elemento tenga el poder de React en lugar de ser estático. Aquí está la parte de React de la historia. Un componente súper simple llamado Greeting. Solo toma un prop de nombre y renderiza un mensaje amistoso. Nada sofisticado. Aún no hay estado, ni hooks, solo un bloque de construcción básico de React que todos conocemos. Y aquí es donde ocurre la magia. Estamos creando un elemento personalizado llamado Greeting element, como antes, pero esta vez, dentro del connected callback, estamos usando React create root para montar nuestro componente Greeting directamente en el elemento. Eso significa que React ahora se está renderizando dentro de un Web Component nativo.

El navegador posee el ciclo de vida, y React solo pinta en él. Una vez que lo definimos con custom element defined, podemos colocar elementos Greeting en cualquier página HTML. Sin configuración de aplicación React, sin contexto de empaquetador, y simplemente funciona. Este elemento Greeting no se preocupa por dónde se está ejecutando. Puedes colocarlo dentro de cualquier proyecto de vista de aplicación Angular, escrito en HTML simple. Simplemente funciona. Sin contexto de React, sin árbol de proveedores, sin dependencia de la tubería de construcción, solo un elemento personalizado que el navegador ya sabe cómo manejar.

Y de repente, el poder de la UI de React se vuelve verdaderamente agnóstico al marco. Así que ahora, lo llevamos un paso más allá, haciendo que nuestro Web Component sea dinámico al agregar atributos de observación. El navegador llama automáticamente al callback de cambio de atributo cada vez que uno de esos atributos cambia. En nuestro caso, estamos observando el atributo name, y cada vez que se actualiza, simplemente llamamos a render de nuevo. Y dejamos que React maneje la UI. Eso significa que ahora puedo escribir Greeting element name equals Adar en HTML simple, y React se renderizará con ese nuevo nombre. Y por supuesto, no estamos limitados a solo un atributo.

Podemos pasar tantos props como queramos, números, objetos, arrays, incluso callbacks complejos. Todo puede fluir directamente hacia y desde nuestro Componente React. El Web Component se convirtió en el puente que toma cualquier dato o función que pases dentro o fuera, y deja que React maneje el renderizado y la lógica en el interior. Nuestro Web Component puede aceptar datos dinámicos de cualquier marco. Por ejemplo, en Vue, puedes simplemente vincular un prop directamente con name equals Vue prop. En Angular, puedes simplemente pasar una variable en la sintaxis de Angular. Incluso en HTML simple, puedes simplemente codificar el atributo name. El Web Component actúa como un puente universal.

React maneja el renderizado internamente, pero cualquier marco o código vanilla puede proporcionarle datos o incluso callbacks. Eso significa que un solo Componente React ahora puede funcionar en múltiples marcos sin reescribirlo en absoluto. Totalmente portátil y reactivo.

Así que, creé un ejemplo de monorepo con aplicaciones de Angular, React y View. Dentro del paquete de React, creé dos componentes, Like Button y un Video Player. Estos son solo componentes estándar de React con los props, el estado y el JSX normal. Luego, en la aplicación principal, importo estos componentes y los renderizo en la página principal, pasando props y obteniendo callbacks.

Por ejemplo, en el Video Player, estoy enviando el SRC del video, la imagen del póster, la altura y el ancho, y cada vez que se hace clic en play o pause, simplemente lo registro en la consola. Veamos esta página en el navegador, y como se esperaba, podemos ver el Video Player y el Like button mostrando en la pantalla. Si abrimos la consola, por supuesto, cada vez que se hace clic en un Like button, se imprime un registro, así como al presionar play y pause. Bastante estándar.

Ahora, he creado otro archivo de entrada llamado Web Component Main. Este archivo TypeScript será el punto de entrada para exponer un nuevo elemento personalizado. Comencemos definiendo un elemento personalizado estándar. Vamos a importar Define Component 1, y en este archivo, solo queremos exportar una clase que extienda elementos HTML y renderice un fragmento estándar de HTML en cadena. Bastante estándar.

Veámoslo en acción. Así que, veámoslo en el navegador. Tres elementos mostrando en la pantalla. Podemos verlos aquí en el DOM, cada uno de ellos incluyendo el shadow DOM, y una vez que pasamos un atributo llamado name, podemos ver que llegó al lugar correcto en el DOM. Si vamos aquí y editamos plantillas, así que añadamos prueba, por ejemplo, la aplicación se vuelve a renderizar con las modificaciones correctas. Eso es genial, y como podemos ver, también intentamos renderizar Like button y Video Player aquí, que en realidad llegaron al DOM pero aún no están implementados, por lo que no se renderizó nada.

El navegador de forma nativa no sabe qué es Like button y Video Player, por lo tanto, no se renderizó nada. Así que, vamos a definir estos componentes como un elemento personalizado y usar nuestro componente React existente. Así que, vamos aquí y creamos Define Like button, y al igual que antes, estamos exponiendo un array de atributos a los que queremos escuchar. Estamos creando un shadow DOM, pero ahora dentro de nuestra función de renderizado, estamos usando create root de React DOM client y también importamos nuestro componente original Like button, luego podemos simplemente renderizar directamente el componente Like button, un componente React, enviando los props que recopilamos de los atributos.

Y como podemos ver, el componente se renderizó igual que antes en la aplicación React. Está reaccionando correctamente a los atributos que estamos enviando. Así que, por ejemplo, la altura y el ancho, el SLC del video o el conteo de Likes para el componente Like, y si estamos dispuestos a usar más objetos complejos como los callbacks que usamos antes, podemos simplemente obtener el elemento correcto del DOM y pasarlo como una propiedad.

Como podemos ver, estamos obteniendo el elemento Like button. Es un elemento de componente web y pasando unlike change callback y console logo. Veamos. Ahora, cuando hacemos clic en el Like button, el callback de React realmente activa el prop que pasamos desde una aplicación nativa de JavaScript.

Ahora vamos a usar estos componentes que se exportaron como elementos personalizados en una aplicación Vue. Así que voy a la aplicación Vue y en nuestro archivo principal de hoja de estilos, importando el mismo WC main que define los elementos personalizados. Y ahora dentro de mis plantillas de la aplicación, usando el Vue player y Like button en una sintaxis de Vue.js. Vamos a ejecutarlo y ver. Y como podemos ver, el componente React ahora se está renderizando directamente en el contexto de Vue. Se ve exactamente como queríamos.

Muy bien, recapitulemos lo que hemos hecho aquí. Primero, los fundamentos. Los hooks de ciclo de vida nos dan control sobre la inicialización y limpieza, haciendo los componentes robustos. Shadow DOM y estilos de alcance previenen la fuga de estilos, por lo que nuestros componentes se ven consistentes sin importar dónde se utilicen. A continuación, compatibilidad entre marcos. Este componente funciona sin problemas en React, Angular, Vue, o incluso en HTML simple. Los props y eventos nos permiten comunicarnos claramente entre el componente web y la aplicación host. Y finalmente, la integración de herramientas de construcción, para que podamos usar cualquier enfoque de empaquetado en ambos sitios. Y básicamente combinamos la ergonomía de desarrollo de React con la portabilidad y encapsulación de componentes web nativos. Todo funciona en todas partes.