Zero Build Frontend (Grade A)Desenvolvimento testado em segurança para o Claude AI. Grau A.

Zero-build frontend development com React, Tailwind CSS e JavaScript vanilla carregados via CDN. Use quando estiver construindo aplicações web estáticas sem bundlers, criando mapas Leaflet, integrando Google Sheets como banco de dados, ou desenvolvendo extensões de navegador. Cobre padrões do rosen-frontend, do mapa NJCIC e dos projetos PocketLink. Zero-build frontend development Padrões para construir aplicações web de qualidade de produção sem ferramentas de build, bundlers ou cadeias de ferramentas complexas. Escolhendo uma stack Três abordagens zero-build atuais, cada uma com diferentes trade-offs: Stack Quando Bundle size impact React via esm.sh + htm Component-heavy SPAs, modelo mental existente do React, Tailwind styling ~50 KB gzipped (React + ReactDOM + htm) htmx 2.x + server-rendered HTML CRUD apps, fluxo MPA tradicional, quer estado de verdade no servidor ~14 KB gzipped (htmx apenas) Alpine.js 3.x + plain HTML Light interactivity sprinklada em páginas quase estáticas, sem SPA completo ~15 KB gzipped (Alpine apenas) Você pode misturar htmx e Alpine.js na mesma página: htmx lida com interações do servidor, Alpine lida com estado UI no cliente. Muitos sites de produção convergem para essa combinação. ESM import maps Import maps permitem escrever import x from 'react' em <script type="module"> sem bundler; o navegador resolve o especificador simples contra o mapa. Estável em todos os principais navegadores desde 2023. <script type="importmap"> { "imports": { "react": "https://esm.sh/react@19.0.0", "react-dom/client": "https://esm.sh/react-dom@19.0.0/client", "lodash-es": "https://esm.sh/lodash-es@4.17.21", "@my-app/": "/src/" }, "scopes": { "https://esm.sh/": { "scheduler": "https://esm.sh/scheduler@0.23.0" } } } </script> O bloco scopes permite que uma subárvore de imports seja resolvida de forma diferente. Útil quando um pacote CDN precisa de uma dependência transitiva específica. A forma com / final ("@my-app/": "/src/") permite importar qualquer arquivo sob esse prefixo. Fixar versões em produção. esm.sh/react (sem versão) e esm.sh/react@latest resolvem no tempo de requisição e podem mudar. Use versões fixadas exatas ou URLs com SHA. htmx 2.x server-rendered interactivity htmx 2.0 (lançado em junho de 2024) permite adicionar AJAX, WebSockets e SSE ao HTML puro através de atributos hx-*. O servidor envia fragmentos HTML; o cliente os troca. Nenhum framework JS necessário. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Click button POST to server swap response into #result --> <button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML">Click me</button> <div id="result"></div> <!-- Search-as-you-type with debounce --> <input type="search" name="q" hx-get="/api/search" hx-trigger="input changed delay:300ms" hx-target="#results" /> <div id="results"></div> <!-- Infinite scroll --> <div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend"> ... </div> htmx 2.x abandonou suporte a IE e apertou a API; se você usar htmx 1.x e não precisar migrar, 1.x ainda recebe patches de segurança. O código novo deve visar 2.x. Alpine.js 3.x client-side reactivity in HTML Alpine.js (versão atual 3.14+) é uma alternativa mínima ao Vue/React para pequenas interações. Estado e comportamento vivem como atributos x-*. <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- Toggle visibility --> <div x-data="{ open: false }"> <button @click="open = !open">Toggle</button> </div>