Liberarse de los frameworks: por qué los web components son el futuro de los sistemas de diseño

Los sistemas de diseño se han convertido en el pilar de los proyectos modernos. Ofrecen una única fuente de verdad para decisiones de diseño, componentes y patrones reutilizables. Sin embargo, con el tiempo se cometió un error importante: crear estos sistemas dentro de un único framework.

Es como fabricar un cargador universal y luego soldarlo a un teléfono específico. Los componentes pierden su propósito principal, que es ser portables y funcionar en cualquier entorno.

La paradoja de los sistemas de diseño

La necesidad de sistemas de diseño surgió de forma natural. Los equipos buscaban coherencia, documentación clara y patrones reutilizables. Pero la forma de implementarlos contradecía esa visión original.

Al construir componentes dentro de React, Vue o Angular, se crea una falsa elección: usar el sistema de diseño solo si ya estás dentro de ese framework, o crear todo desde cero si no lo estás. Esto no es un sistema de diseño. Es una biblioteca específica de un framework con aspiraciones más amplias.

Los estándares web han evolucionado lo suficiente como para resolver este problema. Los web components, basados en custom elements y shadow DOM, permiten crear componentes que funcionan sin depender de ningún framework.

Por qué los web components ganan la carrera

Los web components no buscan ser tendencia. No ofrecen conferencias espectaculares. Pero resuelven un problema real con simplicidad.

Independientes del framework: Funcionan en React, Vue, Angular o Svelte. Con muy poca configuración, tus componentes pueden integrarse en cualquier proyecto.

Basados en estándares web: Al trabajar directamente con la plataforma, no hay capas de abstracción ni lógica específica de un framework. Solo HTML, CSS y JavaScript que seguirán siendo válidos dentro de cinco años.

Portabilidad real: Un botón no es un componente de React o Vue. Es un botón. Web components hacen que esto möglich sea en la práctica.

Un cambio de filosofía: menos es más

Crear sistemas de diseño independientes requiere un cambio de mentalidad. Hay que aceptar la simplicidad.

Nivel más bajo posible: En lugar de usar frameworks potenziell para los componentes, usar la infraestructura más ligera. Web components son simples por naturaleza. No necesitan la reactividad de React o los watchers de Vue. Solo deben cumplir su función.

Componentes simples: Un botón debe ser simple. Un modal debe ser simple. Un dropdown también. Cuando los componentes son demasiado inteligentes, suelen arrastrar lógica de negocio y opiniones del framework. El componente más simple es el más re