⏱️ Lectura: 7 min
Mientras React, Next.js y Svelte dominan las conversaciones de frontend, un proyecto comunitario patrocinado por Google mantiene viva una idea distinta: escribir código web moderno sin frameworks pesados, apoyándose solo en los estándares del navegador. Se llama Modern Web, vive en modern-web.dev, y su impacto en el ecosistema de 2026 es más grande de lo que parece a primera vista.
📑 En este artículo
En esta guía te explico qué es Modern Web, qué herramientas ofrece, cómo instalarlo en Windows, macOS y Linux, y qué impacto real tiene hoy en autores de librerías, equipos de producto y el ecosistema frontend en general.
Qué es Modern Web y de dónde viene
Modern Web es una colección de herramientas, guías y librerías mantenida por la comunidad con patrocinio de peso: Google (a través del Chrome Web Framework & Tools Performance Fund) y Divriots son los sponsors principales, junto con cientos de contribuyentes individuales vía Open Collective.
El proyecto nació de la frustración de varios autores de librerías con el build-tooling churn — el ciclo interminable de Webpack → Rollup → esbuild → Vite → Turbopack — y de la necesidad de código que sobreviva más de dos años sin reescrituras mayores. Su apuesta es clara: los estándares del navegador no se rompen, los frameworks sí.
Los tres principios
- Estándares web — ES modules nativos, Web Components, Import Maps, Constructable Stylesheets. Nada propietario.
- Ligereza — cero build steps obligatorios en desarrollo. El código que escribís es prácticamente el código que corre el navegador.
- Baja complejidad — sin capas mágicas, sin transpilación innecesaria, sin ecosistemas de plugins que cambian cada 18 meses.
Las herramientas principales
@web/dev-server
Servidor de desarrollo con hot-reload que sirve ES modules nativos sin bundling. Soporta resolución de módulos de Node, hot-reload con preservación de estado, y plugins cuando hacen falta (TypeScript, Babel, JSX).
@web/test-runner
Test runner que corre tus pruebas en navegadores reales — Chromium, Firefox, WebKit vía Playwright — no en jsdom. Esto importa: jsdom miente en detalles de layout, web components y APIs modernas.
@web/rollup-plugin-html
Plugin de Rollup para builds de producción a partir del HTML. Analiza tu HTML, encuentra los scripts, y produce un bundle optimizado.
Open WC
Proyecto hermano con recomendaciones, generadores de proyecto y herramientas específicas para Web Components.
Instalación en Windows, macOS y Linux
Todas las herramientas se instalan vía npm. Lo único que cambia es cómo instalás Node.js si todavía no lo tenés.
Windows (PowerShell con winget)
winget install OpenJS.NodeJS.LTSmacOS (Homebrew)
brew install nodeLinux
# Ubuntu / Debian
sudo apt install nodejs npm
# Arch
sudo pacman -S nodejs npm
# Fedora
sudo dnf install nodejs npmVerificá con node --version (debe ser 20 o superior).
Crear un proyecto con Open WC
Estos comandos funcionan idénticos en los tres SO:
# Generador interactivo
npm init @open-wc
# O manual: solo dev-server
mkdir mi-proyecto && cd mi-proyecto
npm init -y
npm install --save-dev @web/dev-server
npx web-dev-server --node-resolve --watch --openEjemplo práctico: un Web Component sin build
Este componente usa únicamente APIs nativas del navegador (createElement, textContent, attachShadow), sin innerHTML ni dependencias externas:
// 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);Y el HTML mínimo:
<!DOCTYPE html>
<html>
<body>
<contador-simple></contador-simple>
<script type="module" src="./contador.js"></script>
</body>
</html>Sin React, sin JSX, sin build. El navegador entiende todo directamente.
El impacto real en los desarrolladores
Donde sí tiene impacto fuerte
Autores de librerías UI y Web Components. Es el stack de facto para publicar componentes reutilizables. Empresas como Adobe (Spectrum Web Components), SAP (UI5 Web Components), Red Hat, ING y Microsoft (FAST) lo usan en producción. Cuando necesitás que tus componentes funcionen en React, Vue, Angular y vanilla al mismo tiempo, Web Components + Modern Web es la ruta menos dolorosa.
Equipos cansados del churn de frameworks. Devs que ya pasaron por el ciclo jQuery → Angular.js → React → Next.js → Remix buscan refugio en los estándares. Código escrito contra la plataforma en 2015 todavía funciona hoy; pocos frameworks pueden decir lo mismo.
Micro-frontends y design systems corporativos. Este es quizás el mayor crecimiento de 2023-2026. Grandes empresas con múltiples equipos y stacks internos usan Web Components para compartir UI consistente sin forzar un framework único.
Donde el impacto es limitado
Apps de producto full-stack. Modern Web no compite con Next.js, Remix o SvelteKit. No tiene SSR de primera clase, no tiene routing opinado, no tiene la DX integrada de Vite. Si construís un SaaS con renderizado servidor y optimizaciones de carga agresivas, probablemente no es tu herramienta.
Ecosistema de plugins. Muchísimo más chico que Vite o Webpack. Para integraciones exóticas vas a encontrar menos soporte comunitario.
Por qué Chrome lo patrocina
Google no financia Modern Web por altruismo. El proyecto empuja adopción de features nativos del navegador — ES modules, Import Maps, Web Components, Constructable Stylesheets — que Chrome implementa y quiere ver usados. Cada desarrollador que escribe código contra la plataforma en vez de contra un framework de abstracción es un usuario más que aprovecha las features nativas de Chromium. Es una relación simbiótica: la comunidad gana herramientas mantenidas, Google gana adopción de estándares.
📖 Resumen en Telegram: Ver resumen
Preguntas frecuentes
¿Modern Web reemplaza a Vite?
No necesariamente. Vite es un meta-framework que integra dev server, HMR, bundling y plugins para múltiples frameworks. Modern Web es más minimalista y está optimizado para Web Components y código vanilla. Para apps de producto, Vite suele ganar en DX; para librerías, Modern Web suele ganar en simplicidad y longevidad.
¿Puedo usar TypeScript con Modern Web?
Sí, @web/dev-server-esbuild o @web/dev-server-swc agregan transpilación TypeScript on-the-fly. No es tan plug-and-play como en Vite, pero funciona bien en proyectos medianos.
¿Funciona con React o Vue?
Podés usar @web/dev-server como servidor para cualquier cosa que sirva ES modules. Pero las herramientas de Modern Web están pensadas alrededor de Web Components y vanilla JS. Si usás React, Vite o Next serán mejores opciones.
¿Qué tan maduro está el proyecto?
Muy maduro. Existe desde 2019, tiene versiones estables desde 2020, y está en producción en empresas grandes. El ritmo de releases es pausado pero constante — coherente con la filosofía de «código que dura».
¿Hay comunidad activa en 2026?
Sí. Discord activo, repositorios con releases regulares, y conferencias específicas de Web Components donde el stack es mencionado constantemente. No es hype como React, pero es un pilar silencioso del ecosistema frontend.
Referencias
- Sitio oficial de Modern Web — guías, docs y documentación completa de todas las herramientas.
- Documentación de @web/dev-server — guía de uso del servidor de desarrollo con ES modules nativos.
- Documentación de @web/test-runner — referencia de tests en navegadores reales.
- Open WC — proyecto hermano con recomendaciones y generadores para Web Components.
- Modern Web en Open Collective — patrocinadores, contribuyentes y gastos públicos del proyecto.
📱 ¿Te gusta este contenido? Únete a nuestro canal de Telegram @programacion donde publicamos a diario lo más relevante de tecnología, IA y desarrollo. Resúmenes rápidos, contenido fresco todos los días.
0 comentarios