La URL es una base de datos que ya tienes
Diorama, nuestra nueva habitación del Lab, corre en GitHub Pages. Alojamiento estático, sin backend, sin base de datos. Y aun así puedes montar una habitación y enviarle a alguien un enlace que abre tu habitación exacta — sin cuenta, sin servidor, sin registro guardado en ningún sitio. El truco es viejo y poco usado: poner todo el estado en la URL.
El hash es almacenamiento gratis
Todo lo que viene después del # en una URL — el fragmento — nunca viaja al servidor. Vive enteramente en el navegador. Eso lo convierte en el lugar perfecto para guardar estado de la aplicación que quieres que viaje con un enlace pero nunca se persista en el servidor.
El estado de Diorama es pequeño y estructurado: una lista de muebles (tipo, posición, rotación, color) y los ajustes de la habitación (paredes, suelo, alfombra, lámparas). Lo serializamos a JSON, lo codificamos en base64 y lo ponemos en el hash — #s=eyJsYXlvdXQ…. Al cargar, si ese parámetro está presente, lo decodificamos y reconstruimos la habitación antes que nada. Un enlace compartido gana al local storage; el local storage gana a la habitación por defecto.
const encode = p => btoa(unescape(encodeURIComponent(JSON.stringify(p))));
const url = location.origin + location.pathname + '#s=' + encodeURIComponent(encode(state));
Ese es el "backend" entero. Copia la cadena, pega el enlace, y el navegador de quien lo recibe reconstruye la escena de forma determinista — los mismos datos siempre producen la misma habitación.
¿Por qué no usar un servidor?
Porque para muchas cosas no hace falta, y cada servidor que añades es algo que alojar, asegurar, respaldar y pagar. Si el estado es pequeño, estructurado y solo tiene sentido para quien lo creó, la URL es una base de datos que ya tienes — distribuida globalmente, gratis y sin necesidad de autenticación.
Dónde deja de funcionar
El patrón tiene límites honestos, y fingir lo contrario es como la gente se quema:
- Longitud. En la práctica, las URLs llegan al límite alrededor de los 2000 caracteres antes de que algún cliente falle. Bien para una habitación; inútil para un documento. El estado grande necesita almacenamiento de verdad.
- Sin fuente única de verdad. Cada enlace es una foto congelada. No hay "última versión", ni colaboración, ni analíticas sobre lo que la gente creó. Una ventaja para un juguete; un impedimento para un producto.
- Versionado. En el momento en que tu esquema cambia, los enlaces antiguos tienen que seguir decodificando — así que etiqueta el payload con una versión y mantén el decodificador retrocompatible, o acepta que los enlaces antiguos se rompen.
- Es público. Todo lo que está en una URL puede registrarse, compartirse y cachearse. Nunca pongas nada privado ahí.
La otra mitad: una imagen
Un enlace reconstruye la escena interactiva, pero la gente también solo quiere una imagen para publicar. Así que Diorama tiene un segundo camino de compartición: renderizar el fotograma actual a un PNG con canvas.toDataURL() (con preserveDrawingBuffer activado) y disparar una descarga. Un enlace para "ven a jugar con la mía", una imagen para "mira lo que hice". Entre los dos, no hay servidor alguno.
Juega con él en el Diorama en vivo, o lee el código en GitHub.