Más allá de los Frameworks: Confía en las Primitivas de la Web

Cada vez que añades una dependencia de framework, estás apostando a que esa librería durará más que tu proyecto. Mientras tanto, la plataforma web lanza características que los navegadores se comprometen a soportar para siempre. La brecha entre lo que proporcionan los frameworks y lo que ahora manejan las APIs nativas del navegador se ha reducido drásticamente.

Este artículo examina primitivas específicas de la plataforma web que reducen la dependencia de frameworks, y cómo evaluar su disponibilidad usando Baseline como tu guía.

Entendiendo las Características Web de Baseline

Antes de adoptar cualquier API nativa del navegador, necesitas una forma confiable de evaluar el soporte entre navegadores. Baseline proporciona exactamente esto. Una característica alcanza el estado “recién disponible” cuando se lanza en las últimas versiones estables de Chrome, Edge, Firefox y Safari. Después de un período sostenido de disponibilidad en esos navegadores (aproximadamente 30 meses), se vuelve “ampliamente disponible”.

Esto importa para las decisiones de mejora progresiva. Baseline te indica cuándo una característica es segura de usar como implementación principal versus cuándo debe permanecer como una experiencia mejorada con respaldo.

Puedes verificar el estado actual de soporte entre navegadores de cualquier característica web en el panel Web Platform Status en https://webstatus.dev, que rastrea la clasificación de Baseline y el soporte de navegadores en un solo lugar.

APIs Nativas del Navegador Reemplazando Patrones de Frameworks

La Popover API para Patrones de Modales y Tooltips

Los desarrolladores de React a menudo recurren a librerías como Radix o Headless UI para construir popovers accesibles. La Popover API, ahora una característica recién disponible de Baseline, maneja esto de forma nativa:

<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>
  <p>Menu content here</p>
</div>

El navegador gestiona el atrapamiento de foco, el comportamiento de cierre ligero y la renderización en la capa superior. No se requiere JavaScript para la funcionalidad básica. La detección de características es directa:

if ('popover' in HTMLElement.prototype) {
  // Use native popover
} else {
  // Fall back to framework solution
}

View Transitions para Animaciones de Página

Las aplicaciones de una sola página existen en parte porque la navegación multipágina se sentía brusca. La View Transitions API cambia esta ecuación al habilitar transiciones suaves entre estados del DOM:

document.startViewTransition(() => {
  updateDOMSomehow();
});

Para transiciones entre documentos, solo CSS puede activar las páginas:

@view-transition {
  navigation: auto;
}

La familia View Transitions ahora está recién disponible en Baseline para transiciones dentro del mismo documento. Los navegadores sin soporte simplemente omiten la animación.

La Navigation API para Enrutamiento del Lado del Cliente

Los routers de frameworks como React Router existen porque la History API era incómoda. La Navigation API proporciona un modelo más limpio para interceptar la navegación:

navigation.addEventListener('navigate', (event) => {
  event.intercept({
    handler() {
      return loadContent(event.destination.url);
    }
  });
});

La Navigation API ahora está recién disponible en Baseline, pero eso no significa que debas eliminar tu router mañana. Significa que puedes comenzar a evaluar dónde las primitivas de navegación nativas pueden simplificar tu stack, especialmente para experiencias más ligeras “tipo aplicación”.

Características Modernas de CSS Eliminando JavaScript

Anchor Positioning

Posicionar tooltips y dropdowns relativos a elementos disparadores tradicionalmente requería cálculos JavaScript. CSS Anchor Positioning maneja esto de forma declarativa:

.trigger {
  anchor-name: --trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(center);
}

Esta característica aún no está disponible en Baseline en todos los navegadores principales, así que úsala estrictamente como mejora progresiva con respaldos JavaScript donde sea necesario.

Container Queries y :has()

Las Container Queries están ampliamente disponibles y permiten que los componentes respondan al tamaño de su contenedor en lugar del viewport, eliminando mucha lógica de diseño frágil en JS.

El selector :has() está recién disponible y desbloquea patrones que anteriormente forzaban “conciencia del padre” basada en JS y reflexión de estado. Dado que aún no está ampliamente disponible, puede justificar precaución dependiendo de tu audiencia, pero ahora es una opción real sobre la cual construir con respaldos medidos.

Declarative Shadow DOM para SSR de Web Components

La renderización del lado del servidor de Web Components anteriormente requería gimnasia de hidratación. Declarative Shadow DOM resuelve esto:

<my-component>
  <template shadowrootmode="open">
    <style>/* scoped styles */</style>
    <slot></slot>
  </template>
</my-component>

El shadow DOM existe en la carga HTML inicial: no se necesita ejecución de JavaScript para el primer renderizado. Esto ahora está recién disponible y utilizable en navegadores modernos, pero las versiones antiguas de Safari en particular pueden requerir respaldos.

Mejora Progresiva como Arquitectura

El patrón aquí no es “abandonar los frameworks”. Es reconocer que las primitivas de la plataforma web ahora manejan problemas específicos que anteriormente requerían capas de abstracción.

La detección de características habilita este enfoque:

1. Verifica si la API nativa existe
2. Úsala cuando esté disponible
3. Recurre a soluciones de frameworks cuando no lo esté

Esto sigue los principios de mejora progresiva establecidos desde hace tiempo y reduce el tamaño del bundle para navegadores capaces mientras mantiene la funcionalidad en todas partes.

Conclusión

Audita tus dependencias de frameworks contra las características actuales de Baseline. La Popover API, View Transitions, las capacidades modernas de CSS y Declarative Shadow DOM abordan problemas reales que justificaban código de framework hace apenas dos años.

La plataforma web evoluciona lentamente pero permanentemente. Las características que alcanzan el estado de Baseline representan terreno estable. Construye sobre esa base y aumenta solo donde la plataforma genuinamente se queda corta.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.