Zero Build Frontend (Grade A)უსაფრთხოების ტესტირების განვითარების უნარ-ჩვევა Claude AI-სთვის. Grade A. Zero-build ფრონტენდის განვითარება CDN-ით დატვირთული React, Tailwind CSS და ვანილის ჯავასკრიპტი. გამოიყენეთ სტატიკური ვებ-აპლიკაციების შექმნისას ბანდლერის გარეშე

ნულოვანი ფრონტენდის განვითარება CDN-ზე გადატვირთული React, Tailwind CSS და Vanilla JavaScript-ით. გამოიყენება სტატიკური ვებ-აპლიკაციების შექმნისას ბანდლერების გარეშე, Leaflet-ის რუკების ინტეგრაციისას, Google Sheets-ის ბაზად გამოყენებისას ან ბრაუზერის გაფართოებების განვითარებისას. მოიცავს ნიმუშებს rosen-frontend, NJCIC map და PocketLink პროექტებიდან. ნულოვანი ფრონტენდის განვითარების ნიმუშები წარმოების ხარისხის ვებ-აპლიკაციების შექმნისათვის ბილდ-ინსტრუმენტების, ბანდლერების ან კომპლექსური ინსტრუმენტების გარეშე. სტეკის არჩევა სამი მიმდინარე ნულოვანი მიახლოება, თითოეული მათგანი განსხვავებული კომპრომისებით. სტეკი, როდესაც, ბანდლის ზომა გავლენა React esm.sh + htm კომპონენტ-მრავალი SPAs, არსებული React-ის მენტალური მოდელი, Tailwind-ის სტილი ~50 KB gzipped (React + ReactDOM + htm) htmx 2.x + სერვერ-მხარეს გამოტვირთული HTML CRUD აპლიკაციები, ტრადიციული MPA ნაკადი, სერვერ-მხარეს მდგომარეობის სიმართლე ~14 KB gzipped (htmx მარტო) Alpine.js 3.x + ჩვეული HTML მცირე ინტერაქტიულობა ძირითადად სტატიკურ გვერდებში, არა სრული SPA ~15 KB gzipped (Alpine მარტო) შეგიძლიათ htmx და Alpine.js შემდეგ გვერდზე შეუთავსოთ htmx სერვერ-ინტერაქციებს აწყობს, Alpine კლიენტ-მხარეს UI მდგომარეობას აწყობს. ბევრი წარმოებადი საიტი ამ კომბინაციასთან მიდის. ESM იმპორტის რუკები იმპორტის რუკები საშუალებას იძლევა იმპორტი რეაქტიდან 'რეაქტი' შექმნათ <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> სკოპების ბლოკი იმპორტის ქვეხელს საშუალებას იძლევა განსხვავებულად გადაწყდეს. გამოსადეგია, როდესაც ერთ ცენტრალურ პაკეტს საჭიროებს კონკრეტულ ტრანზიტულ დამოკიდებულებას. ბოლო / ფორმის (@my-app/:'/src/') საშუალებას იძლევა ნებისმიერი ფაილის იმპორტი ამ პრეფიქსის ქვეშ. პროდუქციაში ვერსიები დაფიქსირებული უნდა იყოს. esm.sh/react (ვერსიის გარეშე) და esm.sh/react@latest მოთხოვნის დროს გადაწყდება და შეიძლება თქვენს ქვეშ შეეცვალოს. გამოიყენეთ ზუსტი დაფიქსირებული ვერსიები ან SHA-ზე დაბლოკირებული URL-ები. 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= esult></div> <!-- ძებნა, როგორც წერთ » დაყოვნება --> <input type=search name=q hx-get=api/search hx-trigger=input changed delay:300ms hx-target=#results /> <div id= esults></div> <!-- უსასრულო გადატვირთვა --> <div hx-get=api/items?page=2 hx-trigger= evealed hx-swap=afterend> ... </div> htmx 2.x-მა IE-ს მხარდაჭერა შეწყვიტა და API შეზღუდა; თუ თქვენ htmx 1.x-ზე ხართ და მიგრაციის საჭიროება არ გაქვთ, 1.x-ს უსაფრთხოების