Zero Build Frontend (Grade A)Claude AI jaoks mõeldud turvatestitud arendusoskus. A-tase. CDN-st laaditud Reacti, Tailwind CSS-i ja puhta JavaScriptiga null-ehitusega frontend-arendus. Kasuta staatiliste veebirakenduste loomisel ilma pakettide koondajata

CDN-st laaditud Reacti, Tailwind CSS-i ja puhta JavaScriptiga null-ehitusega frontend-arendus. Kasuta staatiliste veebirakenduste loomisel ilma pakettide koondajateta, Leaflet-kaartide loomisel, Google Sheetsi andmebaasina integreerimisel või brauserilaienduste välentwicklungimisel. Kattab mustreid rosen-frontend, NJCIC kaardi ja PocketLink projektidest. Null-ehitusega frontend-arenduse mustrid tootmiskvaliteediga veebirakenduste loomiseks ilma ehitustyökalu, pakettide koondajate või keeruliste tööriistaketideta. Virna valimine Kolm praegust null-ehituse lähenemist, iga erinevate kompromissidega: Virna Kui Paketi suurus mõjutab React via esm.sh + htm Komponent-rikkad üheleheküljelised rakendused, olemasolev Reacti mõtteviis, Tailwind-styling ~50 KB gzipped (React + ReactDOM + htm) htmx 2.x + server-renderitud HTML CRUD-rakendused, traditsiooniline MPA-voog, soov serveripoolse tõe oleku järele ~14 KB gzipped (htmx üksi) Alpine.js 3.x + puhas HTML Kerge interaktiivsus piserdatud enamasti staatilistele lehtedele, mitte täis SPA ~15 KB gzipped (Alpine üksi) Saab kombineerida htmx ja Alpine.js samal lehel htmx käsitleb serverinteraktsioone, Alpine käsitleb kliendi-poolset kasutajaliidese olekut. Paljud tootmis saidid lähenevad sellele kombinatsioonile. ESM impordi kaardid Impordi kaardid lubavad kirjutada import x from 'react' <script type="module"> ilma pakettide koondajata brauser lahendab palja määraja vastu kaardile. Stabiilne kõigis suuremates brauserites alates 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> Ulatusploki abil saab allaandmete puu lahendada erinevalt. Kasulik, kui üks CDN-pakett vajab spetsiifilist transitatiivset sõltuvust. Järelliide / vorm ("@my-app/": "/src/") lubab importida ükskõik millist faili selle eesliite all. Tootmises versioonid fikseerida. esm.sh/react (ilma versioonita) ja esm.sh/react@latest lahenduvad nõude ajal ja võivad muutuda. Kasuta täpseid fikseeritud versioone või SHA-lukustatud URL-e. htmx 2.x server-renderitud interaktiivsus htmx 2.0 (välja antud juunis 2024) lubab lisada AJAX-i, WebSocketsi ja SSE-d puhtale HTML-le hx-* atribuutide kaudu. Server saadab HTML-fragmente; klient vahetab need sisse. JS-i raamistikku ei nõuta. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Kliki nupp POST serverile vaheta vastus #result --> <button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML"> Kliki mind </button> <div id="result"></div> <!-- Otsing kui kirjuta sisend debounciga --> <input type="search" name="q" hx-get="/api/search" hx-trigger="input changed delay:300ms" hx-target="#results" /> <div id="results"></div> <!-- Lõpmatu kerimine --> <div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend"> ... </div> htmx 2.x loobunud IE toetusest ja karmistanud API-d; kui oled htmx 1.x juures ja ei vaja migratsiooni, 1.x saab endiselt turvapaikusi. Uued koodid peaksid sihtima 2.x. Alpine.js 3.x kliendi-poolne reaktiivsus HTML-is Alpine.js (praegune 3.14+) on minimaalne alternatiiv Vue/ Reactile interaktiivsuse piserdamiseks. Olek ja käitumine elavad kui x-* atribuudid märgistuses. <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- Nähtavuse ümberlülitus --> <div x-data="{ open: false }"> <button @click="open"