Zero Build Frontend (Grade A)Drošības pārbaudīta izstrādes prasme Claude AI. Novērtējums A. Zero-build frontenda izstrāde ar CDN ielādētu React, Tailwind CSS un tīru JavaScript. Izmanto, veidojot statiskas tīmekļa lietotnes bez bundlera.

Zero‑build frontenda izstrāde ar CDN‑ielādētu React, Tailwind CSS un tīru JavaScript. Izmantojiet, veidojot statiskās tīmekļa lietotnes bez bundleriem, veidojot Leaflet kartes, integrējot Google Sheets kā datu bāzi vai izstrādājot pārlūkprogrammas paplašinājumus. Aptver modeļus no rosen-frontend, NJCIC map un PocketLink projektiem. Zero‑build frontenda izstrādes modeļi, kas ļauj veidot ražošanas kvalitātes tīmekļa lietojumprogrammas bez būvēšanas rīkiem, bundleriem vai sarežģītām rīku ķēdēm. Izvēloties steku Trīs pašreizējie zero‑build pieejas, katra ar savām kompromisiem: Steks | Kad --- | --- **Bundle size impact** React caur esm.sh + htm – komponentu‑smagas SPA, esošs React mentālais modelis, Tailwind stilizācija ~50 KB saspiedts (React + ReactDOM + htm) **htmx 2.x** + servera‑renderēts HTML – CRUD lietojumprogrammas, tradicionāls MPA plūsmas modelis, servera‑pusē esoša patiesības stāvokļa vajadzība ~14 KB saspiedts (tikai htmx) **Alpine.js 3.x** + vienkāršs HTML – viegla interaktivitāte uz lielākoties statiskām lapām, bez pilna SPA ~15 KB saspiedts (tikai Alpine) Varat kombinēt htmx un Alpine.js vienā lapā – htmx apstrādā servera mijiedarbību, Alpine pārvalda klienta‑pusē UI stāvokli. Daudzas ražošanas vietnes konverģē uz šo kombināciju. ESM import mapes Import mapes ļauj rakstīt `import x from 'react'` `<script type="module">` iekšā bez bundlera – pārlūkprogramma atrisina neapstrādāto norādi, balstoties uz karti. Stabils visās galvenajās pārlūkprogrammās kopš 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> ``` `scopes` bloks ļauj noteiktām importu apakškopām atrisināt atšķirīgu versiju – noder, ja kādam CDN paketē ir jāizmanto konkrēta transitatīva atkarība. Formāts ar slīpsvītru beigās ("@my-app/": "/src/") ļauj importēt jebkuru failu ar šo prefiksu. Nospiediet versijas ražošanas vidē. `esm.sh/react` (bez versijas) un `esm.sh/react@latest` tiek izšķirti pie pieprasījuma un var mainīties. Lietojiet precīzi piespiestās versijas vai SHA‑slēgtus URL. htmx 2.x servera‑renderēta interaktivitāte htmx 2.0 (izlaists 2024. gada jūnijā) ļauj pievienot AJAX, WebSockets un SSE vienkāršam HTML caur hx‑* atribūtiem. Serveris sūta HTML fragmentus; klients tos apmaiņā ieliek. Nav nepieciešama JS ietvara. ```html <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Klikšķini pogu, POST uz serveri, ievietot atbildi #result --> <button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML">Click me</button> <div id="result"></div> <!-- Meklēšana ar aizkavēšanu --> <input type="search" name="q" hx-get="/api/search" hx-trigger="input changed delay:300ms" hx-target="#results" /> <div id="results"></div> <!-- Bezgalīga ritināšana --> <div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend"> ... </div> ``` htmx 2.x pārtrauca IE atbalstu un stingrināja API; ja izmantojat htmx 1.x un nav jāveic pāreja, 1.x joprojām saņem drošības ielāpus. Jauna kods būtu jāvirza uz 2.x. Alpine.js 3.x klienta‑pusēja reaktivitāte HTML Alpine.js (pašreizējā 3.14+ versija) ir minimāla alternatīva Vue/React vieglām interaktivitātes iedarbībām. Stāvoklis un uzvedība dzīvo kā x‑* atribūti marķējumā. ```html <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- Pārslēgt redzamību --> <div x-data="{ open: false }"> <button @click="open = !open">Toggle</button> <div x-show="open">Saturs</div> </div> ``` "pros": ["Zero‑build frontenda izstrāde","Nav vajadzīgs bundlers","CDN‑ielādēts React, Tailwind CSS un tīrs JavaScript"], "cons": ["Ierobežots līdz statiskām tīmekļa lietotnēm","Nav pilna SPA atbalsta"], "features": ["ESM import mapes","htmx 2.x servera‑renderēta interaktivitāte","Alpine.js 3.x klienta‑pusēja reaktivitāte"], "useCases": [{"title":"Statiskās tīmekļa lietotnes","description":"Statisko tīmekļa lietotņu izveide bez bundleriem"},{"title":"Pārlūkprogrammas paplašinājumi","description":"Pārlūkprogrammu paplašinājumu izstrāde"}]