---
title: "Aplicaciones web sin servidor propio: ESM y CDN"
description: "Cómo los módulos ES, npm y las CDN permiten desplegar una aplicación de navegador pequeña sin infraestructura propia."
date: 2024-07-04
---
Una aplicación web pequeña ya no necesita siempre infraestructura
compleja. Los módulos ES y las CDN permiten ejecutar código directamente
en el navegador: se publica una página estática y las bibliotecas llegan
por red. Veámoslo con un ejemplo.
La [aplicación de
demostración](https://flancer64.github.io/demo-wa-esm-openai/#/) es un
chat que vive en el cliente, carga bibliotecas desde
[jsDelivr](https://www.jsdelivr.com/) y se comunica con una API externa.
Su `index.html` está en GitHub Pages.
Una vez publicado un paquete en [npm](https://www.npmjs.com/), el
navegador puede recibirlo mediante una CDN como jsDelivr o
[unpkg](https://unpkg.com/).
## De qué se compone el ejemplo
La interfaz utiliza Vue, Vue Router y Quasar. La navegación es mínima:
chat, configuración e información.
En la configuración se eligen modelo e instrucción de sistema. Una clave
secreta introducida en el navegador debe considerarse accesible desde
ese dispositivo y sus extensiones; para un producto real es preferible
un intermediario de servidor con credenciales limitadas, no entregar una
clave API permanente al cliente.
## `index.html`
El punto de entrada es muy compacto: enlaza estilos, fuentes, un
`importmap` y el módulo principal.
``` html
```
El `importmap` ofrece al navegador nombres de importación parecidos a
los de Node. El documento también carga recursos y monta la aplicación
en el elemento de la página.
## El paquete de la aplicación
[@flancer64/demo-wa-esm-openai](https://www.npmjs.com/package/@flancer64/demo-wa-esm-openai)
está compuesto por módulos ES. `Mod/` contiene modelos de acciones y
`Ui/`, componentes Vue.
En `App.mjs`, las versiones ESM de Vue y Vue Router se importan de forma
estática. La versión mostrada de Quasar era una biblioteca UMD, así que
antes de importarla dinámicamente recibe Vue por el objeto global:
``` js
import * as Vue from 'https://cdn.jsdelivr.net/npm/vue@3.4.31/dist/vue.esm-browser.prod.js';
window.Vue = Vue;
await import('https://cdn.jsdelivr.net/npm/quasar@2.16.4/dist/quasar.umd.prod.js');
const Quasar = window.Quasar;
```
Las rutas cargan componentes de forma diferida: el navegador descarga un
componente solo al visitar su pantalla.
``` js
const routes = [
{ path: '/', component: () => import('./Ui/Route/Chat.mjs') },
{ path: '/config', component: () => import('./Ui/Route/Config.mjs') },
];
```
## Lo que ve el navegador
La pestaña Sources revela que el alojamiento estático entrega únicamente
`index.html` y estilos; el paquete y las dependencias llegan desde la
CDN. Las rutas no visitadas no cargan sus componentes. Las fuentes e
imágenes también pueden estar en orígenes públicos, y la configuración
del usuario, en almacenamiento local.
## Conclusión
El stack actual permite crear y distribuir aplicaciones pequeñas sin
servidores virtuales propios: el código y las dependencias pueden
publicarse en servicios abiertos. Las CDN aportan buena velocidad y
caché en los siguientes arranques.
Los módulos se pueden descargar con la granularidad de la acción de la
persona usuaria, sin construir bundles específicos ni hacer tree-shaking
de antemano. La contraparte es una cadena de suministro abierta: aumenta
el riesgo de código malicioso o cambiado inesperadamente. Fije
versiones, evalúe la confianza en paquetes y CDN, use CSP y no guarde
secretos importantes en el cliente. Para una aplicación abierta y
pequeña este enfoque es práctico; con datos sensibles, los mismos
principios ESM se pueden usar desde infraestructura propia.