- Hyperclay permite criar webapps em que toda a UI, lógica e dados são integrados em um único arquivo HTML
- É possível fazer edição imediata e compartilhamento em tempo real diretamente no próprio arquivo, controlando você mesmo a aparência, o comportamento e até a forma de edição do app
- Oferece uma estrutura de execução e salvamento imediatos sem processo separado de build e deploy, banco de dados ou backend complexo
- Com apenas um arquivo HTML, é possível executar o app em qualquer lugar, como no navegador, no servidor ou offline, e todas as alterações são versionadas e podem ser restauradas
- Foi projetado para reduzir a complexidade do desenvolvimento web moderno e permitir que qualquer pessoa crie facilmente apps interativos vivos em tempo real
Introdução: Hyperclay, webapps vivos feitos com um único arquivo HTML
- Hyperclay oferece aos programadores a experiência de criar webapps como se estivessem moldando um produto, usando um único arquivo HTML portátil e sem gerenciar infraestrutura complexa
- O objetivo é eliminar elementos antes considerados essenciais no desenvolvimento web, como arquivos de configuração, build, frameworks e pipelines de deploy, e chegar a uma estrutura completa com apenas um arquivo
Conceito central e vantagens
- O app é composto por um único arquivo HTML
- É possível editar o próprio arquivo em tempo real por meio de uma UI visual, e essas edições são salvas permanentemente como o estado do app
- UI, lógica e dados ficam todos incluídos dinamicamente em um único arquivo
- O usuário pode modificar o app na hora como se fosse um documento, e compartilhar ou baixar imediatamente as alterações para uso offline
- Como na analogia “Google Docs for interactive code”, há liberdade para compartilhar, editar e controlar a propriedade
Resumo dos principais recursos
- Manipulação direta: é possível editar enquanto o app está em execução. As mudanças são aplicadas imediatamente, sem compilação nem recarregamento
- What you see is what you build: ao modificar a UI ou editar diretamente o código-fonte, o app muda na mesma hora, sem camadas intermediárias
- Portabilidade real: o app pode ser exportado como arquivo HTML e executado da mesma forma em qualquer lugar (servidor ou offline). Todo salvamento recebe versionamento e pode ser restaurado
- Tudo isso funciona sem nenhuma tecnologia especial, apenas com um arquivo HTML padrão
Estrutura técnica
- Hyperclay é composto por um servidor NodeJS e uma biblioteca JS no lado do cliente
- Quando a própria página HTML modifica o DOM, ela envia o
document.body.outerHTML alterado ao servidor, e esse próprio arquivo HTML é atualizado
- Alterações dentro do app, como o atributo checked de um checkbox, são salvas permanentemente no código HTML, permitindo reproduzir o mesmo estado no próximo acesso
- Há suporte a controle de versão e controle de permissões de leitura/escrita
Exemplos práticos
- É possível criar e salvar em um único arquivo HTML apps como blogs editáveis diretamente, checklists de horas de trabalho e muito mais
- O estado do app é gravado diretamente no documento com o atributo
contenteditable ou no formato <input type="checkbox" persist>
Contexto e problema identificado
- Ao criar dezenas de sites todos os anos, surgiu a necessidade de que programar webapps fosse tão natural quanto escrever
- Sites estáticos tradicionais têm mudanças efêmeras (as ações do usuário não são salvas)
- Para implementar persistência de dados na web, normalmente é preciso um esforço excessivo com banco de dados, API, templates e sistema de contas
- Isso é ineficiente para protótipos, ferramentas simples, logs pessoais de desenvolvimento, blogs e outros casos em que se quer criar rápido, editar em tempo real e compartilhar
Como o Hyperclay resolve isso
- UI, estado e comportamento são integrados em um único arquivo HTML
- Assim como abrir um app de desktop, é possível abrir facilmente e editar na hora, refletindo o resultado online imediatamente
- Apresenta o conceito de objetos digitais persistentes (shared, cloneable, persistent)
- Pode ser aplicado a vários tipos de ferramenta, como construtores de sites, ferramentas de documentos, diagramas e apresentações, dashboards, blogs, criação de enquetes e quizzes, e visualização de dados
Resumo do conceito geral
- A maioria dos webapps já usa HTML
- Ao eliminar etapas intermediárias, o arquivo HTML passa a cumprir o papel de banco de dados / API / UI, simplificando a stack a apenas algumas linhas
- Os desenvolvedores podem reduzir a complexidade e criar apps com o mínimo de código, mas ainda com ótima usabilidade e manutenção
Exemplos de uso do Hyperclay
- Blogs, checklists e praticamente qualquer app podem ser criados, distribuídos, compartilhados e editados com um único HTML
- Pode ser usado imediatamente no formato
<div contenteditable>내 블로그!</div>, e com <input type="checkbox" persist> cada estado fica registrado permanentemente no documento
Conclusão
- Hyperclay propõe uma nova forma de criar webapps interativos leves e altamente portáteis, que qualquer pessoa pode produzir, compartilhar, salvar e restaurar em tempo real sem a burocracia do desenvolvimento web
- É uma plataforma de webapps de nova geração que pode ser usada com facilidade não só por desenvolvedores e designers, mas por qualquer pessoa
Ainda não há comentários.