Johdatus Hypermedia-renessanssi on täydessä vauhdissa. Vuosien SPA-herruuden jälkeen kehittäjät löytävät uudelleen palvelinpohjaisten arkkitehtuurien voiman, jotka hyödyntävät HTML: tä sovelluksen tilan moottorina. Kehys, joka johtaa tätä kuormaa, HTMX, keskittyy yksinomaan hypermediaan. Vaihtoehto, Lightview, ei lukitse sinua hypermedia-ainoisiin kuvioihin. Toisin kuin HTMX: n keskittynyt hypermedia-lähestymistapa, Lightview on moniparadigmainen kehys, joka tukee ja hypermedia-malleja, toiminnallista ohjelmointia mallien tunnisteilla, kuten BauJS [ ], ja JSON-edustus (kuten JurisJS [ ]), - kaikki saman kehyksen sisällä. Tämä artikkeli tarjoaa teknisen vertailu HTMX ja Lightview hypermedia ominaisuuksia auttaa sinua valitsemaan oikea työkalu projektisi. https://github.com/grucloud/bau https://jurisjs.com Saatat sanoa tässä vaiheessa: "Odota sekunti, HTMX: n pitäisi yksinkertaistaa kehitystä, miksi haluan monien koodausparadigmien monimutkaisuuden?" Et ehkä ole, Lightviewin kohde on antaa sinulle valinnan, voit rakentaa koko sovelluksesi hypermediaa käyttäen, tai voit rakentaa koko sovelluksesi toiminnallisella ohjelmoinnilla, tai voit rakentaa koko sovelluksesi JSON-edustuksella, tai voit rakentaa koko sovelluksesi kaikkien kolmen yhdistelmällä. Kaikki riippuu siitä, mitä tarvitset. Ehkä sovelluksesi alkaa hypermediaa, mutta kasvun myötä huomaat, että sinun on käytettävä toiminnallista ohjelmointia rakentaa monimutkainen liiketoiminnan logiikka offline-tilassa ensimmäisessä tilassa, tai huomaat, että sinun on käytettävä JSON-ed Mikä on hypermedia? Ennen kuin sukellamme vertailuun, selvitämme, mitä tarkoitamme hypermedia. Hypermedia viittaa sisältöön, joka sisältää linkkejä ja ohjausobjekteja navigointiin liittyviin resursseihin. Perinteinen HTML tarjoaa tämän linkkien ja lomakkeiden kautta, mutta nykyaikaiset hypermedia-kehykset laajentavat nämä kyvyt mihin tahansa elementtiin, mikä mahdollistaa rikkaamman vuorovaikutuksen. Mikä tahansa elementti voi toimia linkkinä ja mikä tahansa elementti voi määrittää lähteen, josta se haluaa saada sisällönsä. . Htmlz HTMX ja Lightview: HTML:n täydentäminen hypertekstinä HTMX, luonut Carson Gross seuraajana intercooler.js, tavoitteena on "täydellinen HTML hypertekstinä." Se laajentaa standardin HTML attribuutteja tarjoamaan AJAX, CSS Transitions, WebSockets ja Server-Sent Events suoraan merkinnöissä. Lightview, jonka on luonut tämän kirjoittajan Simon Blackwell, on suunniteltu yhteistyössä LLM: n kanssa, ei ainoastaan täydentämään HTML: tä hypertekstinä, vaan myös tarjoamaan kannettavampaa, ilmoittavaa lähestymistapaa sisällön toimittamiseen palvelimelle, vaikka hypermedia-sisältö voi silti olla HTML kuten HTMX, se voi myös olla JSON virtuaalisia DOM-osoitteita, jotka edustavat HTML: tä tai alkuperäisiä käyttöliittymän komponentteja. Ydinfilosofia HTMX käsittää Hypermedia-Driven Application (HDA) -arkkitehtuurin, jolle on ominaista kaksi rajoitusta: Deklaratiivinen syntaksi: Käyttää HTML-sisäänrakennettuja ominaisuuksia imperatiivisten skriptien sijaan Hypermedia-vasteet: Palvelin vastaa HTML:llä, ei JSON:llä Tämä lähestymistapa säilyttää serverin monimutkaisuuden, kun taas asiakas pysyy yksinkertaisena ja deklaratiivisena. Tärkeimmät ominaisuudet : HTMX sallii minkä tahansa elementin lähettää HTTP-pyyntöjä käyttämällä tavanomaisia verbejä: HTTP Method Support <button hx-delete="/contacts/1" hx-target="#contact-list" hx-confirm="Are you sure?"> Delete Contact </button> • The attribuutti määrittää, mihin palvelimen vastaukset on lisättävä CSS-valikoimien avulla: Flexible Targeting hx-target <input type="text" hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results"> : Mukautettu laukaisee ohjauksen, kun tulipaloa pyydetään: Event Triggers <div hx-get="/news" hx-trigger="every 30s"> <!-- Auto-refreshing content --> </div> Useita vaihtoehtoja siitä, miten sisältö korvaa olemassa olevan DOM:n: Swap Strategies Sisäinen HTML (Default) Ulkopuolinen ennen alkua, jälkeen alkua, ennen loppua Poista, ei mitään : HTMX tarjoaa sisäänrakennetun tuen sujuville käyttöliittymän siirtymille vakaiden elementtitietojen, vaihtovaiheiden luokkien kautta ( ja ja ) pyytää valtion indikaattoreita ( muuttujat muuttujat ( ja Tämä mahdollistaa hypermedia-pohjaisten sovellusten saavuttamisen SPA-tyyppiseen sujuvuuteen ilman mukautettua JavaScriptia. CSS Transitions and Animations htmx-swapping htmx-settling htmx-added htmx-request swap:1s settle:1s • HTMX Voit lisätä olemassa olevia linkkejä ja lomakkeita: Progressive Enhancement hx-boost <body hx-boost="true"> <!-- All links and forms now use AJAX --> </body> Natiivinen tuki reaaliaikaisille päivityksille: WebSockets & SSE <div hx-ws="connect:/chatroom"> <div hx-ws="send"> <input name="message"> </div> </div> Dependencies HTMX:llä ei ole riippuvuuksia, joten se on ihanteellinen hypermedia-ominaisuuksien lisäämiseksi olemassa oleviin sovelluksiin lisäämättä monimutkaisuutta. Lightview: Moniparadigmainen kehys Hypermedia-tuella Lightviewilla on myös nolla riippuvuutta, ellei käytä valmiiksi rakennettuja käyttöliittymän komponentteja, ja se käyttää erilaista lähestymistapaa tarjoamalla useita ohjelmointiparadigmejä yhdessä kehyksessä. Vaikka se sisältää hypermediaominaisuuksia, jotka ovat samankaltaisia kuin HTMX, se ei velvoita sinua käyttämään niitä yksinomaan. Voit käyttää deklaratiivisia hypermedia-malleja, toiminnallista ohjelmointia tai datapohjaisia JSON-määritelmiä - kaikki samassa sovelluksessa. tarjoaa laajan online-dokumentaation ja interaktiivisia REPL-tiedostoja kehyksen testaamiseksi. Verkkosivut Ydinfilosofia: Valinnan voima Lightview on joustava muotoilu. Se ei määritä hypermediaa Sen sijaan sen avulla voit valita oikean työkalun sovelluksen tiettyyn osaan: Vain Hypermedia (HTMX-tyylinen): Käytä src:tä ja href:tä palvelinpohjaiseen sisältöön ja sivun navigointiin. Toiminnallinen (BauJS-tyylinen): Käytä JavaScript-mallin tunnistefunktioita monimutkaiseen, imperatiiviseen logiikkaan. Data-Driven (JurisJS-tyylinen): Määritä käyttöliittymät puhtaiksi JSON-tiedostoiksi (vDOM/oDOM) konfig-pohjaisille rajapinnoille. AI-Safe (cDOM): Käytä hiekkalaatikkojen JSON-rakenteita, joissa on suoritettava ilmaisun kieli (JPRX) turvallisten, AI: n tuottamien käyttöliittymien varmistamiseksi. 1. Hypermedia ja vuorovaikutus HTTP:n käyttöjärjestelmä on rakennettu standardin HTML-ominaisuuksiin ( ja ) laajennettu voimakkailla kyvyillä. src href : Unified Attributes src: Kerää sisältöä elementin täyttämiseksi.Se voi olla URL (palvelinpuolisten osien osalta) tai CSS-valitsija (paikallisten osien osalta). href: käynnistää navigoinnin tai sisällön lataamisen käyttäjän vuorovaikutuksessa (esim. <button href="/page.html">). Lightview tarjoaa hienostuneen hallinnan siitä, mihin sisältöä lisätään Ominaisuus tai Säädettävä Targeting & Location target location Tyypilliset sijainnit: innerhtml, outerhtml, beforebegin, afterbegin, beforeend, afterend Shadow DOM: Lightview on ensiluokkainen tuki Web Components. Voit lisätä sisältöä suoraan varjojuuriin käyttämällä location="shadow" tai :shadow-lisäosa kohde (esim. target="#component:shadow"). Tämä erottaa sen HTMX:stä, joka keskittyy Light DOM. ja Muokkaa HTTP-toimintoja suoraan HTML: ssä: 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> : Toinen tehokas Lightview-erottelija on kyky lähteä sisältöä nykyisestä asiakirjasta. Vaikka HTMX on suunniteltu hakemaan hypermedia-osia palvelimelta, Lightview mahdollistaa Ominaisuus sisältää CSS-valitsijan. Self-Sourced Partials (CSS Selectors as Source) src Tämä mahdollistaa "Self-Sourced Partials", jossa sisältöä voidaan vetää ja piilossa Tämä vähentää verkon ylijäämää ja antaa kehittäjille mahdollisuuden pakata "offline" osia suoraan alkuperäisen sivun kuorman sisällä. <template> <div> Lightview ottaa lähestymistavan, että hypermedia ei tarvitse tarkoittaa palvelinpuolisia osia, voit olla täysi hypermedia SPA. <!-- 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 tukee automaattista vierittämistä tiettyyn elementti-ID:hen, kun sisältöä ladataan tai navigoimalla Jos URL sisältää hash-fragmentin (esim. ), Lightview odottaa automaattisesti, että sisältö ladataan, ja selaa sitten kohdeelementtiä näkymään. Automatic Hash Scrolling src href /docs/api.html#signals : The scroll position automatically accounts for a fixed navigation bar if defined (via ). Smart Offsets --site-nav-height Shadow DOM -tuki: Pyörittäminen toimii myös Shadow Rootissa ladatussa sisällössä. Osittainen lataus: Toimii sekä täyden navigoinnin (href) että osittaisten sisältöpäivitysten (src) kanssa. ) ja Triggers: Lightview tarjoaa tehokkaan "Gating" -järjestelmän, joka estää tapahtumat ennen kuin ne laukaisevat toimia. Declarative Event Gating ( lv-before Muokkaajat: Sisäänrakennettu tuki throttle(ms) ja debounce(ms) Putkilinjat: Ketju useita portteja (esim. lv-before="click throttle(500) confirm('Oletko varma?')" ). Mukautetut portit: Määrittele globaalit toiminnot tapahtuman peruuttamiseksi (esim. validoikäyttäjä()) joka palauttaa väärän. Reaktiivisuus & valtio Lightview sisältää sisäänrakennetun, hienovaraisen reaktiivisuusjärjestelmän (Signals and State), joka mahdollistaa välittömät päivitykset ja automaattisen mallin resoluution. Tämä erottaa sen HTMX:stä, joka perustuu ensisijaisesti palvelimen antamiin vastauksiin tai DOM-pohjaiseen tilaan muutoksiin. Tämä järjestelmä tarjoaa: Automaattinen mallin resoluutio: ${...}-tunnisteet HTML:ssä päivitetään automaattisesti, kun tilaa muutetaan. Nimetty rekisteröinti: Signaalit ja tilat voidaan rekisteröidä nimellä mallin sitomisen helpottamiseksi. JSON Schema Control: Vahvistaa tietojen eheyttä reaktiivisessa tilassa käyttämällä standardia JSON Schema. Yksityiskohtainen tekninen vertailu Lightviewin reaktiiviseen tilaan verrattuna HTMX:n palvelinpohjaiseen lähestymistapaan ja osastoon. valtionhallinnon 3. Data-Driven & AI-käyttöliittymät Yksi LightVien erityispiirteistä on sen tuki (vDOM, oDOM) ja (Käyttöön on Data-as-UI Safe AI-Generation Lightview voi poimia ja luoda JSON-määritellyn käyttöliittymän, joka on usein helpompi luoda ja hallita kuin HTML-sarjoja. Multiple JSON Formats vDOM: Virtuaalinen vDOM on vakiomuotoinen rakenne. oDOM: ”Object DOM” lyhenne tiiviille konfig-pohjaisille käyttöliittymille. /* 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": "+" } } ] } } : AI: n kirjoittaminen raaka JavaScript on turvallisuusriski. on hiekkalaatikkoinen JSON-muoto, jossa AI voi määritellä rakenteen ja logiikan Arkkitehtuuria käytetään tässä rakenteessa, toimii turvallisena logiikan ja ilmaisun kielenä upotettuna cDOM-rakenteeseen, joka tarjoaa reaktiivisuuden ja logiikan voiman ilman turvallisuushaavoittuvuuksia . Safe AI Generation with cDOM cDOM (Clean/Computed DOM) ilman JPRX (JSON Path Reactive eXpressions) eval Turvallisuus: Ei validoituja tai mielivaltaisia skriptejä. Logiikka: Tukee logiikkaa, kuten "jos", "loop" ja matematiikka sekä yli 100 muuta toimintoa turvallisen ilmaisun kielen (JPRX) kautta. Käyttötapa: Ihanteellinen "GenUI" -sovelluksiin, joissa LLM luo rajapinnan. Käytä cDOMia, kun haluat luodun käyttöliittymän dynamiikan ilman luodun JavaScriptin turvallisuuden painajaista. Head-to-Head vertailu Syntax ja API Surface : HTMX Custom attributes for all functionality hx-* Laaja ominaisuuksien sanasto (hx-get, hx-post, hx-target, hx-trigger jne.) Johdonmukainen etuliite tekee HTMX-ominaisuuksista välittömästi tunnistettavissa Kiipeämpi oppimiskäyrä ominaisuuksien vaihtelun vuoksi : Lightview Käyttää tavanomaisia HTML-ominaisuuksia (src, href) mahdollisuuksien mukaan Smaller attribute vocabulary Lisää tuttuja kehittäjille, jotka tuntevat HTML JavaScript API for reactive features or cDOM/JPRX for safer reactivity Toiminnan pyytäminen Molemmat kehykset tukevat mukautettuja HTTP-menetelmiä ja pyyntöjä, mutta eri lähestymistavoilla: Käytä omistettuja ominaisuuksia: HTMX <form hx-post="/submit" hx-swap="outerHTML"> uses standard attributes for configuration: Lightview data- <button href="/api/endpoint" data-method="POST" data-body="#myForm"> Save </button> Se on erittäin joustava: Lightview's data-body : Automatically serializes the target (e.g., as , or an input's ). CSS Selector #myForm FormData value JSON: Käytä json:{"id": 1} kirjaimellisiin JSON-arvoihin. JavaScript: Käytä javascript:state.get ('käyttäjä') vetää tietoja suoraan reaktiivisesta tilasta. : Use for plain text payloads. Text text:Hello Triggerin tapahtumat on kehittynyt trigger syntax: HTMX <input hx-get="/search" hx-trigger="keyup changed delay:500ms"> Samankaltaista lähestymistapaa käytetään Kätilö : Lightview lv-before <input oninput="search(this.value)" lv-before="input debounce(500)"> Kohdistus ja sisällön sijainti Molemmat kehykset tarjoavat joustavan hallinnan siitä, mihin sisältö lisätään: Käytä ja Ominaisuudet ovat: HTMX hx-target hx-swap <button hx-get="/content" hx-target="#results" hx-swap="beforeend"> Load More </button> Käytä valinnaisella sijaintilisällä tai erillisellä Ominaisuudet : 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 sisältää as a positioning option for Shadow DOM insertion, while HTMX focuses on standard DOM manipulation. This makes Lightview more suitable for Web Components architecture. Key difference shadow Sisällönlähde (Server vs. Local) : HTMX Suunniteltu palvelimille suunnattuun hypermediaan (HDA) Lähteiden on oltava URL-osoitteita, jotka palauttavat hypermedia (HTML) vastauksia Requires a network request for every partial update : Lightview Joustavuus useita lähteitä Lähteet voivat olla URL-osoitteita tai CSS-valitsijoita Enables "Self-Sourced Partials" where content is pulled from local tags or other DOM elements <template> Allows bundling common UI fragments to reduce initial network waterfall Transitions and Animations has first-class animation support with swap phase classes, request state indicators, timing modifiers, and View Transitions API integration—allowing hypermedia apps to achieve SPA-like smoothness. HTMX käsittelee tällä hetkellä siirtymiä standardin CSS-siirtymien/animaatioiden ja komponenttien elinkaaren kiinnikkeiden kautta ilman sisäänrakennettuja swap-vaiheen abstraktioita. Lightview valtionhallinnon Tässä on, missä kehykset eroavat merkittävästi niiden arkkitehtoninen lähestymistapa: HTMX: Server-Side State HTMX on puhtaasti hypermedia-keskittynyt. Asiakaspuolinen tila on minimaalinen, tavallisesti käsitelty: Server-istunto: tila säilytetään backend-tietokannassa tai istunnossa. : passing state back and forth in requests. Hidden Form Fields DOM-ominaisuudet: tallentaa yksinkertaisen tilan data-* -ominaisuuksiin. Alpine.js -integraatio: Monimutkaisen asiakaspuolisen logiikan vuoksi HTMX-kehittäjät etsivät usein Alpine.js:ää tai vastaavia kevyitä kirjastoja. Lightview: Asiakaspuolinen reaktiivisuus 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. Kun HTML:ää käytetään tai , Lightview automatically resolves template literals Tämä mahdollistaa, että palvelimen antamat osat reagoivat välittömästi asiakkaalle ilman hydraatioskriptejä. Automatic Template Resolution src href ${...} : Signals and states can be registered by name so they are available for template resolution globally: 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-tilat voidaan valinnaisesti panna täytäntöön JSON-kaavioilla, jotka tarjoavat tietojen eheyden monimutkaisille objekteille: 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 signaali (arvo) primitiivisten arvojen osalta. : For deep observation of objects and arrays. state(object) : To run side effects when dependencies change. effect(fn) Tämä arkkitehtoninen ero tekee LightViewista enemmän täydellisen sovelluskehyksen, kun taas HTMX on edelleen omistettu hypermedia-parannustyökalu. reaaliaikaiset päivitykset has first-class support for WebSockets and Server-Sent Events: HTMX <div hx-ext="sse" sse-connect="/updates" sse-swap="message"> doesn't have built-in WebSocket/SSE support (as of the current version), though it can be added through standard JavaScript. Lightview Turvallisuus perustuu tavanomaisiin verkkoturvallisuuskäytäntöihin: HTMX Saman alkuperän politiikka CSRF-tunnisteiden tuki hx-otsikoiden kautta Content Security Policy compatibility Sisältää turvallisuuden oletusarvoisesti: Lightview Same-domain policy enforced automatically Vaarallinen protokollan estäminen (javascript: data:) Muokattavissa Validation Hooks Edistyksellistä parantamista Edistymistä edistetään asteittain: HTMX <!-- Works without JS, enhanced with JS --> <body hx-boost="true"> <a href="/page">Link</a> <form action="/submit" method="post"> Lukuun ottamatta sitä, että tällä hetkellä puuttuu sisäänrakennettu tuki web-socketille tai palvelimen sivutapahtumille, Lightviewin lähestymistapa on yhtä kykenevä asteittaiseen parantamiseen. ja jokaiseen elementtiin, ei ole tarvetta mihinkään sellaiseen . Lightview href src hx-boost Arkkitehtuurin komponentit ei ole komponenttimallia – se parantaa standardia HTML. HTMX Sisältää : Lightview Yksittäiset tiedostokomponentit Temppelin osat Komponenttien välisten muuttujien tuonti / vienti Sandboxed etäkomponentit Se tarjoaa myös Yleisimmät käyttöliittymän mallit, esimerkiksi ja ja ja ja niin edelleen 50 sisäänrakennettua komponenttia ladattava kortti Kartta Lohikäärme Käytä tapauksia Milloin valita HTMX Interaktiivisuuden lisääminen palvelimen antamiin sovelluksiin: HTMX parantaa perinteisiä web-sovelluksia asteittain : If your team is comfortable with Rails, Django, Laravel, etc. Team familiarity with server-side rendering : HTMX degrades gracefully when JavaScript is disabled Progressive enhancement is critical Reaaliaikaiset ominaisuudet: Sisäänrakennettu WebSocket/SSE-tuki Yksinkertainen, ennustettavissa oleva käyttäytyminen: HTMX:n yksisuuntainen keskittyminen helpottaa Milloin valita Lightview Usean paradigman joustavuus: Kun haluat yhdistää toiminnallisen ohjelmoinnin, JSON-pohjaisen käyttöliittymän ja hypermediaa yhteen kooditietokantaan Turvalliset AI-generoidut käyttöliittymät: cDOM:n käyttäminen turvallisiin, hiekkalaatikkoihin perustuviin AI-generoituihin rajapintoihin : When you want reusable components without a build step Component-based architecture : Applications needing fine-grained reactive updates Client-side reactivity Shadow DOM/Web Components: Sisäänrakennettu tuki kapseloinnille Hybridi lähestymistapa: sekoita hypermedia-malleja reaktiivisella ohjelmoinnilla Self-Source Partials: Kun haluat käyttää hypermedia-malleja, mutta lähteä joitakin sisältöä paikallisesti DOM: stä verkkopyyntöjen vähentämiseksi tai offline-valmiiden osien tarjoamiseksi Suorituskykyä koskevat näkökohdat Molemmat kehykset ovat suorituskykyisiä, mutta optimoivat eri asioita: : HTMX Verkkopohjainen optimointi (vähentää kierroksia) Server tekee raskaan noston Minimaalinen asiakkaan käsittely Historia ja caching sisäänrakennettu : Lightview Fine-grained reactivity (vain päivitykset muuttivat solmuja) Ei virtuaalinen DOM diffing overhead Voit vähentää verkkopyyntöjä asiakassuuntaisella tilalla Riippuvuuden seuranta optimoi suorituskyvyn Kehittäjän kokemus Oppimiskäyrä : HTMX Konsepti yksinkertainen: HTML + attribuutit Laaja dokumentaatio ja esimerkit Suuri yhteisö ja ekosysteemi "Hypermedia Systems" kirja kattavana oppaana : Lightview Useita henkisiä malleja (hypermedia + reaktiivisuus + toiminnallinen) Comprehensive documentation with 40+ components and extensive examples Pienempi yhteisö Tarvitaan monenlaisten ohjelmointiparadigmien ymmärtäminen Debuggaaminen : HTMX Browser DevTools toimii luonnollisesti Erinomainen lokalisointi ja tapahtumat debuggaamiseen Pyyntö / vastaus tarkastus suora : Lightview Riippuvuuden jäljittäminen voi olla vaikeampaa Reaktiiviset päivitykset voivat olla vähemmän ilmeisiä Built-in development mode helps Ekosysteemi ja adoptio : HTMX Kypsä ekosysteemi plugineilla ja laajennuksilla Palvelinpuoleisen kirjaston tuki kaikilla tärkeimmillä kielillä Laaja ja aktiivinen yhteisö Käytetään monien yritysten tuotannossa Osa laajempaa hypermedia-liikettä : Lightview Pienempi mutta kasvava ekosysteemi Companion Backend Framework (Watchlight) Näytä tarkat tiedot Vähemmän kolmansien osapuolten integraatiota Uutta näyttämölle koon mmx HTMX minified ja gzipped on 29KB Lightview Lightview voidaan ladata kolmena erillisenä tiedostona: // 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> Yhdistetty koko, joka vaaditaan emuloimaan suurta osaa HTMX: n toiminnallisuudesta, on 20 KB, ja tämä saa myös paljon muuta tehoa. Vertaile koodia: Rakenna sama ominaisuus Rakennetaan aktiivinen hakutoiminto molemmilla kehyksillä: HTMLX versio <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> Lightview versio <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": Päätepiste, joka on otettava vastaan. oninput="LightviewX.request(this)": Laukaisee Lightview-hypermedia-moottorin jokaisella näppäimistöllä. Vaaditaan vain syöttötyypin elementtejä varten. Klikkausprosessointi on automaattista ei-syöttöelementtejä varten. lv-before="input debounce(300)": Declaratively debounces input by 300ms, korvaamalla tarve monimutkainen laukaisin syntaksi. target="#results": Ohjaa HTML- tai JSON-vastauksen tulosten div. Yhteensopivuus Backend Frameworksin kanssa toimii minkä tahansa palvelinpuolisen tekniikan kanssa, joka voi luoda HTML: n. HTMX toimii minkä tahansa JSON- tai HTML-generoivan taustaosan kanssa – se ei määrää palvelinpuolista arkkitehtuuria. Lightview Maahanmuuttotie SPA:stä HTMX:ään HTMX tarjoaa asteittaisen siirtymäpolun: Aloita hx-boost olemassa oleviin lomakkeisiin ja linkkeihin Lisää yhä kehittyneempiä hypermedia-yhteyksiä Korvaa SPA-reitit hypermedia-päätteillä SPA:stä LightViewiin Lightview tarjoaa myös asteittaisen polun: Aloita muuttamalla vain muutama elementti hypermediaan Lisää yhä kehittyneempiä hypermedia-yhteyksiä Kehitä toiminnallisia komponentteja merkittyihin toimintoihin Sisällytä nimet signaaleihin ja tilaan Lisää dynaaminen AI-sukupolvi cDOM/JPRX:llä Johtopäätös Sekä HTMX että Lightview edustavat vakuuttavia vaihtoehtoja, mutta palvelevat eri tarpeita: : Choose HTMX if you want Puhdas hypermedia-pohjainen arkkitehtuuri Minimaalinen asiakaskohtainen monimutkaisuus Edistyksellistä parannusta Todistettu, taistelukokeiltu ratkaisu Vahva yhteisö ja ekosysteemi : Choose Lightview if you want Monen paradigman joustavuus (funktionaalinen, JSON, hypermedia) Turvallinen AI-generoitu käyttöliittymä cDOM/JPRX:llä Komponenttiarkkitehtuuri ilman rakennusvälineitä Fine-grained reaktiivisuus Shadow DOM/Web Component -tuki Vapaus valita ohjelmointityylisi Paikalliset osittaiset itselähteet CSS-valitsijoiden kautta Keskeinen ero: HTMX on laser-keskeinen hypermedia ja tekee sen poikkeuksellisen hyvin. useiden paradigmien joukossa - se ei pakota sinua valitsemaan hypermediaa kaikkeen. Yksi vaihtoehto HTMX pysyy uskollisena hypermedia-näkemykseen laserpainoksella, kun taas Lightview omaksuu joustavuuden, jolloin voit käyttää toiminnallista ohjelmointia (kuten BauJS), JSON-esitystä (kuten JurisJS) tai hypermedia-malleja käyttäjätilisi vaatimusten mukaisesti. Resursseja mmx Virallinen sivu: htmx.org Kirja: Hypermedia Systems osoitteessa hypermedia.systems Discord: Aktiivinen yhteisöllinen keskustelu Lightview Virallinen sivusto: lightview.dev Artikkeli turvallisesta AI UI -tuotannosta: Miten rakentaa AI-generoitu laskin ilman mukautettua JavaScriptia
