Zero Build Frontend (Grade A)Skrbno preizkušen razvojni pristop za Claude AI. Razred A. Zero-build frontend razvoj z CDN‑loaded React, Tailwind CSS in vanilla JavaScript. Uporabite, ko gradite statične spletne aplikacije brez bundlera

Zero-build frontend razvoj z Reactom, Tailwind CSS in čistim JavaScriptom, nameščenimi prek CDN. Uporabljajte pri gradnji statičnih spletnih aplikacij brez pakirnih orodij, pri ustvarjanju Leafletovih kart, pri integraciji Google Sheets kot baze podatkov ali pri razvoju razširitev brskalnika. Vključuje vzorce iz projektov rosen-frontend, NJCIC map in PocketLink. Zero-build frontend vzorci za gradnjo spletnih aplikacij z visoko kakovostjo brez orodij za gradnjo, pakirnih orodij ali zapletenih verig orodij. ## Izbira staka | Stak | Vpliv velikosti paketa | Primer |---|---|--- | React preko *esm.sh* + *htm* | Komponentno obsežna SPA, obstoječi React mentalni model, Tailwind stilizacija ~50 KB gzipped (React + ReactDOM + htm) | | *htmx* 2.x + strežniško generirani HTML | CRUD aplikacije, tradicionalni MPA tok, želite strežniško stanje resnice ~14 KB gzipped (htmx le) | | Alpine.js 3.x + čisti HTML | Mladostna interaktivnost posuta v večino statične strani, brez polne SPA ~15 KB gzipped (Alpine le) | | Kombinacija | *htmx* upravlja strežniške interakcije, *Alpine.js* upravlja stanje uporabniškega vmesnika na strani | Veliko produkcijskih spletnih strani uporablja to kombinacijo. ### ESM import mape Import mape omogočajo, da v `<script type="module">` napišete `import x from 'react'` brez pakiranja; brskalnik razreši osnovni specifier glede na mapo. Stabilno v vseh glavnih brskalnikih od 2023. ```html <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> ``` Blok *scopes* omogoča, da poddrevo uvoza razreši drugače. Vredno, kadar paket CDN zahteva specifično tranzitivno odvisnost. Postopek `/` (`"@my-app/": "/src/"`) omogoča uvoz kateregakoli datoteke pod tem prefiksom. V produkciji pripnite različice. `esm.sh/react` (brez različice) in `esm.sh/react@latest` se razrešita ob zahtevi in se lahko spreminjata. Uporabljajte natančno pripete različice ali URL-je z SHA zaklenitvijo. ### *htmx* 2.x – strežniško generirana interaktivnost *htmx* 2.0 (izdan v juniju 2024) omogoča dodajanje AJAX, WebSocketov in SSE v čisti HTML preko atributov `hx-*`. Strežnik pošlje HTML fragmente, odjemalec jih zamenja. Ni potrebe po JS frameworku. ```html <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Klikni gumb POST na strežnik in zamenjaj odziv v #result --> <button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML">Click me</button> <div id="result"></div> <!-- Iskanje med tipkanjem z zamudo --> <input type="search" name="q" hx-get="/api/search" hx-trigger="input changed delay:300ms" hx-target="#results" /> <div id="results"></div> <!-- Neskončno zavijanje --> <div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend"> … </div> ``` *htmx* 2.x je odstranil podporo IE in znižal API; če ste še na *htmx* 1.x in ga ne potrebujete, še vedno prejemate varnostne popravke. Nova koda naj cilja na 2.x. ### Alpine.js 3.x – klient‑sideska reaktivnost Alpine.js (trenutno 3.14+) je minimalna alternativa Vue/React za prigrizke interaktivnosti. Stanje in obnašanje živita kot atributi `x-*` v oznakah. ```html <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- Preklapljanje vidnosti --> <div x-data="{ open: false }"> <button @click="open = !open">Toggle</button> <div x-show="open">Spoštovani!</div> </div> ```