Motor de sites de exemplo baseado em modelos
Um único Cloudflare Worker que gera um site completo para cada setor a partir de alguns parâmetros do URL — todas as demos desta biblioteca vêm dele.
Objetivo técnico
Produzir em menos de um segundo um conceito de site convincente e pronto para telemóvel, para qualquer tipo de pequeno negócio, sem um build por site, para que uma ideia de design possa ser mostrada como página funcional e não como mockup estático.
Restrições
- Zero infraestrutura por demo: uma única implementação tem de servir todos os setores.
- Rápido em telemóveis de gama média com 4G, porque é assim que a maioria das pessoas abre um link partilhado.
- Nenhum conteúdo externo guardado por negócio — tudo deriva de alguns parâmetros.
- Custo de funcionamento perto de zero num plano de alojamento gratuito.
Arquitetura
- 01
Parâmetros do URL
Chave do modelo, nome do negócio, cidade e detalhes opcionais.
- 02
Encaminhador de modelos
Regras de palavras-chave escolhem um dos 17 modelos de setor quando não é dada nenhuma chave.
- 03
Construtor do site
Funções de modelo montam HTML, CSS e pequenos scripts de interação.
- 04
Camadas de melhoria
Camadas partilhadas acrescentam o carrossel de apresentação, as ações fixas no telemóvel e nomes limpos.
- 05
Proxies na edge
Proxies de imagem e de vídeo licenciado com listas de permissões, limites de tamanho e cache.
- 06
Renderização isolada
A página é escrita num iframe srcdoc e servida com noindex.
O fluxo vai da esquerda para a direita, de cima para baixo.
Decisões principais
Modelos como funções, não ficheiros
Cada setor é uma função que devolve markup a partir de um objeto de dados. Acrescentar um setor significa acrescentar dados e uma função — sem novas rotas nem novos destinos de implementação.
Parâmetros em vez de base de dados
Uma demo é totalmente descrita pelo seu URL, por isso os links são reproduzíveis, ficam em cache e nunca dependem de dados pessoais guardados.
Encaminhamento por palavras-chave antes da IA
Os nomes dos negócios são comparados com regras de palavras-chave ordenadas. É determinístico, explicável e gratuito; um passo de IA pode ser acrescentado mais tarde para os casos ambíguos.
Proxies na edge com listas de permissões
O proxy de imagens só aceita conteúdos de imagem com menos de 8 MB e bloqueia endereços privados; o proxy de vídeo só serve uma lista explícita de IDs de clips licenciados.
Capturas
Desafios
Códigos de atividade partilhados
Os códigos oficiais de atividade são partilhados por ramos muito diferentes (um salão de unhas e um cabeleireiro podem ter o mesmo). As palavras-chave do nome revelaram-se um sinal muito melhor, com o código usado apenas como recurso.
O 3D procedural não parecia premium
Uma versão inicial construía salas 3D em código. Era tecnicamente interessante, mas parecia artificial. Vídeo licenciado real com movimento guiado pelo scroll substituiu-o — um lembrete de que a fidelidade vence a esperteza.
Lições aprendidas
- Uma demo que corre no browser é mais persuasiva do que qualquer mockup estático.
- Regras determinísticas com alternativas claras vencem um modelo opaco nas decisões de encaminhamento.
- Cada endpoint de proxy precisa de uma lista de permissões desde o primeiro dia.