Zero Build Frontend (Grade A)Тествана от сигурността разработка на умения за Claude AI. Клас А. Фронтенд разработка без компилиране с CDN-зареден React, Tailwind CSS и ванила JavaScript. Използвайте при създаване на статични уеб приложения без пакетиращ

Разработка на фронтенд без изграждане с CDN-зареден React, Tailwind CSS и vanilla JavaScript. Използвайте при създаване на статични уеб апликации без пакети, създаване на карти с Leaflet, интегриране на Google Sheets като база данни или разработка на разширения за браузъри. Обхваща шаблони от проектите rosen-frontend, NJCIC map и PocketLink. Шаблони за разработка на фронтенд за създаване на уеб приложения с производствено качество без инструменти за изграждане, пакети или сложни инструменти. Избор на стек От текущите три подхода за разработка без изграждане, всеки с khácни компромиси: Стек Прилипи размерът на пакета Реакция чрез esm.sh + htm Компонентно-тежки SPAs, съществуваща реакция, стилове Tailwind ~50 KB gzipped (React + ReactDOM + htm) htmx 2.x + серверно-рендирани HTML CRUD приложения, традиционен поток на MPA, желание за състояние на истината на сервера ~14 KB gzipped (само htmx) Alpine.js 3.x + чист HTML Лека интерактивност, разпръсната в много-static страници, без пълен SPA ~15 KB gzipped (само Alpine) Можете да смесите htmx и Alpine.js в една и съща страница htmx ръководи серверните интеракции, Alpine ръководи клиентското състояние на интерфейса. Много производствени сайтове се съсредоточват в този комбиниран подход. ESM import картите Позволяват да се пише import x от 'react' в <script type="module"> без пакет, браузърът разширява указателя срещу картата. Стабилен във всички основни браузъри от 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> Блокът scopes позволява поддърво от импорти да се разрешават по различен начин. Полезно, когато едно CDN пакети трябва да има конкретна транзитивна зависимост. Формата с трейлинг / ("@my-app/": "/src/") позволява да се импортират файлове под този префикс. Закрепете версиите в производство. esm.sh/react (без версия) и esm.sh/react@latest се разрешават при заявка и могат да се променят. Използвайте точни закрепени версии или URL адреси, блокирани от SHA. htmx 2.x сървърно-рендирани интерактивности htmx 2.0 (издаден юни 2024 г.) позволява да се добавят AJAX, WebSockets и SSE към чист HTML чрез hx-* атрибути. Серверът изпраща HTML фрагменти; клиентът ги заменя. Не е необходим JS-фреймуърк. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Кликни бутона POST на сервера размени отговора в #result --> <button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML"> Кликни меня </button> <div id="result"></div> <!-- Търсене по време на писане с debounce --> <input type="search" name="q" hx-get="/api/search" hx-trigger="input changed delay:300ms" hx-target="#results" /> <div id="results"></div> <!-- Безкраен скрол --> <div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend"> ... </div> htmx 2.x спира поддръжката на IE и затяга API; ако сте на htmx 1.x и не трябва да мигрирате, 1.x все още получава поправки на сигурността. Новите кодове трябва да целят 2.x. Alpine.js 3.x клиентска реактивност в HTML Alpine.js (текущ 3.14+) е минимален алтернатив на Vue/React за разпръскване на интерактивност. Състоянието и поведението живеят като x-* атрибути в маркировката. <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- Промяна на видимостта --> <div x-data="{ open: false }"> <button @click="open"