Zero Build Frontend (Grade A)Ανάπτυξη frontend χωρίς build με CDN‑φορτωμένο React, Tailwind CSS και vanilla JavaScript. Χρησιμοποιήστε όταν δημιουργείτε στατικές εφαρμογές ιστού χωρίς bundler. Σχετική με την ασφάλεια δοκιμασμένη ανάπτυξη για Claude AI. Κατηγορία A.

Ανάπτυξη front‑end χωρίς build με React, Tailwind CSS και vanilla JavaScript που φορτώνονται από CDN. Χρησιμοποιήστε το κατά την δημιουργία στατικών web εφαρμογών χωρίς bundlers, τη δημιουργία χαρτών Leaflet, την ενσωμάτωση Google Sheets ως βάση δεδομένων, ή την ανάπτυξη επεκτάσεων προγράμματος περιήγησης. Περιλαμβάνει μοτίβα από τα έργα rosen‑frontend, NJCIC map και PocketLink. Μοτίβα ανάπτυξης front‑end χωρίς build για την κατασκευή εφαρμογών ιστού παραγωγικής ποιότητας χωρίς build εργαλεία, bundlers ή πολύπλοκες αλυσίδες εργαλείων. Επιλογή stack: τρεις τρέχουσες προσεγγίσεις zero‑build, κάθε μία με διαφορετικά trade‑offs: • Stack με ενέργεια bundle size: React μέσω esm.sh + htm – Component‑heavy SPAs, υπάρχον μοντέλο React, Tailwind styling ~50 KB gzipped (React + ReactDOM + htm) • htmx 2.x + server‑rendered HTML – CRUD apps, παραδοσιακό MPA flow, ανάγκη server‑side state of truth ~14 KB gzipped (htmx μόνο) • Alpine.js 3.x + plain HTML – ελαφριά διαδραστικότητα σε σχεδόν statically‑pages, χωρίς πλήρη SPA ~15 KB gzipped (Alpine μόνο) Μπορείτε να αναμίξετε htmx και Alpine.js στην ίδια σελίδα: το htmx χειρίζεται τις server interactions, το Alpine χειρίζεται το client‑side UI state. Πολλές παραγωγικές ιστοσελίδες χρησιμοποιούν αυτό το συνδυασμό. ESM import maps: Τα import maps επιτρέπουν να γράψετε import x from 'react' σε <script type="module"> χωρίς bundler – το πρόγραμμα περιήγησης επιλύει τον bare specifier με βάση το map. Σταθερός σε όλους τους κυριότερους browsers από το 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> Ο block scopes επιτρέπει διαφορετική επιλύση σε υπο‑δέντρα imports. Χρήσιμο όταν ένα CDN πακέτο χρειάζεται συγκεκριμένη εξαρτώμενη βιβλιοθήκη. Η μορφή με trailing / ("@my-app/": "/src/") επιτρέπει το import οποιουδήποτε αρχείου κάτω από αυτό το prefix. Κλειδώστε τις εκδόσεις στην παραγωγή. Τα αρχεία esm.sh/react (χωρίς έκδοση) και esm.sh/react@latest επιλύονται κατά το χρόνο αιτήματος και μπορεί να μεταβάλλονται. Χρησιμοποιήστε συγκεκριμένες κλειδωμένες εκδόσεις ή SHA‑locked URLs. htmx 2.x server‑rendered interactivity: Το htmx 2.0 (εκδόθηκε Ιουνίου 2024) επιτρέπει την προσθήκη AJAX, WebSockets και SSE σε plain HTML μέσω των hx-* attributes. Ο server στέλνει HTML fragments, και ο client τα αντικαθιστά. Δεν απαιτείται framework JS. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- Click button POST to server swap response into #result --> <button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML">Click me</button> <div id="result"></div> <!-- Search-as-you-type με debounce --> <input type="search" name="q" hx-get="/api/search" hx-trigger="input changed delay:300ms" hx-target="#results" /> <div id="results"></div> <!-- Infinite scroll --> <div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend"> … </div> Το htmx 2.x άφησε πίσω του την υποστήριξη IE και σφίξε το API. Αν χρησιμοποιείτε htmx 1.x και δεν χρειάζεστε μετάβαση, το 1.x συνεχίζει να λαμβάνει security patches. Ο νέος κώδικας πρέπει να στοχεύει το 2.x. Alpine.js 3.x client‑side reactivity in HTML: Το Alpine.js (τρέχον 3.14+) είναι ελαφριά εναλλακτική στο Vue/React για ελαφριά διαδραστικότητα. Η κατάσταση και η συμπεριφορά αποθηκεύονται ως x-* attributes στο markup. <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- Toggle visibility --> <div x-data="{ open: false }"> <button @click="open">Toggle</button> </div>