Modern Web: el stack sin frameworks que importa en 2026

Mientras React, Next.js y Svelte dominan las conversaciones, un proyecto comunitario patrocinado por Google mantiene viva una idea distinta: escribir código web moderno sin frameworks pesados, apoyándote solo en los estándares del navegador. Se llama Modern Web, y su impacto en el ecosistema de 2026 es más grande de lo que parece.

Qué es Modern Web

Modern Web es una colección de herramientas, guías y librerías mantenida por la comunidad con patrocinio de Google (Chrome Web Framework Fund) y Divriots. Se apoya en tres principios simples:

• Estándares web — usar lo que el navegador ya entiende: ES modules, Web Components, Import Maps.
• Ligereza — cero build steps obligatorios. El código que escribís es el que corre.
• Baja complejidad — sin capas mágicas, sin transpilación innecesaria, sin ecosistemas que cambian cada 18 meses.

Herramientas principales

• @web/dev-server — servidor de desarrollo con hot-reload que usa ES modules nativos. Sin bundling en dev.
• @web/test-runner — corre tus tests en navegadores reales (Chromium, Firefox, WebKit), no en jsdom.
• @web/rollup-plugin-html — build de producción con Rollup a partir del HTML.
• Open WC — recomendaciones y generadores para construir Web Components.

Prerequisito: instalar Node.js

Windows (winget):

winget install OpenJS.NodeJS.LTS

macOS (Homebrew):

brew install node

Linux:

# Ubuntu/Debian
sudo apt install nodejs npm
# Arch
sudo pacman -S nodejs npm
# Fedora
sudo dnf install nodejs npm

Crear un proyecto

# Generador interactivo (Windows / macOS / Linux)
npm init @open-wc

# O agregar dev-server manualmente
npm install --save-dev @web/dev-server
npx web-dev-server --node-resolve --watch --open

Ejemplo: Web Component sin build

// contador.js - sin build, sin framework, sin innerHTML
class ContadorSimple extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const style = document.createElement('style');
    style.textContent = 'button { padding: 0.5rem 1rem; font-size: 1rem; }';
    this.shadowRoot.appendChild(style);

    this.btn = document.createElement('button');
    this.btn.addEventListener('click', () => {
      this.count++;
      this.render();
    });
    this.shadowRoot.appendChild(this.btn);
    this.render();
  }

  render() {
    this.btn.textContent = `Clicks: ${this.count}`;
  }
}

customElements.define('contador-simple', ContadorSimple);

Lo usás en HTML con <contador-simple></contador-simple>. Sin React, sin JSX, sin build. El navegador lo entiende directo.

Impacto real en los desarrolladores

Autores de librerías y design systems — es el stack de facto. Adobe (Spectrum), SAP (UI5), Red Hat, ING y Microsoft (FAST) lo usan en producción para componentes que deben funcionar en cualquier framework.

Equipos cansados del framework churn — quienes quieren código con vida útil de 5-10 años lo adoptan porque los estándares del navegador no se rompen entre versiones.

Apps de producto — acá el impacto es menor. No compite con Next.js o Remix en DX integrada, SSR ni routing opinado.

Por qué importa en 2026

Modern Web no va a reemplazar a Vite o Next. Su valor es otro: mantiene viva la idea de que la plataforma web, sola, es una opción viable para cierto tipo de software. Chrome lo patrocina porque empujar ES modules, Import Maps y Web Components beneficia directamente al navegador. Los autores de librerías lo adoptan porque ningún framework les da portabilidad real entre stacks.

Conclusión

Si construís apps de producto, Modern Web es algo para conocer, no necesariamente para adoptar. Si publicás librerías o mantenés un design system corporativo, es prácticamente indispensable. Entender cómo funciona el navegador sin capas intermedias te hace mejor desarrollador frontend, uses lo que uses después.

📖 Versión extendida con más detalle: https://elsolitario.org/modern-web-stack-sin-frameworks/