Zero Build Frontend (Grade A)Ochranně testovaný vývojářský dovednost pro Claude AI. Hodnocení A. Frontendová vývojářská služba s přiloženou CDN na React, Tailwind CSS a vánillou JavaScript. Používání při vytváření statických webových aplikací bez balíčka.

Frontendová vývojářská služba s přiloženou CDN na React, Tailwind CSS a vánillu JavaScript. Používejte při vytváření statických webových aplikací bez balíčků, vytváření map v Leafletu, integraci Google Spreadšítů jako databáze nebo vývoji prohlížečských rozšíření. Uplatňuje vzory z projektů Rosen Frontend, NJCIC Map a PocketLink. Frontendová vývojářská služba bez budování, používaná pro vytváření vysoce kvalitních webových aplikací bez vývojářských nástrojů, balíčků nebo složitých řetězců. Rozpočet a výběrové řízení. Tři současné nulový budování přístupy, každý s jinými výměnou: Stack Ovlivňuje balíček velikost React pomocí esm.sh + htm Komponentově bohaté SPA, existující React mentální model, Tailwind styling ~50 KB gzip (Reaguje + ReactDOM + htm) htmx 2.x + server-rendered HTML CRUD aplikace, tradicionální MPA tok, serverový stav pravdy ~14 KB gzip (htmx sama) Alpine.js 3.x + jednoduché HTML Světlo interaktivitu nasypáno do statických stránek, plný SPA ~15 KB gzip (Alpine sám) Můžete smíchat htmx a Alpine.js v jedné stránce. Htmx zpracovává serverové interakce, Alpine zpracovává klient-side UI stavu. Mnohá producentská stránky se na tomto kombinovaném souboru shodují. Importy ESM Importy ESM vám umožňují napsat import x z 'reakt' v <script typ="module"> bez balíčku, prohlížeč rozluští nuda specifikátor proti mapě. Ústavení stabilní ve všech významných prohlížeči od 2023.<script typ="importmap"> { "imports": { "reakt": "https://esm.sh/react@19.0.0", "reakt-dom/client": "https://esm.sh/react-dom@19.0.0/client", "lodash-es": "https://esm.sh/lodash-es@4.17.21", "@moje-app/": "/src/" }, "scopes": { "https://esm.sh/": { "scheduler": "https://esm.sh/scheduler@0.23.0" } } } </script> Scopey bloky umožňují jedno list prohledávání různých závislostí. Použití když jedna CDN balíček vyžaduje specifickou transituční závislost. Pomlčky / form ("@moje-app/": "/src/") umožňuje importovat qualquer soubor pod tím předsunutím. Vymezte specifikované verze ve vývoji. ESM importy z esm.sh/reakt (bez verze) a esm.sh/reakt@nejnovější se rozšiřují na požádání a mohou se posunout. Použijte přesné specifikční verze nebo SHA-lockované adresy. htmx 2.x server-rendered interaktivitu htmx 2.0 (vydáno v červnu 2024) umožňuje přidat AJAX, WebSockets a SSE do_plain HTML pomocí htx- * attributes. Servery posílají fragment HTML; klient nahrazuje je. Neexistuje žádný potřebný framework. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Klikněte na tlačítko POST na server nahrazuje odpoved do #result --> <button hx-post="/api/clicked" hx-cílová=" #result " hx-swap="innerHTML"> Klikněte zde </button> <div id="result"></div> <!-- Hledejte po klíčových slovech pomocí zpoždění --> <input typ="search" name="q" hx-get="/api/search" hx-trigger="input changed delay:300ms" hx-target=" #results " /> <div id="results"></div> <<!-- Bezmilevní scroll --> <div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend"> ... </div> htmx 2.x opustil podporu pro IE a zjednodušil API; pokud jste na htmx 1.x a nepotřebujete migrovat, 1.x stále dostává zabezpečené náplaste. Nová kódu byste měli vystřelovat na 2.x. Alpine.js 3.x klient-side reaktivnost v HTML Alpine.js (aktuální 3.14+) je minimalistrní alternativu Vue/Reakty pro nasypání interaktivitu a interaktivita v HTML. Pořádk a chování žije jako x- * attributes v markupu. <script odložte src="https://unpkg.com/alpinejs @3.14.1/dist/cdn.min.js"></script> <!-- Změňte viditelnost --> <div x-data="{otevřeno: false } "> <button @klik "otevřeno">< /button>