10

Una introducción a los Web Components: ¿qué son y para qué sirven?

Algunas vez te haz preguntado: ¿por qué las librerías y frameworks son tan importantes para los frontend devs?, ¿por qué no solo usar HTML, CSS y JavaScript? Bien, pues la respuesta está en algo llamado componentes.
.
Los componentes se podrían definir como pequeños bloques visuales (y de código) que podremos reusar en todo nuestro website, y está genial ¿no? después de todo queremos darle un mejor mantenimiento a nuestro sitio tanto a corto como a largo plazo y para eso los componentes son ideales.
.
Sin embargo, hay un problema: estos frameworks y librerías que nos permiten usar componentes no están creados para colaborar entre si. Si estás usando React en tu proyecto no podrás usar Vue y viceversa. Es aquí donde llegan los Web Components…

¿Qué son los Web Components?

Los Web Components son un conjunto de APIs del navegador que permiten crear etiquetas HTML totalmente personalizadas, reutilizables y encapsuladas junto a CSS y JavaScript para utilizarlas en todos tus proyectos. Los Web Components serán tu propio estándar, no el de terceros.
.
El concepto y objetivo principal de los Web Components es similar al de frameworks como React o Vue. La idea es crear bloques visuales que agrupan todo el HTML, CSS y la lógica mediante JavaScript para la correcta renderización y funcionamiento del elemento.

¿Muy similar a React? ¿Entonces la diferencia es…?

Si, si, React también es genial… Pero la principal diferencia es que los Web Components son agnósticos a la tecnología que estés usando, pueden utilizarse con cualquier librería o framework de JavaScript que funcione con HTML o simplemente con JavaScript Vanilla. Esto es así porque los Web Components aprovechan los estándares web, es decir, solo debemos usar las Web APIs sin depender de alguna herramienta externa.
.
Además, al ser algo nativo del navegador nos ahorramos el proceso de compilación que realizan los frameworks o librerías. Así que punto para performance. 😎

¿Cómo funcionan?

Las Web APIs que aprovechan los Web Components son, principalmente:

  • Custom Elements: permite crear etiquetas HTML personalizadas*. Sí, por fin podrás tener tu propia etiqueta llamada <hola-mundo></hola-mundo>.
  • HTML Templates: permite crear plantillas HTML las cuales no se renderizan hasta que sea instanciado desde JavaScript.
  • Shadow DOM: permite para agregar elementos al DOM aislándolos del mismo. Esto evita posibles errores de sobre escritura en los estilos CSS.
  • ES Modules: permite reutilizar (importar / exportar) documentos JavaScript, es decir, nuestros componentes.

Una de las tareas que más vas a realizar con Web Components es crear etiquetas HTML totalmente personalizadas y dinámicas para luego renderizarlas independientemente. Estas etiquetas podrán tener su propia estructura, estilos y lógica.
.
*Hay una condición: todos los Custom Elements deben ser nombrados con guion, tal como se muestra en el ejemplo. Esto es para evitar conflictos con presentes y futuras etiquetas de HTML5

¿Y el soporte?

El soporte es una de las cosas por la cual menos te debes preocupar cuando trabajas con Web Components. Actualmente todos los navegadores más usados del mundo le brindan un gran soporte y apoyo a los Web Components. Puedes verlo por ti mismo:

Soporte de web components 2020

Fuente: https://www.webcomponents.org/
.
Y para los casos que no brindan soporte (Explorer, ejem, ejem, Explorer) se les puede añadir las funcionalidades mediante unos polyfills que brinda el mismo sitio de Web Components.

¿Quién los usa?

Actualmente algunas de las compañías que han empezado a implementar Web Components han sido:

  • Microsoft
  • Google
  • GitHub
  • YouTube
  • Netflix
  • IBM
  • Shopify

Y muchas más…

Conclusión

Los Web Components no son ni hacen parte de un stack. Todo lo contrario, son el mejor complemento para ellos.
.
Los Web Components nos permiten tener una mejor arquitectura frontend y por lo tanto una escalabilidad más avanzada en nuestro websites.
.
Los Web Components trabajan con Web APIs, esto nos brinda mayor performance ya que se ahorra tiempos de compilación.
.
Los Web Components son muy probablemente el futuro de la web. Y tú puedes ser parte de esa historia. Aprendamos a crearlos 🚀

Escribe tu comentario
+ 2