Nos últimos dois anos, o renomado desenvolvedor Simon Willison criou mais de 150 "Ferramentas HTML" usando LLM. Sua experiência em combinar "HTML de arquivo único + recursos nativos do navegador + programação de IA" merece ser considerada. Em sua postagem mais recente no blog, "Padrões úteis para construir ferramentas HTML", Simon apresenta um padrão de desenvolvimento de software extremamente leve, prático e fácil de manter, que ele chama de "Ferramentas HTML". Isso se refere a um aplicativo em miniatura que contém HTML, JavaScript e CSS, tudo em um único arquivo, e que pode ser executado sem um servidor de backend. https://t.co/SCvbUyXZ1p O que são "Ferramentas HTML"? • Arquitetura de arquivo único: Todo o código (HTML/JS/CSS) está em um único arquivo. Não há processos de compilação complexos (como Webpack ou npm), nenhuma implantação em servidor é necessária e o arquivo pode ser aberto diretamente em um navegador ou até mesmo distribuído simplesmente copiando e colando. • Impulsionadas por LLM: A grande maioria dessas ferramentas é escrita com a ajuda de IAs como ChatGPT, Claude ou Gemini. A estrutura de arquivo único é ideal para LLMs porque a IA pode ler ou gerar todo o contexto do código de uma só vez. Padrões e técnicas de construção fundamentais Simon resumiu um conjunto de "melhores práticas" de desenvolvimento eficientes para reduzir a complexidade e melhorar a usabilidade: • Evite frameworks complexos: O autor recomenda enfaticamente exibir "Sem React" ao usar código gerado por IA. Frameworks como o React exigem uma etapa de compilação, o que compromete a portabilidade de aplicativos de arquivo único e aumenta a dificuldade de depuração e implantação. JavaScript nativo ou uma biblioteca CDN simples são opções melhores. • Prototipagem usando o recurso "Canvas" do LLM: Gere rapidamente protótipos interativos usando o ChatGPT Canvas ou o Claude Artifacts. • Dependência de CDN: Se forem necessárias bibliotecas de terceiros (como processamento de PDF e desenho de gráficos), elas podem ser importadas diretamente por meio de links de CDN para manter o código local limpo e sem dependências. • Gestão eficiente do estado: • Parâmetros de URL: Salve o estado da ferramenta (como a configuração em edição) na URL para que os usuários possam compartilhar o estado atual de funcionamento por meio de um link de compartilhamento. • localStorage: Utilizado para armazenar dados sensíveis (como chaves de API) ou grandes quantidades de texto, garantindo que os dados permaneçam apenas no navegador do usuário e não sejam enviados para o servidor, protegendo assim a privacidade. • Utilize os recursos nativos do navegador: • API CORS: Chame diretamente APIs públicas que suportam solicitações entre domínios diferentes a partir do frontend do navegador, sem a necessidade de encaminhamento no backend. • Processamento de arquivos: Use `` para ler e processar arquivos localmente (como recortar imagens, reconhecimento OCR), sem precisar enviar arquivos para a nuvem. • WebAssembly e Pyodide: O WebAssembly permite executar análises de dados em Python (Pandas) ou bibliotecas C++ complexas (como FFmpeg e Tesseract) no navegador, expandindo consideravelmente as capacidades das ferramentas de front-end. Por que esse modelo é importante? Isso demonstra a mudança nos paradigmas de desenvolvimento de software na era da IA: • Reduzindo as barreiras de entrada: os desenvolvedores podem criar uma pequena ferramenta que resolve um problema específico (por exemplo, converter JSON para um formato específico, extrair texto de uma imagem ou depurar uma API) a um custo muito baixo (em minutos). • Soberania e privacidade dos dados: Como a ferramenta é estática e executada localmente, os usuários não precisam se preocupar em enviar dados privados para servidores de terceiros. • Reutilização e Remixagem: Como o código é simples e independente, o código de ferramentas antigas pode ser facilmente usado como "contexto" pela IA, permitindo que ela desenvolva rapidamente novas ferramentas com base em funções existentes.
