A Prueba de Futuro Tu UI: Construyendo Con Web Components

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¿Te encantan los estándares pero odias el DX de los web components? Yo también.

Como un escéptico reformado de los Web Components debido a mis preocupaciones de DX, me encontré con un desafío interesante en SuperTokens: crear una biblioteca de UI que soporte todos los frameworks y siga siendo a prueba de futuro. Después de investigar un poco, descubrí que SolidJS compila a Web Components, ofreciendo una experiencia de desarrollador familiar, similar a React, exactamente lo que necesitaba para convertirme en un creyente. Después de un par de rondas de experimentación, me enamoré de los web components.

Esta charla compartirá ideas de nuestro viaje hacia la adopción de Web Components para nuestra biblioteca de UI de autenticación de próxima generación en SuperTokens y por qué los web components son una gran idea que llegó para quedarse.

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

Darko Bozhinovski
Darko Bozhinovski
27 min
16 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hoy, Darko discute el uso de web components para hacer que las UIs sean a prueba de futuro y su compatibilidad con múltiples frameworks. Aborda los desafíos de los web components e introduce la herramienta Solid Element para una mejor experiencia de desarrollador. La demostración muestra el uso de props y slots en web components y explora el manejo de eventos. Darko también demuestra cómo integrar web components con React. Enfatiza que los web components no son una solución mágica, pero son valiosos para casos de uso específicos y pueden ser reemplazados con frameworks. Destaca la utilidad de los web components para sistemas de diseño y proyectos como SuperTokens. Los web components también son adecuados para widgets y componentes hoja.

1. Futureproofing UI with Web Components

Short description:

Hoy, voy a hablar sobre cómo preparar tu UI para el futuro usando web components. Mi nombre es Darko. Me encanta Linux. Actualmente estoy haciendo el DERL para SuperTokens, la empresa de autenticación de código abierto. Esto comenzó como un experimento de I+D en mi trabajo en SuperTokens. Los Web Components son la herramienta perfecta para soportar múltiples frameworks de UI. El experimento fue un éxito y es posible que publiquemos una biblioteca basada en él. SolidJS ha sido una de las mejores cosas para la web en los últimos años.

Hoy, voy a hablar sobre cómo preparar tu UI para el futuro usando web components. Ahora, mi charla está algo relacionada con un reciente drama en Twitter, pero prometo que es anterior a ese drama y realmente no estaba buscando provocar nada con esto. Y otra confesión, el título es un poco un anzuelo, pero probablemente estaremos de acuerdo en que algo como, y cito, teníamos un caso de uso específico mejor resuelto con web components para hacer nuestro material a prueba de futuro, bueno, eso es un poco largo, ¿verdad? Así que vamos con este en su lugar.

Mi nombre es Darko. Me encanta Linux. Soy un nerd de Linux en toda regla. Me encanta todo lo abierto. Código abierto, la web abierta, estándares y demás. Actualmente estoy haciendo el DERL para SuperTokens, la empresa de autenticación de código abierto, échale un vistazo. Y estoy escribiendo en Darko.io. Ahora estoy en la mayoría de las redes sociales, si quieres seguirme a mí y a mi trabajo. Y también estoy en BlueSky porque BlueSky es increíble.

Para darte un poco de contexto sobre por qué comencé a hacer esto en primer lugar. Ahora, esto comenzó como un viaje y un experimento de I+D en mi trabajo en SuperTokens. Teníamos una pregunta frente a nosotros. ¿Cómo soportas, con una biblioteca de UI, todos los frameworks de UI que existen? Bueno, puedes responder a esa pregunta de una de dos maneras, generalmente. Una de ellas es emplear un ejército de ingenieros que te permita soportar Angular, React, Vue, Svelte, Solid y el resto de ellos. Hay muchos. O puedes optar por algo como Web Components. Ahora, no me malinterpretes. Los Web Components son una especie de compromiso en muchos sentidos. Pero dado el problema adecuado, bueno, son la herramienta perfecta para ello. Resulta que este experimento terminó siendo un éxito. Y veremos por qué terminó siendo un éxito. Es posible que publiquemos una biblioteca relacionada con UI, relacionada con autenticación, basada en este experimento.

Un poco de historia relacionada con el drama de Twitter que mencioné antes. Ahora, no me malinterpretes. Respeto completamente a Ryan y su trabajo. Y me encanta todo lo relacionado con Solid. Creo firmemente que SolidJS ha sido una de las mejores cosas que le ha pasado a la web en los últimos años.

2. Understanding Web Components

Short description:

Contrastando el título del blog de Ryan con mi presentación, estoy de acuerdo con la mayoría de lo que escribió. El drama de Twitter en torno a los Web Components reveló opiniones polarizadas. Sin embargo, hay un punto medio, y tanto las personas de frameworks como las personas de estándares tienen problemas válidos. Los autores que no son de frameworks y las personas que no son de estándares también tienen una perspectiva. Los Web Components son como etiquetas personalizadas de bricolaje que se pueden distribuir de varias maneras y funcionan a través de frameworks. Son un estándar y se pueden categorizar en tres cosas temáticas.

Pero si contrastas este título, Web Components are not the future, que proviene del blog de Ryan con el título de mi presentación que es Future-proof your UI building with Web Components, obtienes un contraste. Realmente no va en la misma dirección. Y francamente solo estaba tratando de ayudar con el título aquí. Pero dejando de lado su título, estoy de acuerdo con la mayoría de lo que escribió allí. Así que ten eso en cuenta mientras avanzamos en esta presentación.

Lo interesante que surgió de este título fue como este drama de Twitter. Y ves como esta fenomenal representación artística usando mis fenomenales habilidades artísticas. Bueno, de un lado tenemos a las personas de frameworks que decían ¡Web Components apestan! Como que no nos gustan. Y las personas de estándares del otro lado decían Web Components all the things porque como razones. Sabes, hay muchas razones para hacer eso. Y está el resto de nosotros como refiriéndose al meme del campesino ahí abajo. Pero sabes que algunos de nosotros usamos ambos. Y como si estás involucrado en un drama de Twitter te hace sentir un poco raro digamos porque los dramas de Twitter tienden a ser muy polarizantes. Ignorando que hey hay un punto medio aquí. Sabes que puedes usar ambas herramientas adecuadas para el trabajo adecuado y todo eso. Así que desde el punto de vista de los autores que no son de frameworks y las personas que no son de estándares, ese es como el punto de vista del que estoy hablando. Me di cuenta de que los problemas de las personas de frameworks son reales y los problemas de las personas de estándares son reales pero estadísticamente hablando no son el tipo de problema más común. Así que solo ten eso en cuenta durante la presentación.

Así que bueno, suficiente drama. Vamos a lo que realmente son los Web Components. Entonces, en cierto sentido, puedes considerarlos etiquetas personalizadas de bricolaje. Tener tu propia etiqueta HTML para cualquier caso de uso que puedas imaginar. Se pueden distribuir a través de etiquetas de script, a través de declaraciones de importación, a través de todas las formas regulares en que puedes importar cualquier cosa en una página web, aplicación web. Estos funcionan a través de frameworks. En su mayoría. React no los estaba.. no los estaba soportando completamente hasta la 19. La 19 los soporta muy bien. Así que como que puedes usarlos prácticamente en cualquier lugar en realidad. Así que son un estándar como hemos establecido y pero bajo el capó puedes dividirlos en como tres cosas temáticas en general.

3. Challenges of Web Components

Short description:

La API de elementos personalizados, la API de shadow DOM y los elementos HTML, Slot y Template conforman la familia de APIs de componentes web. Sin embargo, las APIs no son bonitas y no coinciden con la experiencia del desarrollador de los frameworks modernos. Los componentes web están más cerca de los elementos HTML pero tienen limitaciones en comparación con los componentes de frameworks. Herramientas como Solid Element te permiten escribir componentes en frameworks modernos y compilarlos en componentes web para su distribución. Esto proporciona una mejor experiencia para el desarrollador y moderniza el uso de componentes web.

Como está la API de elementos personalizados, la API que te permite registrar esas cosas en el DOM. Está la API de shadow DOM que encapsula y oculta algunas cosas bajo el capó y están los elementos HTML, Slot y Templates que juntos crean lo que llamamos la familia de APIs de componentes web. Pero no vamos a entrar mucho en eso. Si estás interesado en la teoría, solo revisa MDN. Hay muchos recursos allí.

Sin embargo, tenemos algunos problemas. Bueno, las APIs son... ¿cómo lo digo suavemente? No son bonitas. En mi experiencia o al menos en mi opinión. Y sé que es sesgado. Pero acostumbrarse a una experiencia de desarrollador como la de JSX, bueno, no hay opción de volver de eso a menos que introduzcas algo mejor. Y de nuevo, en mi muy sesgada opinión, optar por la herencia de clases y la forma muy antigua de escribir componentes me parece un paso atrás, honestamente. Y hay otro problema.

Como hemos establecido recientemente a través de esa cadena de publicaciones de drama en blogs, como la idea de componentes web no se traduce exactamente bien a la idea de un componente de framework. Así que esos son dos de los mayores problemas actualmente. Ahora, en mi opinión, los componentes web están significativamente más cerca de los elementos HTML. A como la idea de un elemento. Y los componentes web pueden ser mucho más complejos, pueden hacer más cosas. No es que los componentes web no puedan, pero la complejidad que puedes manejar a través de componentes de frameworks en mi opinión es un poco mayor que lo que puedes hacer con componentes web. Ahora, debido a esto, la idea de compilar a componentes web desde un componente de framework no siempre se traduce bien. Y veremos por qué más adelante.

Ahora, en primer lugar, el problema de la experiencia del desarrollador se aborda muy fácilmente. Tenemos muchas herramientas modernas que te permiten escribir un componente en, como, SolidJS, en Vue, en Svelte, lo que sea, y compilarlo a un componente web que puedes distribuir en cualquier lugar. Ahora, mi herramienta preferida es Solid Element, porque me encanta Solid. Es increíble. Así que puedes usar cosas como Signals, todas las cosas buenas que vienen con Solid, y como empaquetarlo dentro de un componente web y enviarlo a cualquier lugar. Y como, el ejemplo que tenemos aquí a la izquierda me parece un poco anticuado, como, sin ofender, pero como Java circa 07. Y como el de la derecha aquí se siente muy moderno. Puedes escribir algo de JSX, se empaqueta como un componente web, ¿qué no te va a gustar, sabes? Tendría la experiencia adecuada, la experiencia adecuada para el desarrollador, cualquier día de la semana, comparado con el de la izquierda. OK, pero sabes qué, basta de drama y teoría.

4. Building with Vite and Solid

Short description:

Estamos usando Vite y el scaffold de Solid para construir nuestra demo, que es un componente web. El archivo principal importa el componente básico envuelto en un elemento personalizado usando solid element. Esto nos permite escribir JSX y compilarlo a HTML. La página muestra un componente de hello world con un shadow DOM.

Vamos a construir algunas cosas. OK, ahora para nuestra demo, estamos usando Vite, y estamos basando nuestra demo en el scaffold de Solid, que puedes encontrar en el scaffold regular de Vite Solid, pero con dos diferencias. Se va a construir en el modo de biblioteca, lo que significa que obtenemos un archivo JavaScript de él que podemos incrustar tal vez en un proyecto de React, y estamos usando este plugin aquí que ayuda con el empaquetado de CSS.

Ahora, CSS, hay un par de maneras de empaquetar CSS junto con un componente web, pero para propósitos de demostración, esta es probablemente una de las más simples que he encontrado, así que vamos a usar esa. Si echamos un vistazo al archivo index, porque como cada proyecto de Vite viene con un archivo index, podemos ver todas las cosas regulares que esperamos de un scaffold de Vite, pero tenemos este componente C básico aquí, vamos a ver qué es eso, pero en resumen, así es como se ven los componentes personalizados, o más bien, los componentes web.

Ahora, nuestro punto de entrada en todo esto es este archivo principal en el que importamos todo lo demás, y actualmente solo importa algo llamado básico, así que echemos un vistazo a básico. Básico es, bueno, una especie de componente solid en cierto sentido, pero está envuelto dentro de esta cosa llamada elemento personalizado, que viene de solid element, que es esta biblioteca que nos ayuda a construir componentes web usando solid js. La forma en que funciona es tomando un montón de argumentos de entrada, el primero siendo C básico, que le da a este componente el nombre bajo el cual podemos referenciarlo dentro del HTML, o en cualquier otro lugar para el caso. El segundo tiene que ver con props y atributos, pero entraremos en eso en el próximo ejemplo, y el tercero es una función, que nos permite básicamente escribir algo de JSX aquí, esto es JSX, y compilarlo a HTML, que puede ser inyectado dentro de cualquier DOM.

Así que echemos un vistazo a eso en el navegador. Ahora ya tenemos el servidor de desarrollo corriendo aquí, y si echamos un vistazo a la página, tenemos este hello world aquí, si lo inspeccionamos, vemos el componente C básico con esta cosa llamada shadow DOM, porque estamos usando el shadow DOM. Nos adentraremos un poco más en eso más tarde. Y volvamos a index. Si copiamos esto un par de veces, se va a comportar exactamente igual que en el HTML, así que básicamente lo que puedes esperar de una etiqueta que ya tiene alguna funcionalidad predefinida, estilos, lo que sea, y tenemos tres hello worlds en pantalla, así que deshagámonos de ese y pasemos al siguiente ejemplo.

5. Props and Slots

Short description:

Los props nos permiten pasar datos y modificar el comportamiento. Podemos personalizar el mensaje usando props. Sin embargo, solo las cadenas y los booleanos pueden usarse de manera confiable como props. Los slots en el mundo de Solid-to-web-components son similares a los children de React. Los slots predeterminados aparecen entre las etiquetas, mientras que los slots nombrados se renderizan dentro de un div especificado.

A continuación, tenemos props. Ahora, una de las formas en que podemos pasar datos, tal vez incluso modificar el comportamiento, es props. No importa, en cualquier lugar, como, si estamos usando React, o si estamos usando Solid, si estamos usando Vue, funciona de esa manera en todas partes.

Si echamos un vistazo al archivo de props aquí, veremos que es muy similar al ejemplo básico ejemplo, le damos un nombre, pero estamos pasando algunos props. Entonces, este prop, myMessage, es como el predeterminado, digamos, y lo referenciamos por props.myMessage, que es el argumento de entrada de la función que es el tercer argumento de custom element.

Podemos usar estos datos si no los sobrescribimos en el HTML, así que echemos un vistazo a cómo eso realmente se ve. Solo pasa algunos props sin ningún props, y probablemente veremos otro hola mundo, ¿verdad? No muy emocionante. Sin embargo, si hacemos algo como esto, podemos personalizar el mensaje. Por supuesto, hola desde el otro lado. Y si le pasamos algo más, este cursor siendo un poco inteligente, claro, ¿por qué no? Y estamos obteniendo algo más.

Así que ya tenemos alguna forma de personalizar lo que sucede dentro del componente personalizado, o componente web, elemento personalizado o componente web desde el mundo exterior, en cierto sentido. Ahora, hay una advertencia aquí. Los únicos dos tipos que podemos usar de manera confiable aquí son cadenas, porque los atributos se pasan como cadenas, o más bien HTML admite atributos de cadena, o booleanos, teniendo la presencia o la ausencia de cierta cosa.

Hay formas de pasar otros tipos de datos, no podemos mostrar eso aquí, es un poco más complicado, pero intentaré hacer un ejemplo con eso un poco más tarde. Ahora, a continuación están los slots. Probablemente estés familiarizado con slots bajo un nombre diferente. En el mundo de React, los slots son algo equivalentes a los hijos de React.

Ahora echemos un vistazo a cómo se ven los slots en este mundo muy extraño de compilación de solid-to-web-components. Ahora, podemos usar una etiqueta de slot. Y los slots vienen en dos sabores en general, como slots nombrados y slots predeterminados. Los slots predeterminados son lo que puedes simplemente poner entre las etiquetas de tu elemento personalizado y aparece aquí, en este div en particular. Y si usamos un slot nombrado y le pasamos un atributo de slot en el otro lado, se renderiza dentro de este. Así que veamos cómo se ve eso en acción. Así que si usamos cslots y digamos que queremos hacer Hello World, claro. Hagamos esto. Eliminemos este por ahora, no lo vamos a necesitar. Y veamos realmente cómo se traduce esto del HTML al JSX que tenemos en el otro lado.

6. Slots and Event Handling

Short description:

Podemos usar slots para personalizar el contenido de un elemento personalizado. Los slots dependen del shadow DOM, que puede no ser siempre adecuado para todos los casos de uso. En algunas situaciones, usar polyfill para slots puede ser una solución. A continuación, exploraremos el manejo de eventos en componentes web. El manejador de eventos se registra bajo C event handler, y vincula una función onclick a un botón.

Entonces estamos registrando esto bajo cslots, claro, lo que devuelve un div con un montón de slots aquí. Le pasamos un h1 con un slot de header, que reemplaza esta parte aquí. Tenemos un párrafo que iría al slot predeterminado. Y tenemos un h2 nombrado, que baja al slot llamado footer. Así que bien, si echamos un vistazo a esto rápidamente. Vamos a ver, inspeccionar elemento, y tenemos header. Está haciendo referencia a este elemento aquí. Y este hace referencia al párrafo aquí, así que estamos haciendo lo correcto, y este hace referencia a este elemento aquí.

Ahora esto es, tenemos atajos para esto para que sepamos que estamos haciendo las cosas bien en las DevTools. Y si añadimos algo más aquí, digamos que añadimos un div aquí con, no sé, adiós mundo, un poco oscuro pero seguro, funciona. Podemos ver como esta cosa dentro del shadow root y aquí va, adiós mundo, ¿verdad? Así que está en el slot predeterminado de nuevo. Así que todo funciona, ¿verdad? Tenemos algunos slots, funciona. Sin embargo, tenemos una advertencia. La única forma en que esto funciona de manera confiable es usando el shadow DOM. Eso no siempre es conveniente porque el shadow DOM encapsula, estilos encapsulan un montón de otras cosas del mundo exterior. Y eso no siempre es apropiado para lo que podemos estar tratando de construir. Por ejemplo, en SuperTokens esto realmente no funcionó para nosotros, así que estamos usando polyfill para slots, pero eso no está tan mal, así que supongo que termina bien.

Como dije, esto es un compromiso. Para nuestro próximo ejemplo, vamos a echar un vistazo al manejo de eventos. Así que nuestro manejador de eventos debería estar aquí y estamos tratando de no usar el shadow DOM aquí, solo para cambiar las cosas. Y estamos registrando esto bajo C event handler para enfatizar cómo esta cosa maneja eventos. Y simplemente estamos devolviendo el botón simple que hace lo siguiente. Vincula esta función onclick, que registra onclick y nos muestra una alerta si no tenemos un element. handleClick. Ahora hay una diferencia importante con el ejemplo anterior. Estamos accediendo a otro argumento aquí, otro argumento de entrada aquí llamado element. Lo estamos desestructurando. Lo que element es, es una referencia al nodo DOM real en el que se renderiza este elemento personalizado. Ahora, cómo se ve eso en la práctica es algo como esto.

7. Anulación del Comportamiento del Manejador de Eventos y Ejemplo Completo

Short description:

Para anular el comportamiento predeterminado de un componente manejador de eventos, podemos pasar una función handleClick como propiedad. Esta función se ejecutará cuando se haga clic en el componente. El ejemplo final demuestra un componente web completo con CSS y otras características, sin usar el shadow DOM. Puede integrarse en un proyecto de React construyendo el módulo y copiando los archivos resultantes. Luego se puede configurar un proyecto básico de Vite React para mostrar la integración.

Eso significa que el comportamiento predeterminado se activará desde aquí. Y si hacemos clic en la cosa aquí, dice que soy una alerta de respaldo. Lo que significa que no le pasamos ningún dato ni ninguna forma de anular el comportamiento de este componente manejador de eventos aquí.

Ahora, la forma en que podemos anular su comportamiento es algo así. Así que claro, está bien, veamos hasta dónde llegamos con copilot aquí. Así que tiene como un handleClick, de acuerdo. Así que, está bien, entiende correctamente lo que estoy tratando de hacer. Incluso como por cualquier medida, como esta pila y enfoque es un poco exótico, pero kudos a cursor supongo. Así que estamos seleccionando el elemento C event handler desde aquí. Le estamos pasando esta propiedad handleClick y estamos haciendo, estamos asignando una función a esta propiedad handleClick. Y si echamos un vistazo al archivo del manejador de eventos aquí, estamos esperando exactamente eso. Como estamos verificando si este elemento, el nodo DOM exacto que estamos esperando desde aquí tiene y si tiene una propiedad handleClick, la estamos ejecutando. Claro, esto es un poco como, esto es cualquier cosa, por supuesto, así que no tiene un tipo, lo que sea, pero oye, funciona. Estamos experimentando aquí. No estamos tratando de complacer a typescript. Así que si hacemos el clic aquí, va a anular el comportamiento predeterminado y va a decir que estoy en alerta desde el padre. Ahora, si te gustan las señales, por ejemplo, puedes hacer algo como, ya sabes, pasar la señal al exterior, hacer que inyecte cosas dentro del componente y así sucesivamente, pero eso va a tomar un poco de tiempo para mostrarlo adecuadamente y vamos a continuar con la demostración.

Nuestro ejemplo final aquí es básicamente un ejemplo completo. Hace todo. Tiene CSS, tiene un montón de otras cosas. No usa el shadow DOM, porque como, quiero complicar mi vida, no sé. Y vamos a probarlo. Veamos cómo como ccounter, si lo referencias aquí, dice ccounter, c-counter, ¿lo descomenté?, sí lo hice, y echemos un vistazo a cómo se ve eso. Sí, tenemos un contador completo aquí, que ya sabes, solo suma el conteo. Pero aquí está lo interesante aquí. No es realmente un elemento sólido en este punto, es un componente web completo. Así que la forma en que podemos usar esto, todo lo que producimos aquí dentro del proyecto de React, afortunadamente tengo algo así ya configurado, podemos simplemente hacer un npm run build desde aquí, y como va a construir como estos dos archivos, que podemos encontrar en dist. Tenemos una variante ES de ese módulo y un UMD, voy a copiar ambos. No es que necesitemos ambos, pero ya sabes, puedes.

8. Rewriting Components and React Integration

Short description:

Vamos a reescribir los componentes usando la última versión. Dentro de la carpeta demos, importamos el archivo Solid Web Components.es. Podemos probar el componente C.basic, que muestra 'Hello World!' cuando se ejecuta. React puede entender los Web Components, lo que nos permite integrar el ejemplo completo de C.counter en un proyecto de React. Además, podemos usar C.props para pasar propiedades personalizadas, como 'MyMessage' con el valor 'Hello from the other side'. Esta integración permite que React active funcionalidades dentro de los Web Components.

Tengo estos en componentes, vamos a reescribirlos con la última versión de lo que acabo de construir. Y echemos un vistazo a lo que realmente tenemos allí. Así que vamos directamente a demos. Y dentro de demos, tenemos lo que podrías esperar de un andamiaje de Vite. Y revisemos lo que tenemos dentro de app.tsx. Ahora, solo para que conste, TypeScript se va a quejar. Lo hará. No tenemos ningún tipo. Hay formas de introducir tipos, pero bueno, solo estamos tratando de mostrar algo aquí. Primero eliminemos estas cosas de aquí arriba.

Estamos importando Solid Web Components.es, que es este archivo de aquí. Es un archivo Javascript, pero no importa, va a funcionar. Y primero intentemos C.basic. Y esto también va a ser un C.basic cerrado. Para que esto funcione, tendremos que hacer demos. Y vamos a la demo de React, y vamos a hacer un npm run dev. Y nuevamente, en localhost 5173, obtenemos un Hello World! ¿Es eso lo que estamos buscando? Vamos a comprobarlo. Echemos un vistazo a través de inspeccionar elemento. ¡Sí! Este es nuestro componente C.basic.

Así que, está bien, como React entiende los Web Components. Genial para nosotros. Así que, lo que podemos hacer a continuación aquí es, probemos el ejemplo completo, como digamos C, queremos hacer un C.counter aquí. Porque ya lo teníamos registrado en el archivo principal, lo que significa que ya ha sido registrado en el DOM. Y sí, tenemos un Web Component completo producido desde solid hacia un proyecto de React. Ahora, si queremos hacer algo como, digamos, no sé, probemos C.props. Para que podamos hacer algo extraño. Prueba C.props y digamos que vamos con MyMessage igual a Hello from the other side. Probablemente va a mostrar el Hello from the other side. Pero aquí está la parte interesante. Podemos hacer algo como esto, que se activará desde React.

9. Web Components: Use Cases and Takeaways

Short description:

Los Web Components se pueden usar para combinar funcionalidad dentro y fuera del componente, permitiendo mezclar y combinar según los casos de uso. No son una solución mágica y pueden ofrecer una experiencia de desarrollador incómoda, pero son excelentes para ciertos casos de uso, especialmente cuando se produce algo que se puede importar en cualquier lugar. Los Web Components son solo una herramienta para resolver problemas específicos y pueden ser reemplazados por frameworks como Solid, Preact, Lit, o incluso React a partir de la versión 19. Son particularmente útiles para sistemas de diseño, como Shoelace, que se pueden usar en varios contextos, desde páginas HTML estáticas hasta Next.js.

No va a funcionar dentro del componente, pero va a funcionar desde fuera de él. Y aquí tenemos la alerta de clic. Esto, a su vez, tiene el agradable efecto secundario de permitirnos combinar partes de lo que queremos ejecutar dentro del Web Component, es decir, compilado desde Solid Land, y lo que podríamos querer ejecutar completamente dentro de nuestro código de framework. Así que puedes mezclar y combinar dependiendo de tu caso de uso.

Finalmente, algunas conclusiones. Los Web Components son geniales, diría yo, para algunos casos de uso. No son una solución mágica. Como habrás visto, la experiencia del desarrollador se vuelve un poco incómoda. Ciertamente no escribiría un proyecto completo con Web Components. Simplemente usaría algo como, no sé, SolidJS por ejemplo. Pero son geniales para algunos casos de uso. Especialmente cuando intentas producir algo que puedas importar en cualquier lugar. Ya hay un par de esos casos de uso que podríamos argumentar que son excelentes, pero veremos algunos de esos en la siguiente diapositiva. No son una solución mágica. Ni de lejos. No importa lo que la gente pueda decir. No son malos, no son lo mejor de lo mejor. Son solo una herramienta que se puede usar para resolver problemas que son apropiados para ese tipo de herramienta. Si te encanta la idea, porque me encanta la idea de los Web Components, pero no soy realmente un gran fan de las APIs, simplemente usa Solid, usa Preact, usa Lit. Incluso puedes usar React a partir de la versión 19. Así que estás bien, puedes producir cosas en una experiencia de desarrollador con la que estés familiarizado y cómodo.

Está bien, bien. Podría ser así. Pero, ¿para qué son realmente buenos los Web Components? Así que aquí hay algunos casos de uso que creo que son un ajuste perfecto para cosas como los Web Components. Uno, el más obvio, sistemas de diseño. Como Shoelace hace un gran trabajo con esto. Puedes usar Shoelace literalmente en cualquier lugar. Ya sea como una página HTML estática o algo como Next.js, puedes usarlo. Está bien, va a funcionar. Puede que no encaje perfectamente en todos los casos, pero funcionará.

10. Web Components: Additional Use Cases

Short description:

Web Components son una buena opción para proyectos como SuperTokens que buscan apoyar a una amplia audiencia en el desarrollo web, incluidos los desarrolladores de React que prefieren Solid Element. También son útiles para widgets y embebibles, proporcionando un proceso de integración más simple y limpio. Además, los web components son adecuados para componentes hoja que requieren funcionalidad específica sin necesidad de envolver nada.

Y si estás tratando de resolver un problema así, ese es un buen caso para ello. Proyectos como SuperTokens, que buscan atender a la audiencia más amplia posible en el desarrollo web. Queremos apoyar a todos, queremos ayudar a todos a construir su autenticación de la manera más fácil posible. Así que es una gran opción para nosotros. Tenemos un montón de desarrolladores de React a bordo y puede que no les guste escribir cosas en clases usando las APIs ya disponibles, pero podemos rectificar eso dándoles algo como Solid Element. Así que todos están contentos al final.

Son buenos para widgets y embebibles. Si solo quieres integrar un globo de diálogo o algo así, en lugar de pasar por todo ese incómodo proceso de incluir un script y luego incluir un script de inicio, seleccionando un nodo DOM y ejecutando algunas funciones extrañas y cosas así, en su lugar tal vez podrías simplemente usar un script y usar un componente personalizado en algún lugar del árbol DOM y simplemente va a funcionar. Suena un poco mejor y más limpio, ¿no?

Solo para componentes hoja. Los componentes hoja son un caso interesante. Los componentes hoja son literalmente lo último que se renderiza dentro del árbol. Para cosas que tienen una funcionalidad muy específica que no necesitan envolver nada, los web components son buenos para eso también. Gracias y disfruta de la conferencia.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Lo Bueno, Lo Malo, y Los Componentes Web
JSNation 2023JSNation 2023
29 min
Lo Bueno, Lo Malo, y Los Componentes Web
Top Content
Web Components are a piece of reusable UI enabled by web standards and built into the web platform. They offer the potential for faster component initialization and less library overhead. Web Components can be created from scratch and utilized with existing component libraries. Shadow DOM and Declarative Shadow DOM provide benefits such as scoped CSS and server-rendered components. The tradeoff between not repeating oneself and achieving full server-side rendering support is discussed. User experience is deemed more important than developer experience.
Es hora de desfragmentar la web
React Day Berlin 2022React Day Berlin 2022
34 min
Es hora de desfragmentar la web
Top Content
Today's Talk introduces Mitosis, an open source project that solves the problem of building framework agnostic components. It supports JSX and Svelte syntax and outputs human-readable code for various web frameworks. Mitosis is already being used by enterprise customers and can be easily integrated with React, Svelte, and other frameworks. It saves time, allows for easy handling of framework version migrations, and enables efficient unit and integration testing.
Autoría de HTML en un Mundo JavaScript
React Summit US 2023React Summit US 2023
21 min
Autoría de HTML en un Mundo JavaScript
This Talk by Tony Alicia focuses on authoring HTML in a JavaScript world. The speaker challenges developers to change their approach to building React components by starting with HTML first. By authoring HTML in a semantic way, readability and maintainability can be improved. Well-authored HTML provides better understanding of content and improves accessibility. It also has performance benefits by reducing DOM size. Investing time in HTML can save time and make applications more future-proof.
Componentes Web, Lit y Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Componentes Web, Lit y Santa 🎅
Web Components and the Lit library are introduced, highlighting their ability to create custom elements and replicate built-in components with different functionality. The use of semantic HTML and the benefits of web components in development are emphasized. The features of Lit, such as data binding and rendering, are discussed. The Santa Tracker is showcased as an example of web components being used in educational games. The compatibility of web components with other frameworks and their versatility in creating small widgets or large applications are highlighted.
¿Cómo el Shadow DOM te tiene cubierto?
React Day Berlin 2023React Day Berlin 2023
18 min
¿Cómo el Shadow DOM te tiene cubierto?
The Shadow DOM allows for encapsulation and composability, enabling elements to have their own features without affecting the rest of the webpage. Custom elements in the Shadow DOM have their own behavior through encapsulation and scoped styles. Composability is key in software development, allowing for dynamic data passing. The Shadow DOM provides a way to modify the appearance of elements within it, but some properties are marked as important and cannot be changed. Building a Chrome extension using the Shadow DOM allows for composable and encapsulated experiences.
Aplicaciones Web Inmutables
JSNation 2022JSNation 2022
20 min
Aplicaciones Web Inmutables
Today's Talk discusses immutable web apps and their benefits, such as faster loading times and easy version tracking. The use of Universal Module Definition (UMD) style bundling allows for flexible dependency management and gradual upgrades. Tools like Webpack and Rollup provide ways to reference UMDs in bundles and automate dependency configuration. Arborist and YAML files help resolve dependency trees and handle conflicts, while the Orchard CLI tool automates dependency ordering. Internal and external dependencies can be initialized and managed effectively for optimal performance.

Workshops on related topic

Despliega una aplicación de componentes web y configura un flujo de integración continua
DevOps.js Conf 2022DevOps.js Conf 2022
111 min
Despliega una aplicación de componentes web y configura un flujo de integración continua
Workshop
Philippe Ozil
Philippe Ozil
Únete a nosotros en un masterclass en el que desplegarás una aplicación Node.js simple construida con componentes web y configurarás un flujo de integración continua (CI). Aprenderás sobre el poder del Lightning Web Runtime (LWR) y las GitHub Actions.
Componentes Web en Acción
JSNation Live 2021JSNation Live 2021
184 min
Componentes Web en Acción
Workshop
Joren Broekema
Alex Korzhikov
2 authors
El masterclass amplía el conocimiento del lenguaje de programación JavaScript, revisa los patrones generales de diseño de software. Se centra en los estándares y tecnologías de los Componentes Web, como Lit-HTML y Lit-Element. También practicamos la escritura de Componentes Web tanto con JavaScript nativo como con Lit-Element. Al final, revisamos las herramientas clave para desarrollar una aplicación: open-wc.