🇺🇦 Слава Україні! Consulta como ayudar a Ucrania y pide a tu gobierno que se movilice supportukrainenow.org.

Web Components

El qué y por qué de los componentes web

Web Components es la recomendación que se está integrando en los navegadores web modernos y que permite crear componentes reusables utilizando tecnologías nativas propias de la plataforma web para fabricar nuevas experiencias web.

Fecha de emisión:

Duración: 13:00

Ver en YouTube

Notas del episodio

Cuando hacemos aplicaciones web, con componentes complejos como botones que deban permitir a un usuario interactuar con la aplicación, u otros elementos que sirvan para fabricar experiencias interactivas, nos puede interesar crear esos componentes de manera reusable, para hacer facil modificar el código fuente de la aplicación web para mejorar su sostenibilidad a largo plazo, facilitando hacer cambios y evoluciones a las aplicaciones.

Las bibliotecas de componentes web, sean Web Components, o sean otras librerías ya hechas, permiten crear clases reusables que contienen la lógica y la presentación de estos componentes visuales. Estas piezas independientes luego pueden ser incorporadas en las aplicaciones web para utilizarlos tal cual a la hora de fabricar páginas más grandes.

Incluso en las páginas que no sean tal cual aplicaciones web, es posible usar los componentes web para beneficiarse de incorporar otros elementos reusables, como por ejemplo, botones de suscripción en un periódico, para poder abstraer y aislar la lógica en una unidad autocontenida que se pueda importar en las páginas donde los queramos emplear.

En definitiva, con un componente web podemos reutilizar todo lo posible los elementos visuales de una página web, aislándolos a bibliotecas separadas e importables que permitan hacer que los componentes evolucionen por su cuenta.

En cuanto a Web Components, es el estandar propuesto por la W3C como alternativa a otras bibliotecas ya existentes que se instalan por separado. Todos los navegadores web podrían dar soporte a Web Components e incorporar la API para crear y usar estos componentes en el propio navegador web, haciendo innecesario incrustar en nuestra aplicación web otras bibliotecas de componentes web de terceros, como React, Vue o Angular, algo que incrementa el tamaño de nuestros bundles, y por lo tanto, hace más pesadas las aplicaciones web y complicando en algunos casos su distribución.

Web Components tiene otra ventaja, y es ser un estandar neutro, no asociado a ningún proyecto grande. Otros proyectos de terceros pueden tener un roadmap asociado al de las corporaciones que lo desarrollan, como por ejemplo React y Facebook, o Polymer y Google. Esto no quiere decir que Web Components sea completamente neutro, ya que hoy día las decisiones de los estándares a implementar por los navegadores web las toman igualmente personas de estas grandes corporaciones.

En cuanto a Web Components, que es lo que vamos a estudiar en esta lista de reproducción, no se trata como tal de un estandar, sino de una colección de estándares:

  • Custom Elements, que va a permitir crear etiquetas HTML personalizadas, algo parecido a lo que se puede hacer hoy en día con React o Vue, agregandole atributos y elementos internos.
  • Shadow DOM será una librería que nos permitirá aislar de mejor forma el DOM y el diseño que usan nuestros custom elements para hacerlos verdaderamente reusables.
  • HTML Modules es una API que permite distribuir fácilmente los Custom Elements y los Shadow DOMs en paquetes autodistribuibles que podemos importar en nuestras aplicaciones.