Zero Build Frontend (Grade A)Sikker utviklingsfag for Claude AI. Grad A. Zero-bygge frontendutvikling med CDN-lastet React, Tailwind CSS og ren JavaScript. Bruk når du bygger statiske webapplikasjoner uten bundler

Zero-bygg fremmeutvikling med CDN-lastet React, Tailwind CSS og rent JavaScript. Bruk når du bygger statiske webapplikasjoner uten bundlere, utvikler Leaflet kart, integrerer Google Sheets som databasen eller utvikler nettleserbere. Dekker mønstre fra rosen-frontend, NJCIC kart og PocketLink-prosjekter. Zero-bygg fremmeutvikling mønstre for å bygge produksjonsdyktige webapplikasjoner uten byggetøyløsninger, bundlere eller komplekse verktøkskjeder. Valg av en stakking Tre aktuelle zero-bygg-løsninger, hver med forskjellige kompromisser: Stakking når Byte størrelsesinnvirkning React via esm.sh + htm Komponent-dominerte SPAs, eksisterende React-mentalitet, Tailwind-styling ~50 KB comprimirte (React + ReactDOM + htm) hx 2.x + server-side-syntetisk HTML CRUD-applikasjoner, tradisjonell MPA-flomønster, ønsker server-side statens sant ~14 KB comprimirte (hx alene) Alpine.js 3.x + rent HTML Måte å få til å tilføre lys interaktivitet i for det meste statiske sider utenom full SPA ~15 KB comprimirte (Alpine i alene) Du kan blande hx og Alpine.js i samme side hx håndterer server-interaksjoner, Alpine håndterer klient-side UI-status. Mange produksjonsnettsteder konvergerer på denne kombinansen. ESM-inngangsregler Import-regler la deg skrive import x fra 'react' i en <script type="module"> utenbyggeren browser løser den nøkkelordets bære mot kartet. Stabil i alle større browser siden 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", "@min-sideapp/": " /src/ " }, "scopes": { "https://esm.sh/": { "scheduler": "https://esm.sh/scheduler@0.23.0" } } } </script> Maks-reglerblokken la en undertræd av import så resolvert annen vei. Nyttig når en CDN-pakke trenger et bestemt transitive avhengighet. Sluttstregformen ("@min-sideapp/": " /src/ ") la deg importere noen fil under det prefix. Fastsette versjoner i produksjon. esm.sh/react (uten versjon) og esm.sh/react@latest resolvet på forespørselspunktet og kunne skifte under deg. Bruk nøkkelimporterte versjoner eller SHA-låst URLer. hx 2.x server-russiske interaktivitet hx 2.0 (utgitt juni 2024) la deg legge til AJAX, WebSockets og SSE til rent HTML ved hjelp av hx-* attributter. Serveren sender HTML-blokker, klienten skjøter dem. Ingen JavaScript-profil er nødvendig. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Klikkbånd POST til server skift svar inn i #result --> <button hx-post="/api/klikket" hx-target="#result" hx-swap="innerHTML"> Klikk deg </button> <div id="result"></div> <!-- Søk-som-du-skriver med debounce --> <input type="search" navn="q" hx-get="/api/søk" hx-trigger="innputs forandret delay:300ms" hx-target="#resultater" /> <div id="resultater"></div> <!-- Uendelig skriving --> <div hx-get="/api/leveringer?page=2" hx-trigger="utroligvis» hx-swap="afterend"> ... </div> hx 2.x droppet IE-stotte og stregete APIet; hvis du er på hx 1.x og ikke vil migrere, 1.x mottar likevel sikkerhetspatcher. Nytt kode skal målrette 2.x. Alpine.js 3.x klient-side reaktivitet i HTML Alpine.js (nåværende 3.14+) er en minimal alternativ til Vue/React for å sprede interaktivitet. Status og oppførsel lever som x-* attributter i markupen. <script defer kildemål="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- Vis/fjern visning --> <div x-data="{ åpen: false }"> <button @ klikk="åpen">