O URL é uma base de dados que já tens
O Diorama, o nosso novo quarto do Lab, corre no GitHub Pages. Alojamento estático, sem backend, sem base de dados. E ainda assim podes montar um quarto e enviar a alguém um link que abre o teu quarto exacto — sem conta, sem servidor, sem registo guardado em lado nenhum. O truque é antigo e pouco usado: pôr todo o estado no URL.
O hash é armazenamento gratuito
Tudo o que vem depois do # num URL — o fragmento — nunca viaja até ao servidor. Vive inteiramente no browser. Isso torna-o o sítio perfeito para guardar estado da aplicação que queres que viaje com um link mas nunca seja persistido no servidor.
O estado do Diorama é pequeno e estruturado: uma lista de mobília (tipo, posição, rotação, cor) e as definições do quarto (paredes, chão, tapete, candeeiros). Serializamos isso para JSON, codificamos em base64 e pomos no hash — #s=eyJsYXlvdXQ…. Ao carregar, se esse parâmetro existir, descodificamo-lo e reconstruímos o quarto antes de mais nada. Um link partilhado ganha ao local storage; o local storage ganha ao quarto por omissão.
const encode = p => btoa(unescape(encodeURIComponent(JSON.stringify(p))));
const url = location.origin + location.pathname + '#s=' + encodeURIComponent(encode(state));É este o "backend" inteiro. Copia a string, cola o link, e o browser de quem recebe reconstrói a cena de forma determinística — os mesmos dados produzem sempre o mesmo quarto.
Porquê não usar um servidor?
Porque para muitas coisas não é preciso, e cada servidor que acrescentas é algo para alojar, proteger, fazer backup e pagar. Se o estado é pequeno, estruturado e só faz sentido para quem o criou, o URL é uma base de dados que já tens — distribuída globalmente, grátis e sem necessidade de autenticação.
Onde deixa de funcionar
O padrão tem limites honestos, e fingir o contrário é como as pessoas se queimam:
- Comprimento. Na prática, os URLs chegam ao limite por volta dos 2000 caracteres antes de algum cliente falhar. Óptimo para um quarto; inútil para um documento. Estado grande precisa de armazenamento a sério.
- Sem fonte única de verdade. Cada link é uma fotografia congelada. Não há "versão mais recente", nem colaboração, nem analytics sobre o que as pessoas criaram. Uma vantagem para um brinquedo; um impedimento para um produto.
- Versionamento. No momento em que o teu esquema muda, os links antigos têm de continuar a descodificar — por isso marca o payload com uma versão e mantém o descodificador retrocompatível, ou aceita que os links antigos deixam de funcionar.
- É público. Tudo o que está num URL pode ser registado, partilhado e colocado em cache. Nunca ponhas nada privado ali.
A outra metade: uma imagem
Um link reconstrói a cena interactiva, mas as pessoas também só querem uma imagem para publicar. Por isso o Diorama tem um segundo caminho de partilha: renderizar o frame actual para um PNG com canvas.toDataURL() (com preserveDrawingBuffer activado) e despoletar um download. Um link para "vem brincar com o meu", uma imagem para "vê o que eu fiz". Entre os dois, não há servidor nenhum.
Brinca com ele no Diorama ao vivo, ou lê o código no GitHub.