Hyrje Rilindja e hypermedia është në lëvizje të plotë. Pas viteve të dominimit SPA, zhvilluesit janë duke zbuluar fuqinë e arkitekturave të drejtuara nga serveri që shfrytëzojnë HTML si motorin e gjendjes së aplikacionit. Korniza që çon këtë ngarkesë, HTMX, fokusohet ekskluzivisht në hypermedia. Një alternativë, Lightview, nuk ju mbyll në modelet e hypermedia-vetëm. Ndryshe nga qasja e fokusuar e hypermedia e HTMX, Lightview është një kornizë multi-paradigm që mbështet dhe modelet e hypermedia, programimin funksional me funksionet e etiketave të template si BauJS. , dhe përfaqësimi JSON (si JurisJS [ ]), - të gjitha brenda të njëjtit kornizë. ky artikull ofron një krahasim teknik të HTMX dhe Lightview aftësitë hypermedia për t'ju ndihmuar të zgjidhni mjetin e duhur për projektin tuaj. https://github.com/grucloud/bau https://jurisjs.com Ju mund të thoni në këtë pikë, "Prit një sekondë, HTMX është supozuar për të thjeshtuar zhvillimin, pse do të doja kompleksitetin e paradigmave të shumëfishta të kodimit?" Ju mund të mos, pika e Lightview është për t'ju dhënë zgjedhje, ju mund të ndërtoni të gjithë aplikacionin tuaj me hypermedia, ose ju mund të ndërtoni të gjithë aplikacionin tuaj me programim funksional, ose ju mund të ndërtoni të gjithë aplikacionin tuaj me përfaqësim JSON, ose ju mund të ndërtoni të gjithë aplikacionin tuaj me një përzierje të të tre. Gjithçka varet nga ajo që ju nevojitet. Ndoshta aplikacioni juaj fillon nga hypermedia, por si ju rriteni, ju gjeni se ju duhet të përdorni programimin funksional për të ndërtuar logjikën komplekse të biznesit në një Çfarë është Hypermedia? Para se të zhytemi në krahasim, le të përcaktojmë se çfarë nënkuptojmë me hypermedia. Hypermedia i referohet përmbajtjes që përmban lidhje dhe kontrollet për të lundruar në burimet e lidhura. HTML tradicionale siguron këtë përmes lidhjeve dhe formave, por kornizat moderne hypermedia zgjerojnë këto aftësi për çdo element, duke lejuar ndërveprime më të pasura. Çdo element mund të shërbejë si një lidhje dhe çdo element mund të specifikojë burimin nga i cili dëshiron të marrë përmbajtjen e tij. . HTC të HTMX dhe Lightview: Plotësimi i HTML si Hypertext HTMX, i krijuar nga Carson Gross si një pasardhës i intercooler.js, synon të "komplete HTML si një hypertext." Ajo zgjeron atributet standarde HTML për të siguruar AJAX, CSS Transitions, WebSockets, dhe Server-Sent Events direkt në markup. Lightview, e krijuar nga ky autor, Simon Blackwell, është projektuar në bashkëpunim me LLMs, jo vetëm për të përfunduar HTML si hypertext, por edhe për të siguruar një qasje më të portativ, deklarative për dorëzimin e përmbajtjes në server, edhe pse përmbajtja hypermedia mund të jetë ende HTML si HTMX, ajo mund të jetë edhe JSON virtual DOMs që përfaqëson HTML ose komponentët native UI. Filozofia kryesore HTMX përfshin arkitekturën e Hypermedia-Driven Application (HDA), e cila karakterizohet nga dy kufizime: : Uses HTML-embedded attributes rather than imperative scripting Declarative syntax Hypermedia përgjigjet: Serveri përgjigjet me HTML, jo JSON Kjo qasje mban kompleksitetin në server, ndërsa klienti mbetet i thjeshtë dhe deklarativ. Karakteristikat kryesore HTMX lejon çdo element për të lëshuar kërkesa HTTP duke përdorur verbet standarde: HTTP Method Support <button hx-delete="/contacts/1" hx-target="#contact-list" hx-confirm="Are you sure?"> Delete Contact </button> • The atribut specifikon ku përgjigjet e serverit duhet të futen, duke përdorur selektorët CSS: Flexible Targeting hx-target <input type="text" hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results"> Kontrolli i shkarkimit të personalizuar kur kërkohet zjarri: Event Triggers <div hx-get="/news" hx-trigger="every 30s"> <!-- Auto-refreshing content --> </div> : Opsione të shumta për mënyrën se si përmbajtja zëvendëson DOM ekzistues: Swap Strategies Përdorimi i HTML (default) jashtëtokësor Fillimi, pas fillimit, para fillimit, pas përfundimit Shkëndija, asnjë Përshkrimi i mëposhtëmTë dhënat e dhënat e dhënat e dhënat e dhënat e dhënat e dhënat e dhënat e dhënat e dhënat e dhënat e dhëna ( të të , kërkoni treguesit shtetërorë ( Ndryshimi i kohës së përdorimit ( të ), dhe integrimi me View Transitions API. Kjo lejon aplikacionet e drejtuara nga hypermedia për të arritur qetësi të ngjashme me SPA pa JavaScript të përshtatur. CSS Transitions and Animations htmx-swapping htmx-settling htmx-added htmx-request swap:1s settle:1s Përshkrimi HTML mund të përmirësojnë lidhjet dhe format ekzistuese: Progressive Enhancement hx-boost <body hx-boost="true"> <!-- All links and forms now use AJAX --> </body> Mbështetje e lindur për përditësimet në kohë reale: WebSockets & SSE <div hx-ws="connect:/chatroom"> <div hx-ws="send"> <input name="message"> </div> </div> Varësia HTMX ka zero varësi, duke e bërë atë ideal për të shtuar aftësi hypermedia në aplikacionet ekzistuese pa futur kompleksitet shtesë. Lightview: Multi-Paradigm Framework me Mbështetje Hypermedia Lightview gjithashtu ka zero varësi nëse nuk zgjidhni të përdorni komponentët e saj të ndërtuar të UI-së, dhe ajo merr një qasje të ndryshme duke ofruar paradigma të shumëfishta programimi në një kornizë. Ndërsa përfshin aftësi hipermedia të ngjashme me HTMX, ajo nuk ju detyron t'i përdorni ato ekskluzivisht. Ju mund të përdorni modelet deklarative hypermedia, programimin funksional, ose përkufizimet JSON të drejtuara nga të dhënat - të gjitha brenda të njëjtës aplikacion. ofron dokumentacion të gjerë online dhe REPL interaktive për të provuar kornizën. Faqe WEB Filozofia qendrore: Fuqia e zgjedhjes Lightview është fleksibël nga dizajni. nuk përshkruan hypermedia si Në vend të kësaj, ju lejon të zgjidhni mjetin e duhur për pjesën specifike të aplikacionit tuaj: Vetëm Hypermedia (HTMX-style): Përdorni src dhe href për përmbajtjen e drejtuar nga serveri dhe navigimin e faqes. Funksionale (BauJS-style): Përdorni funksionet e etiketave të templates Javascript për logjikë komplekse dhe imperative. Data-Driven (JurisJS-style): Përcaktoni UIs si JSON të pastër (vDOM/oDOM) për ndërfaqe të drejtuara nga konfigurimi. AI-Safe (cDOM): Përdorni strukturat JSON me sandbox me një gjuhë ekzekutive të shprehjes (JPRX) për ndërfaqe të sigurta të përdoruesit të gjeneruara nga AI. Hypermedia & Ndërveprimi Sistemi i hypermedia të Lightview është ndërtuar në atributet standarde HTML ( të ) zgjeruar me aftësi të fuqishme. src href : Unified Attributes src: Gjet përmbajtjen për të populluar një element. Mund të jetë një URL (për pjesët e serverit) ose një selektor CSS (për pjesët lokale). href: Shkakton navigimin ose përmbajtjen e ngarkuar në ndërveprimin e përdoruesit (p.sh., <button href="/page.html">). Lightview ofron kontroll të sofistikuar mbi vendin ku futet përmbajtja duke përdorur Atributet ose Vendosje të Targeting & Location target location Vendndodhjet standarde: innerhtml, outerhtml, beforebegin, afterbegin, beforeend, afterend Shadow DOM: Lightview ka mbështetje të klasit të parë për Web Components. Ju mund të futni përmbajtje direkt në një rrënjë hije duke përdorur location="shadow" ose shufin :shadow në një objektiv (p.sh., target="#component:shadow"). Kjo e dallon atë nga HTMX, e cila fokusohet në Light DOM. & të Personalizoni veprimet HTTP direkt në HTML: Advanced Requests ( data-method data-body <!-- DELETE request --> <button href="/api/items/123" data-method="DELETE" target="#log">Delete</button> <!-- POST with body --> <button href="/api/save" data-method="POST" data-body="#form-id">Save</button> Një tjetër diferencues i fuqishëm i Lightview është aftësia për të buruar përmbajtjen nga dokumenti aktual. Ndërsa HTMX është projektuar për të marrë pjesët e hypermedia nga një server, Lightview lejon Atributi duhet të përmbajë një selektor CSS. Self-Sourced Partials (CSS Selectors as Source) src Kjo mundëson "Self-Source Partials" ku përmbajtja mund të tërhiqet nga një Një fshehurazi Kjo zvogëlon mbivendosjen e rrjetit dhe lejon zhvilluesit të grumbullojnë pjesët "offline" direkt brenda ngarkesës fillestare të faqes. <template> <div> Lightview merr qasjen se hypermedia nuk duhet të thotë pjesët e serverit, ju mund të keni një SPA të plotë hypermedia. <!-- Source content from a local template --> <div src="#tab-1-content"></div> <template id="#tab-1-content"> <h3>Tab 1</h3> <p>This content was sourced from a local template tag!</p> </template> Lightview mbështet rrotullimin automatik në një ID të caktuar të elementit kur ngarkoni përmbajtje nëpërmjet ose duke lundruar nëpër Nëse URL-ja përmban një fragment hash (p.sh., ), Lightview automatikisht do të presë që përmbajtja të ngarkohet dhe pastaj do të rrotullojë elementin e synuar në pamje. Automatic Hash Scrolling src href /docs/api.html#signals Kompensimet inteligjente: Pozicioni i rrotullimit llogaritet automatikisht për një shirit të fiksuar të navigimit nëse përcaktohet (via --site-nav-high). Shadow DOM Support: Scrolling gjithashtu punon për përmbajtjen e ngarkuar në një rrënjë hije. Ngarkimi i pjesshëm: Punon për të dy navigimin e plotë (href) dhe përditësimet e pjesshme të përmbajtjes (src). ) dhe Triggers: Lightview ofron një sistem të fuqishëm "Gating" për të kapur ngjarjet para se ato të shkaktojnë veprime. Declarative Event Gating ( lv-before Modifier: Mbështetje e integruar për throttle(ms) dhe debounce(ms). Pipelines: zinxhir portë të shumëfishta (p.sh., lv-before="click throttle(500) confirm('Are you sure?')" ). Custom Gates: Definoni funksione globale për të validuar veprimet (p.sh., validateUser()) që kthejnë false për të anulluar ngjarjen. Reaktiviteti & Shteti Lightview përfshin një sistem të integruar të reaktivitetit (Signals and State) që lejon përditësime të menjëhershme dhe rezolucion automatik të templates.Kjo e ndan atë nga HTMX, e cila mbështetet kryesisht në përgjigjet e renditura nga serveri ose gjendjen e bazuar në DOM për ndryshime. Ky sistem siguron: Rezolucioni automatik i template: ${...} tags në HTML janë përditësuar automatikisht kur statusi ndryshon. Regjistrimi i emëruar: Sinjalet dhe statuset mund të regjistrohen me emër për lidhjen e lehtë të template. Kontrolli i skemës JSON: Zbatoni integritetin e të dhënave në gjendjen reaktive duke përdorur skemën standarde JSON. Për një krahasim të detajuar teknik të gjendjes reaktive të Lightview vs. qasjen e drejtuar nga serveri të HTMX, shih në seksion. Menaxhimi Shtetëror Data-Driven & AI ndërfaqe përdoruesi Një nga tiparet më të dallueshme të Lightview është mbështetja për (d.m.th) dhe të (Përcjellë nga Data-as-UI Safe AI-Generation Lightview mund të marrë dhe rendisë UI të përcaktuar si JSON, e cila është shpesh më e lehtë për backend për të gjeneruar dhe menaxhuar sesa stringet HTML. Multiple JSON Formats vDOM: Struktura standarde e DOM virtuale. oDOM: shkurtesë "Object DOM" për UI të shkurtër të bazuar në konfigurim. /* vDOM (Explicit) */ [{ "tag": "div", "attributes": { "class": "p-4" }, "children": ["Hello"] }] /* oDOM (Concise) */ { "div": { "class": "p-4", "children": ["Hello"] } } /* cDOM / JPRX (Reactive & Safe) */ { "div": { "children": [ { "span": { "text": "Count: =/myVal" } }, { "button": { "onclick": "=/myVal++", "text": "+" } } ] } } Leja e AI për të shkruar JavaScript të papërpunuar është një rrezik i sigurisë. është një format i sandboxed JSON ku AI mund të përcaktojë strukturën dhe logjikën Përdorimi i kodit arbitrar. në këtë arkitekturë, serves as the secure logic and expression language embedded within the cDOM structure, providing the power of reactivity and logic without the security vulnerabilities of . Safe AI Generation with cDOM cDOM (Clean/Computed DOM) pa JPRX (JSON Path Reactive eXpressions) eval Siguria: Nuk ka ekzekutime eval ose arbitrare të skripteve. Logjika: Mbështet logjika si "nëse", "loop", dhe matematikë dhe mbi 100 funksione të tjera nëpërmjet një gjuhë të sigurt shprehje (JPRX). Përdorimi Case: Ideale për aplikacionet "GenUI" ku një LLM gjeneron ndërfaqen në fluturim. Përdorni cDOM kur doni dinamizmin e një UI të gjeneruar pa makthin e sigurisë të JavaScript të gjeneruar. Head-to-Head Comparison Syntax dhe API sipërfaqe : HTMX Atributet e personalizuara hx-* për të gjitha funksionalitetet Extensive attribute vocabulary ( , , , , etc.) hx-get hx-post hx-target hx-trigger Prefiksi i qëndrueshëm e bën karakteristikat e HTMX menjëherë të njohura Kurbë më e mprehtë e të mësuarit për shkak të varieteteve të atributeve : Lightview Uses standard HTML attributes ( , ) where possible src href Vokabular më të vogël Më të njohur për zhvilluesit që e dinë HTML API JavaScript për karakteristika reaktiv ose cDOM / JPRX për reaktivitet më të sigurt Kërkesa për veprim Të dy kornizat mbështesin metodat e personalizuara HTTP dhe organet e kërkesës, por me qasje të ndryshme: Përdorni atribute të dedikuara: HTMX <form hx-post="/submit" hx-swap="outerHTML"> uses standard Të dhënat për konfigurimin: Lightview data- <button href="/api/endpoint" data-method="POST" data-body="#myForm"> Save </button> Është shumë fleksibël: Lightview's data-body CSS Selector: Serializon automatikisht objektivin (p.sh., #myForm si FormData, ose vlerën e një input). JSON: Përdorni json:{"id": 1} për ngarkesat literale JSON. : Use to pull data directly from reactive state. Javascript javascript:state.get('user') : Use for plain text payloads. Text text:Hello Triggering Events has sophisticated trigger syntax: HTMX <input hx-get="/search" hx-trigger="keyup changed delay:500ms"> një qasje të ngjashme duke përdorur të gatshme: Lightview lv-before <input oninput="search(this.value)" lv-before="input debounce(500)"> Qëllimi dhe pozicionimi i përmbajtjes Të dy kornizat ofrojnë kontroll fleksibël mbi vendin ku futet përmbajtja: uses dhe Atributet e tij: HTMX hx-target hx-swap <button hx-get="/content" hx-target="#results" hx-swap="beforeend"> Load More </button> uses me suffix opsional vendndodhje ose të veçantë attribute: Lightview target location <!-- Target with suffix --> <button href="/content" target="#results:beforeend"> Load More </button> <!-- Separate location attribute --> <div src="/content" location="beforeend"></div> LightView përfshin si një opsion pozicionimi për futjen e Shadow DOM, ndërsa HTMX fokusohet në manipulimin standarde të DOM. Kjo e bën Lightview më të përshtatshëm për arkitekturën e Web Components. Key difference shadow Content Sourcing (Server vs. Local) : HTMX Projektuar për Hypermedia Server-Driven (HDA) Sources must be URLs that return hypermedia (HTML) responses Kërkon një kërkesë të rrjetit për çdo përditësim të pjesshëm : Lightview Multi-source flexibility Sources can be URLs OR CSS selectors Mundëson "Pjesët e vetë burimit" ku përmbajtja nxirret nga etiketat lokale <template> ose elemente të tjera DOM Allows bundling common UI fragments to reduce initial network waterfall Tranzicionet dhe animacionet mbështet animacionet e klasit të parë me klasat e fazës së këmbimit, treguesit e statusit të kërkesës, modifikuesit e kohës dhe integrimi i View Transitions API - duke lejuar aplikacionet e hypermedia për të arritur qetësi të ngjashme me SPA. HTMX currently handles transitions through standard CSS transitions/animations and component lifecycle hooks without built-in swap phase abstractions. Future versions may include built-in swap phase abstractions. Lightview State Management Kjo është ajo ku kornizat ndryshojnë më së shumti në qasjen e tyre arkitektonike: HTMX: Shteti në anën e serverit HTMX is purely hypermedia-focused. Client-side state is minimal, typically handled through: Server Session: Shteti mbahet në bazën e të dhënave ose në sesionin e backend. Fushat e fshehura të formularit: kalimi i gjendjes përpara dhe prapa në kërkesa. Atributet DOM: Ruajtja e statusit të thjeshtë në atributet e të dhënave *. Alpine.js Integrimi: Për logjikën komplekse të klientit, zhvilluesit e HTMX shpesh arrijnë në Alpine.js ose biblioteka të ngjashme të lehta. Lightview: Client-Side Reactivity Lightview includes a complete, fine-grained reactivity system inspired by SolidJS. This makes it a multi-paradigm framework that can handle state independently of the server. : Kur HTML është kapur nëpërmjet or , Lightview zgjidh automatikisht shkronjat e template Kjo lejon që pjesët e renditura nga serveri të bëhen menjëherë reaktive në klient pa skripte hidratuese. Automatic Template Resolution src href ${...} Signalet dhe shtetet mund të regjistrohen me emër në mënyrë që ato të jenë në dispozicion për zgjidhjen e template në nivel global: Named Registration // Registering a reactive signal by name const count = Lightview.signal(0, 'count'); // Registering a deeply reactive state by name const user = Lightview.state({ name: 'Alice', age: 30 }, 'user'); <!-- Loaded content automatically updates when 'user' state changes --> <h1>Welcome, ${state.get('user').name}</h1> : Lightview states can be optionally enforced by JSON schemas, providing data integrity for complex objects: JSON Schema Validation const user = Lightview.state({ name: 'Alice', age: 30 }, 'user', { schema: { type: 'object', properties: { name: { type: 'string' }, age: { type: 'number' } }, required: ['name', 'age'] } }); : Reactive Primitives sinjal (vlerë): Për vlera primitive. State (objekt): Për vëzhgimin e thellë të objekteve dhe array. Efekti (fn): Për të drejtuar efektet anësore kur ndryshojnë varësitë. Kjo diferencë arkitektonike e bën Lightview më shumë një kornizë të plotë të aplikacioneve, ndërsa HTMX mbetet një mjet i dedikuar për përmirësimin e hypermedia. Përditësime në kohë reale ka mbështetje të klasit të parë për WebSockets dhe Server-Sent Events: HTMX <div hx-ext="sse" sse-connect="/updates" sse-swap="message"> nuk ka mbështetje të ndërtuar për WebSocket/SSE (si në versionin aktual), edhe pse mund të shtohet përmes JavaScript standarde. Lightview Sigurisë relies on standard web security practices: HTMX Politika e origjinës së njëjtë Mbështetje CSRF token nëpërmjet hx-headers Politika e sigurisë së përmbajtjes Përfshijnë sigurinë nga default: Lightview Same-domain policy enforced automatically Bllokimi i protokollit të rrezikshëm (javascript:, të dhënat:) Fjalë kyçe validation hooks Përmirësim progresiv Përmirësimi i përparimit progresiv: HTMX <!-- Works without JS, enhanced with JS --> <body hx-boost="true"> <a href="/page">Link</a> <form action="/submit" method="post"> Me përjashtim të mungesës aktuale të mbështetjes së ndërtuar për websockets ose ngjarjet anësore të serverit, qasja e Lightview është po aq e aftë për përmirësim progresiv. dhe are supported for every element, there is no need for anything like . Lightview href src hx-boost Component Architecture nuk ka një model komponent – përmirëson HTML standard. HTMX Përfshijnë : Lightview Komponentë Single-file Template components Import / eksport i variablave ndërmjet komponentëve Sandboxed komponentë të largët Ai gjithashtu ofron mbi për modelet e përbashkëta të UI, p.sh. të të të , etc. 50 përbërës të integruar ngarkesës Kartën Chartë Dragoi Përdorimi i rastit Kur të zgjidhni HTMX Shtimi i interaktivitetit në aplikacionet e renditura nga serveri: HTMX përparon në përmirësimin progresiv të aplikacioneve tradicionale të uebit Njohuri e ekipit me renditjen në anën e serverit: Nëse ekipi juaj është i rehatshëm me Rails, Django, Laravel, etj. Përmirësimi progresiv është i rëndësishëm: HTMX degradohet në mënyrë elegante kur JavaScript është i çaktivizuar Funksionet në kohë reale: Mbështetje e ndërtuar për WebSocket/SSE Sjellje e thjeshtë dhe e parashikueshme: fokusi i vetëm i HTMX e bën të lehtë arsyetimin Kur të zgjidhni LightView Fleksibiliteti i shumë paradigmave: Kur dëshironi të kombinoni programimin funksional, UI-në e bazuar në JSON dhe hypermedia në një bazë kode UI të sigurta të gjeneruara nga AI: Përdorimi i cDOM për ndërfaqe të sigurta të gjeneruara nga AI Arkitektura e bazuar në komponentë: Kur dëshironi komponentë të ripërdorshëm pa një hap të ndërtimit Reaktiviteti në anën e klientit: Aplikacionet që kanë nevojë për përditësime reaktivë me grurë të hollë Shadow DOM/Web Components: Mbështetje e integruar për encapsulation Qasja hibrid: Përzieni modelet e hipermediave me programimin reaktiv Pjesëmarrësit e vetë burimit: Kur dëshironi të përdorni modelet e hipermediave, por buroni disa përmbajtje lokalisht nga DOM për të zvogëluar kërkesat e rrjetit ose për të siguruar seksione të gatshme offline Performance Considerations Të dy kornizat janë të performancës, por optimizojnë gjëra të ndryshme: : HTMX Optimizimi i fokusuar në rrjet (reduktimi i udhëtimeve të rrumbullakëta) Serveri bën ngritjen e rëndë Minimal client-side processing History and caching built-in : Lightview Reaktiviteti i grimcave të hollë (vetëm përditësimet ndryshuan nyjet) Asnjë virtual DOM diffing mbi kokë Mund të zvogëlojë kërkesat e rrjetit me statusin e klientit Monitorimi i varësisë optimizon rendimentet Përvojë zhvilluese Kurva e mësimit : HTMX Konceptualisht e thjeshtë: HTML + atributet Extensive documentation and examples Komuniteti i madh dhe ekosistemi "Hypermedia Systems" libër si një udhëzues i plotë : Lightview Modelet e shumta mendore (hipermedia + reaktiviteti + funksionale) Dokumentacion i plotë me më shumë se 40 komponentë dhe shembuj të gjerë Komuniteti më i vogël Kërkon të kuptojë paradigma të shumëfishta të programimit Debugging : HTMX Browser DevTools punojnë natyrshëm Regjistrimi i shkëlqyer dhe ngjarjet për debugging Kërkesa / përgjigje inspektimi i drejtpërdrejtë : Lightview Ndjekja e varësisë mund të jetë më e vështirë për të debug Përditësimet e reagimit mund të jenë më pak të dukshme Modaliteti i ndërtuar i zhvillimit ndihmon Ekosistemi dhe Adoptimi : HTMX Ekosistemi i pjekur me plugins dhe zgjerime Mbështetja e bibliotekës në anën e serverit në të gjitha gjuhët kryesore Një komunitet i madh dhe aktiv Përdoret në prodhim nga shumë kompani Pjesë e lëvizjes më të gjerë të hypermedia : Lightview Smaller but growing ecosystem Framework për backend (Watchlight) Më pak integrime të palëve të treta Më shumë në skenë Madhësia HTMX të HTMX minified dhe gzipped është 29KB Dritë Lightview mund të ngarkohet si tre skedarë të veçantë: // Core: 6KB minimized and gzipped // Supports: tagged functions, signals, vDOM format <script src="lightview.js"></script> // X: 14KB minimized and gzipped // Adds: hypermedia, html template literal support, oDOM support <script src="lightview-x.js"></script> // CDOM: 25KB minimized and gzipped // Adds: cDOM, JPRX (not required for hypermedia) <script src="lightview-cdom.js"></script> Madhësia e kombinuar e nevojshme për të imituar shumë nga funksionaliteti i HTMX është 20KB, dhe kjo ju merr shumë fuqi të tjera gjithashtu. Krahasimi i kodit: Ndërtimi i të njëjtës veçori Le të ndërtojmë një funksion kërkimi aktiv me të dy kornizat: Versioni HTMX <input type="search" name="q" hx-get="/search" hx-trigger="keyup changed delay:300ms" hx-target="#results" hx-indicator="#spinner"> <img id="spinner" class="htmx-indicator" src="/spinner.gif"> <div id="results"></div> Përshkrimi Lightview <input type="search" id="search-input" name="q" href="/search" oninput="LightviewX.request(this)" lv-before="input debounce(300)" target="#results"> <div id="results"></div> : How it works href="/search": Pika e fundit për të gjetur. oninput="LightviewX.request(this)": Fillon motorin e hipermediave të Lightview në çdo klikim të tastierës. Kërkohet vetëm për elementet e tipit të hyrjes. Përpunimi i klikimeve është automatik në elementet jo të hyrjes. lv-before="input debounce(300)": Deklarativisht debounces hyrjen me 300ms, duke zëvendësuar nevojën për sintax kompleks trigger. target="#results": drejton përgjigjen HTML ose JSON në rezultatet div. Integrimi me Backend Frameworks punon me çdo teknologji server-side që mund të gjenerojë HTML. HTMX punon me çdo backend JSON ose HTML-generating – ajo nuk dikton arkitekturën server-side. Lightview Rruga e emigracionit Nga SPA në HTMX HTMX ofron një rrugë migrimi gradual: Filloni me hx-boost në formularët dhe lidhjet ekzistuese Shtimi i ndërveprimeve hipermedia më të sofistikuara Zëvendësoni rrugët SPA me hypermedia endpoints Nga SPA në Lightview Lightview gjithashtu ofron një rrugë graduale: Filloni duke kthyer vetëm disa elemente në hypermedia Shtimi i ndërveprimeve hipermedia më të sofistikuara Evolve functional components to tagged functions Përfshirja e emrave të sinjaleve dhe statusit Shtoni gjenerimin dinamik të AI me cDOM / JPRX Konkludimi Të dy HTMX dhe Lightview përfaqësojnë alternativa bindëse, por shërbejnë nevoja të ndryshme: : Choose HTMX if you want Arkitekturë e pastër e drejtuar nga hipermedia Kompleksiteti minimal i klientit Përmirësim progresiv Zgjidhje e provuar, e testuar në betejë Komuniteti i fortë dhe ekosistemi : Choose Lightview if you want Fleksibiliteti i shumë paradigmave (funksional, JSON, hypermedia) UI të sigurta të gjeneruara nga AI me cDOM/JPRX Arkitekturë komponentë pa mjete ndërtimi Reaktiviteti i grurit të hollë Mbështetje për Shadow DOM/Web Component Liria për të zgjedhur stilin tuaj të programimit Vetë burimi i partialeve lokale nëpërmjet selektorëve CSS Dallimi kryesor: HTMX është laser-fokusuar në hypermedia dhe e bën atë jashtëzakonisht mirë. midis disa paradigmave - nuk ju detyron të zgjidhni hypermedia për gjithçka. Një opsion HTMX qëndron besnik ndaj vizionit hypermedia me fokus lazer, ndërsa Lightview përqafon fleksibilitetin, duke ju lejuar të përdorni programimin funksional (si BauJS), përfaqësimin JSON (si JurisJS), ose modelet hypermedia sipas kërkesave të rastit tuaj të përdorimit. Resources HTMX të Faqja zyrtare: htmx.org Libri: "Sistemet e Hypermedia" në hypermedia.systems Discord: Diskutimi aktiv i komunitetit Dritë Faqja zyrtare: lightview.dev Artikulli mbi gjenerimin e sigurt të AI UI: Si të ndërtoni një kompjuter të gjeneruar nga AI pa JavaScript të personalizuar
