Zero Build Frontend (Grade A)Säkerhetstestad utvecklingsskicklighet för Claude AI. Betyg A. Utveckling av Zero-build frontend med CDN-lastad React, Tailwind CSS och enkel JavaScript. Använd när du bygger statiska webbappar utan bundlare

Noll-build frontend-utveckling med CDN-lastad React, Tailwind CSS och vanlig JavaScript. Använd när du bygger statiska webbapplikationer utan bundlare, skapar Leaflet-kartor, integrerar Google Sheets som databas eller utvecklar webbläsarbibliotek. Omfattar mönster från rosen-frontend, NJCIC-karta och PocketLink-projekten. Noll-build frontend-utvecklingsmönster för att bygga webbapplikationer av produktionskvalitet utan byggverktyg, bundlare eller komplexa toolchains. Välj en stapel: Tre aktuella noll-build-approacher, vardera med olika kompromisser: Stapel När Bundling påverkan Via React via esm.sh + htm Komponenttunga SPA:er med befintligt React-mentalslag, Tailwind-styling ~50 KB komprimerad (React + ReactDOM + htm) htmx 2.x + serversidan renderad HTML CRUD-applikationer, traditionell MPA-flöde, vill ha serversidestat till sanningen ~14 KB komprimerad (htmx själv) Alpine.js 3.x + enkel HTML Lätt återkommande interaktivitet i huvudsakståiga sidor, utan fullständig SPA ~15 KB komprimerad (Alpine själv) Du kan blanda htmx och Alpine.js på samma sida, htmx hanterar serverinteraktioner medan Alpine hanterar klient-sid UI-state. Många produktionswebbplatser konvergerar mot detta kombo. ESM importkartor Importkartor läter dig skriva import x från 'react' i en <script type="module"> utan en bundlare. Browsern löser upp den obehandlade specifikatren mot kartan. Stabil i alla stora webbläsare sedan 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", "@minside/": "/src/" }, "scopes": { "https://esm.sh/": { "scheduler": "https://esm.sh/scheduler@0.23.0" } } } </script> Scopes blocken låter en underkategori av import resolvera på ett annat sätt. Nyttig när ett CDN-paket behöver en specifik transitive beroende. Slitage-formen ("@minside/": "/src/") låter dig importera alla filer under det prefixet. Pin verioner i produktion. esm.sh/react (utan version) och esm.sh/react@lägst löser upp vid begäran och kan skifta under dig. Använd exakta pålitliga versioner eller SHA-lockade URL:er. htmx 2.x server-renderad interaktivitet htmx 2.0 (utgivet i juni 2024) låter dig lägga till AJAX, WebSockets och SSE till enkel HTML genom hx-*-attribut. Servern skickar HTML-frakter; klienten byter ut dem. Inga JS-konfigurationsfönster krävs. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Klicka och skicka en POST-begäran till servern och byt ut svaret i #result--> <button hx-post="/api/klickad" hx-target="#result" hx-swap="innerHTML">Klicka på mig</button> <div id="result"></div> <!-- Sök när du skriver och debounce --> <input type="search" name="q" hx-get="/api/sök" hx-trigger="ändrade delay:300ms" hx-target="#resultaten" /> <div id="resultaten"></div> <!-- Oändlig scroll --> <div hx-get="/api/objekt?page=2" hx-trigger="upptäckt" hx-swap="efteränd" > ... </div> htmx 2.x lämnade IE-stödet och stramade upp API:n; om du är på htmx 1.x och inte behöver migrera använd 1.x än; nya kod bör lämpa sig efter 2.x. Alpine.js 3.x klient-sid konfigurerat på reaktionsfärdigt i HTML Alpine.js (nuvarande 3.14+) är en minimal variant av Vue eller React för strössel av återkommen interaktivitet. Tillstånd och beteende lever som x-*-attribut i marknadsfärden. <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- Vänd på synligheten --> <div x-data="{ öppen: falsk }"> ...