WebComponents es el nombre por el que se conoce a un conjunto de características relacionadas con HTML, CSS y Javascript, mediante las cuales podremos crear nuestras propias etiquetas HTML, sin que sea necesario utilizar herramientas externas, librerías o frameworks. A estos elementos reutilizables se les suele llamar componentes.
En contexto de desarrollo web, cuando hablamos de un componente nos referimos a un elemento que une marcado (HTML), estilo (CSS) y funcionalidad (Javascript) con una determinada finalidad: un componente para el buscador, un componente para el menú de navegación, un componente para mostrar la hora de un comentario, etc...
Veamos algunos detalles importantes alrededor de WebComponents:
Diferencias con los frameworks
Los WebComponents, aunque pueden ser similares, no están en la «misma categoría» que librerías o frameworks como React, Vue o Angular, ni compiten con ellos. Los WebComponents son una forma de construir componentes que está muy cerca de la plataforma web, del navegador, del lado del cliente.
Una buena forma de entender esto es tener claro que un WebComponent es extender el lenguaje HTML para crear una etiqueta HTML propia. Por otro lado, un framework Javascript simula una etiqueta HTML (para facilitar su uso), pero realmente esa etiqueta no existe en el navegador, en la web final. Sólo existe en el editor de código, durante el proceso de desarrollo.
Muchas personas no tienen claras las diferencias entre conceptos como frameworks y librerías, o confunden webcomponents con frameworks de Javascript. Aunque las diferencias en algunos casos pueden ser sutiles, o no ser demasiado importantes, hay que tener en cuenta que muchas de estas tecnologías o herramientas no se situan en el mismo plano, y actúan en lugares diferentes.
La siguiente pirámide muestra visualmente en que punto está cada una de estas herramientas, muchas de ellas muy populares en algunos círculos:
Empecemos desde abajo:
Tecnologías base: Son las tecnologías nativas del navegador, que funcionan directamente sin ningún añadido. Los WebComponents están en esta categoría, junto a HTML, CSS y Javascript, puesto que puedes crearlos sin necesidad de incluir nada más.
Librerías: Las librerías son pequeñas piezas de código que se centran en cosas muy particulares. Ejemplos de librerías son htmx, Lit, Preact o React, aunque este último la mayoría de las veces se utiliza con herramientas que lo convierten en un framework.
Frameworks: Los frameworks están por encima de las librerías, ya que no son más que estas, ampliadas con utilidades, herramientas y un conjunto de reglas y/o convenciones para utilizarse. Ejemplos de frameworks serían Vue, Angular o Svelte.
Metaframeworks: Se llama así a ciertos frameworks que están más orientados en guiar al desarrollador para tareas comunes que están por encima y no cubren los frameworks del apartado anterior. Cosas como SSG (Static Site Generation), SSR (Server Site Rendering), o caracerísticas enfocadas en SEO suelen ser algunas de las cosas que los caracterizan. Astro, Eleventy, NextJS o React Router se podrían considerar metaframeworks.
Cuando hablamos de WebComponents, nos referimos a la tecnología base, sin embargo, existen librerías como Lit que se enfocan en crear WebComponents de una forma más ágil, frameworks como Svelte que permiten convertir código a WebComponents, u otros frameworks (la mayoría) que permiten incorporarlos en su código y trabajar con ellos.
¿Por qué usar WebComponents?
Los WebComponents persiguen varios objetivos, entre los que se encuentran los siguientes:
🎈 Reutilización: A menudo, creamos elementos o partes que se repiten en nuestra web. Lo ideal es reutilizar ciertas partes de forma cómoda para no tener que hacerlas varias veces.
🛡️ Encapsulación: Los componentes debe estar aislados unos de otros. No queremos cambiar, por ejemplo, el estilo de un componente, y modificar otro accidentalmente. Queremos evitar colisiones de nombres de clases CSS que se llamen igual si no pertenecen al mismo componente.
🧠 Interoperabilidad: Debe ser fácil intercambiar información entre componentes diferentes, utilizando tecnologías abiertas y estándares, que aseguren que van a funcionar en cualquier dispositivo, independientemente de su tecnología, ya sea abierta o de empresas particulares con sus respectivas decisiones de negocio.
😀 Mantenibles: A medida que escribimos código en una web, la cantidad de líneas de código se hace mayor y cada vez es más complicado. Necesitamos una forma de poder enfocarnos en una característica concreta, usando HTML, CSS y Javascript.
Por estas (y muchas otras razones) es muy interesante utilizar WebComponents.
Mitos sobre WebComponents
Los WebComponents suelen tener a su alrededor varios mitos y leyendas que no son ciertos, pero que suelen viralizarse en ciertos sectores. Repasemos algunos de los principales.
- ❌ «No tienen buen soporte en navegadores»:
Aunque los WebComponents tuvieron una accidentada historia de arranque, como se puede ver, actualmente son compatibles en todos los navegadores de forma nativa desde 2020. No obstante, WebComponents es realmente un conjunto de características que pueden funcionar independientemente, con o sin WebComponents. Es por eso que lo que veremos va un poco más allá.
- ❌ «Sólo sirven para cosas muy pequeñas»
Los WebComponents se pueden utilizar tanto para desarrollar pequeños componentes como para crear grandes aplicaciones. Este mito se ha popularizado porque es cierto que trabajar con WebComponents requiere algo más de conocimientos, ya que trabajamos con tecnologías nativas a más bajo nivel que con un framework. Sin embargo, existen librerías de WebComponents como Lit o Atomico que nos permiten trabajar con WebComponents de forma muy similar a como lo hacemos con frameworks de Javascript.
- ❌ «Nadie usa WebComponents»
La mayoría de las críticas de este estilo provienen de desarrolladores que no conocen bien el ecosistema de WebComponents (o de las tecnologías nativas) y que son fanáticos de los frameworks. WebComponents se utiliza en un montón de sitios, por muchísimas empresas como GitHub, Youtube, Microsoft, Adobe, BBVA, ING, y tantas otras.
Generalmente, los utilizan empresas grandes, que quieren construir productos o servicios longevos en el tiempo, estables y que no tengan que reescribirse cada cierto tiempo debido a cambios en los frameworks o industria. Sin ir más lejos, la aplicación web de Photoshop está desarrollada en WebComponents.
