Giriş Hypermedia yenilenmesi tam tersindedir. SPA dominasyonunun yıllar sonra, geliştiriciler, HTML'yi uygulama durumunun motoru olarak kullanan sunucu kaynaklı mimarilerin gücünü yeniden keşfediyor. Bu yükü yönlendiren çerçeve, HTMX, yalnızca hypermedia'ya odaklanıyor. Bir alternatif, Lightview, sizi hypermedia-sadece desenlere kilitlemiyor. HTMX'in odaklanmış hypermedia yaklaşımına aksine, Lightview, BauJS gibi şablon etiket fonksiyonları ile fonksiyonel programlama ve hypermedia desenleri destekleyen çok paradigma bir çerçeve. [ ] ve JSON temsilcilik (JurisJS gibi [ ]), - hepsi aynı çerçeve içinde. Bu makale, proje için doğru aracı seçmenize yardımcı olmak için HTMX ve Lightview hypermedia yeteneklerinin teknik bir karşılaştırması sağlar. aynı zamanda, kesinlikle müşteri-server hypermedia değil bir yaklaşım seçmenize eğilebilir bazı tangential Ligthview özellikleri içerir. https://github.com/grucloud/bau https://jurisjs.com Bu noktada, "Bir saniye bekleyin, HTMX geliştirmeyi basitleştirmek üzereydi, neden çok sayıda kodlama paradigmasının karmaşıklığını isterim?" diyebiliriz, Lightview'in noktasının size seçim vermek olduğunu söyleyebiliriz, hipermedia ile tüm uygulamanızı oluşturabilirsiniz, ya da fonksiyonel programlama ile tüm uygulamanızı oluşturabilirsiniz, ya da JSON temsiliyle tüm uygulamanızı oluşturabilirsiniz, ya da tüm uygulamanızı üçünün bir karışımıyla oluşturabilirsiniz. Her şey ihtiyacınıza bağlıdır. Belki uygulamanız hypermedia'dan başlar, ancak büyüdüğünüzde, karmaşık iş mantığını çevrimdışı bir ilk modda oluşturmak için fonksiyonel programlama kullanmanız gerektiğini bulursunuz, ya da cross-platform taşınabilirliği için JSON temsilini kullanmanız gerektiğini veya bilgisayar tarayıcısı Hypermedia Nedir ? Karşılaştırmaya dalmadan önce, hypermedia ile ne anlama geldiğini belirleyelim. Hypermedia, ilgili kaynaklara yönlendirmek için bağlantıları ve denetimleri içeren içeriğe atıfta bulunur. Geleneksel HTML bu bağlantıları ve formları aracılığıyla sağlar, ancak modern hypermedia çerçeveleri bu yetenekleri herhangi bir öğeye genişletir, daha zengin etkileşimleri sağlar. Herhangi bir öğe bir bağlantı olarak hizmet edebilir ve herhangi bir öğe içeriğini elde etmek istediği kaynağı belirleyebilir. . Htmlz HTMX ve Lightview: HTML'yi Hiperteks olarak tamamlamak Carson Gross tarafından intercooler.js'in bir sonraki adı olarak oluşturulan HTMX, "hipertekst olarak HTML'yi tamamlamayı" amaçlamaktadır. Lightview, bu yazar Simon Blackwell tarafından oluşturulan, LLMs ile işbirliği içinde tasarlanmıştır, sadece HTML'yi hipertext olarak tamamlamak için değil, aynı zamanda içerik sunucusu teslimatı için daha taşınabilir, deklaratif bir yaklaşım sağlamak için, hypermedia içeriği hala HTMX gibi HTML olabilir, aynı zamanda HTML veya yerli UI bileşenlerini temsil eden JSON sanal DOM'lar da olabilir. Temel Felsefe HTMX, iki kısıtlama ile karakterize edilen Hypermedia-Driven Application (HDA) mimarisine sahiptir: Declarative Syntax: Imperative scripting yerine HTML-embedded atribütleri kullanır Hypermedia yanıtları: Sunucu JSON değil HTML ile yanıt verir Bu yaklaşım, sunucu üzerindeki karmaşıklığı korur, müşteri ise basit ve deklaratif kalır. Anahtar Özellikler HTMX, herhangi bir elementin standart sözcükler kullanarak HTTP istekleri yayınlamasına izin verir: HTTP Method Support <button hx-delete="/contacts/1" hx-target="#contact-list" hx-confirm="Are you sure?"> Delete Contact </button> : The atribüt, CSS seçicileri kullanılarak sunucu yanıtlarının nerede yerleştirilmesini belirtir: Flexible Targeting hx-target <input type="text" hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results"> : İtfaiye isteğinde özelleştirilmiş tetikleyici kontrolü: Event Triggers <div hx-get="/news" hx-trigger="every 30s"> <!-- Auto-refreshing content --> </div> İçeriğin mevcut DOM'u nasıl değiştirdiğine dair çeşitli seçenekler: Swap Strategies İncelemeler (Default) Dışarıda Önceki Önceki Önceki Sonraki Sonraki Sonraki Sonraki Sonraki Sonraki Sonraki Sonraki Çıkarma, hiçbir HTMX, sabit element kimlikleri, değişim aşaması sınıfları aracılığıyla pürüzsüz UI geçişlerini destekler ( ve ve Ülkeler Arama Sonuçları ( Değişiklikler ( ve ), ve View Transitions API ile entegrasyon.Bu, hypermedia yönlendirilmiş uygulamaların özelleştirilmiş JavaScript olmadan SPA'ya benzeyen pürüzsüzlüğü elde etmelerini sağlar. CSS Transitions and Animations htmx-swapping htmx-settling htmx-added htmx-request swap:1s settle:1s HTMX için Mevcut linkler ve formlar geliştirilebilir: Progressive Enhancement hx-boost <body hx-boost="true"> <!-- All links and forms now use AJAX --> </body> Gerçek zamanlı güncellemeler için yerel destek: WebSockets & SSE <div hx-ws="connect:/chatroom"> <div hx-ws="send"> <input name="message"> </div> </div> Bağımlılıklar HTMX'in sıfır bağımlılıkları vardır, bu da daha fazla karmaşıklık getirmeden mevcut uygulamalar için hypermedia yeteneklerini eklemek için idealdir. Lightview: Hypermedia Desteği ile Çok Paradigm Çerçeve Lightview, önceden yapılandırılmış UI bileşenlerini kullanmayı seçmedikçe, bağımlılıkları da sıfırdır ve tek bir çerçeve içinde çok sayıda programlama paradigması sunarak farklı bir yaklaşım sunar. HTMX'e benzer hipermedya yeteneklerini içerirken, bunları tek başına kullanmanıza zorlamaz. Çerçeveyi denemek için kapsamlı çevrimiçi belgeler ve etkileşimli REPL'ler sağlar. web sitesi Anahtar Kelimeler: Seçim Gücü Lightview, tasarım açısından esnektir. Hypermedia'yı Bunun yerine, uygulamanızın belirli bölümü için doğru aracı seçmenizi sağlar: Sadece Hypermedia (HTMX tarzı): Server-driven içerik ve sayfa navigasyonu için src ve href kullanın. Fonksiyonel (BauJS tarzı): Karmaşık, zorunlu mantık için JavaScript şablon etiket fonksiyonlarını kullanın. Data-Driven (JurisJS-style): Config-Driven arayüzleri için UI'leri saf JSON (vDOM/oDOM) olarak tanımlayın. AI-Safe (cDOM): Güvenli, AI tarafından oluşturulan kullanıcı arayüzleri için yürütülebilir bir ifade dili (JPRX) ile kumlu JSON yapıları kullanın. 1. Hypermedia ve etkileşim HTTP (HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP /HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTTP/HTT ve Güçlü yeteneklerle genişletilmiştir. src href : Unified Attributes src: Bir öğeyi doldurmak için içeriği alır. URL (server taraflı kısımlar için) veya CSS seçicisi (lokal kısımlar için) olabilir. href: Kullanıcı etkileşimi üzerine navigasyon veya içerik yüklemeyi tetikler (örneğin, <button href="/page.html">). Lightview, içeriğin nerede yerleştirildiği üzerinde sofistike kontrol sağlar. Özellikleri veya ayarlamak Targeting & Location target location Standart konumlar: innerhtml, outerhtml, beforebegin, afterbegin, beforeend, afterend : Lightview has first-class support for Web Components. You can insert content directly into a shadow root using or the suffix on a target (e.g., ). This differentiates it from HTMX, which focuses on Light DOM. Shadow DOM location="shadow" :shadow target="#component:shadow" ve ): HTTP eylemlerini doğrudan HTML'de özelleştirin: 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> : Bir başka güçlü Lightview ayırtçısı, mevcut belgenin içeriğini kaydetme yeteneğidir.HTMX bir sunucudan hipermedial kısımları almak için tasarlanmışken, Lightview, Bir CSS seçicisi içerir. Self-Sourced Partials (CSS Selectors as Source) src Bu, içeriğin bir kaynaktan çekilebileceği "Kendinden kaynaklı kısımlar" sağlar. gizli bir Bu, ağ üzerindeki yükü azaltır ve geliştiricilerin başlangıç sayfa yükü içinde doğrudan "offline" kısımları birleştirmelerine izin verir. <template> <div> Lightview, hypermedia'nın sunucu tarafında kısmi anlamına gelmemesi gerektiğini, tam bir hypermedia SPA'ya sahip olabileceğinizi düşünüyor. <!-- 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, içeriği yüklediğinizde belirli bir element kimliğine otomatik olarak kaydırmayı destekler. ya da yoluyla navigasyon Eğer URL bir hash parçası içeriyorsa (örneğin, ), Lightview, içeriğin yüklenmesini otomatik olarak bekler ve ardından hedef öğesini görünümde kaydırır. Automatic Hash Scrolling src href /docs/api.html#signals Akıllı Dövizler: Döviz pozisyonu, tanımlandığında otomatik olarak sabit bir navigasyon çubuğu hesaplar (site-nav-height aracılığıyla). Gölgelendirme DOM Desteği: Gölgelendirme ayrıca bir Gölgelendirme köküne yüklenen içerik için de çalışır. Kısmi yükleme: Tam navigasyon (href) ve kısmi içerik güncellemeleri (src) için çalışır. ) ve Triggers: Lightview, eylemleri tetiklemeden önce olayları engellemek için güçlü bir "Gating" sistemi sağlar. Declarative Event Gating ( lv-before Geliştiriciler: throttle(ms) ve debounce(ms) için dahili destek. Pipelines: Çeşitli zincir kapıları (örneğin, lv-before="click throttle(500) confirm('Are you sure?')"). Özelleştirilmiş Kapılar: Olayı iptal etmek için yanlış döndüren eylemleri doğrulamak için küresel işlevleri tanımlayın (örneğin, validateUser()) 2. Reaktivite ve Devlet Lightview includes a built-in, fine-grained reactivity system (Signals and State) that allows for instant updates and automatic template resolution. This separates it from HTMX, which primarily relies on server-rendered responses or DOM-based state for changes. Bu sistem sağlar: Otomatik Şablon Çözünürlüğü: HTML'deki ${...} etiketleri durum değişikliklerinde otomatik olarak güncellenir. Adlandırılmış Kayıt: Sinyalleri ve durumları kolay şablon bağlama için adıyla kaydedilebilir. JSON Schema Kontrolü: Standart JSON Schema kullanılarak reaktiv durumdaki veri bütünlüğünü etkinleştirin. Lightview'in reaksiyonel durumunun HTMX'in sunucu yöntemi ile karşılaştırılmasının ayrıntılı bir teknik karşılaştırması için, Bölüm olarak Devlet Yönetimi 3. Data-Driven & AI kullanıcı arayüzleri Lightview'in en belirgin özelliklerinden biri, (VDOM ve ODOM) ve (Devamı için tıklayınız) Data-as-UI Safe AI-Generation Lightview, JSON olarak tanımlanmış UI'yi alabilir ve render edebilir, bu da çoğu zaman HTML satırları oluşturmak ve yönetmek için daha kolaydır. Multiple JSON Formats vDOM: Standart sanal DOM yapısı. oDOM: "Object DOM" kısaltması, basit konfig tabanlı kullanıcı arayüzleri için. /* 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": "+" } } ] } } : IA'nın Raw JavaScript yazmasına izin vermek bir güvenlik riski oluşturur. Sandboxed JSON biçimi, AI'nin yapısını ve mantığını tanımlayabileceği bir biçimdir. Bu arkeolojik yapıya göre, cDOM yapısının içine yerleştirilmiş güvenli mantık ve ifade dili olarak hizmet eder, güvenlik açığı olmadan reaktivite ve mantık gücünü sağlar. . Safe AI Generation with cDOM cDOM (Clean/Computed DOM) olmadan JPRX (JSON Path Reactive eXpressions) eval Güvenlik: Hiçbir eval veya istekli senaryo yürütme. Mantık: “if”, “loop” ve matematik gibi mantıkları ve güvenli bir ifade dili (JPRX) aracılığıyla 100’den fazla diğer fonksiyonları destekler. Kullanım Şekli: Bir LLM uçakta arayüzü oluşturan "GenUI" uygulamaları için idealdir. cDOM'u, oluşturulan JavaScript'in güvenlik kabusları olmadan oluşturulan bir kullanıcı arayüzünün dinamikliğini istediğiniz zaman kullanın. Head-to-Head karşılaştırması Syntax ve API Surface : HTMX Tüm fonksiyonlar için özelleştirilmiş hx-* özellikleri Extensive attribute vocabulary ( , , , , etc.) hx-get hx-post hx-target hx-trigger Consistent prefix makes HTMX features immediately recognizable Attribut çeşitliliği nedeniyle daha hızlı öğrenme eğriliği : Lightview Mümkünse standart HTML atribütlerini (src, href) kullanır Smaller attribute vocabulary HTML'yi bilenler için daha fazla bilgi Reaktif özellikler için JavaScript API veya daha güvenli reaktivite için cDOM/JPRX Eylem İsteği Her iki çerçeve de özelleştirilmiş HTTP yöntemlerini ve talep organlarını destekler, ancak farklı yaklaşımlarla: Özel Özellikler Kullanımı: HTMX <form hx-post="/submit" hx-swap="outerHTML"> Standart Kullanımı attributes for configuration: Lightview data- <button href="/api/endpoint" data-method="POST" data-body="#myForm"> Save </button> Çok çok esnek: Lightview's data-body : Automatically serializes the target (e.g., as , or an input's ). CSS Selector #myForm FormData value : Use for literal JSON payloads. JSON json:{"id": 1} : Use to pull data directly from reactive state. Javascript javascript:state.get('user') Text: Use text:Hello for plain text payloads (Tekstil: Merhaba, basit metin payloads için kullanın). trigger olayları has sophisticated trigger syntax: HTMX <input hx-get="/search" hx-trigger="keyup changed delay:500ms"> benzer bir yaklaşımla kullanılır gating: Lightview lv-before <input oninput="search(this.value)" lv-before="input debounce(500)"> Targeting ve İçerik Pozisyonlama Both frameworks provide flexible control over where content is inserted: Kullanım ve Özellikler : HTMX hx-target hx-swap <button hx-get="/content" hx-target="#results" hx-swap="beforeend"> Load More </button> Kullanım Opsiyonel lokasyon suffix veya ayrı Özellikler : 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 içerir Shadow DOM ekleme için bir konumlandırma seçeneği olarak, HTMX ise standart DOM manipülasyonuna odaklanır. Key difference shadow İçerik Kaynağı (Server vs. Local) : HTMX Server-Driven Hypermedia (HDA) için tasarlanmıştır Kaynaklar, hypermedia (HTML) yanıtlarını iade eden URL'ler olmalıdır Her kısmi güncelleme için bir ağ isteği gerektirir : Lightview Çok Kaynaklı Fleksibilite Kaynaklar URL veya CSS seçicileri olabilir İçeriğin yerel <template> etiketlerinden veya diğer DOM öğelerinden çekildiği "Self-Source Partials" etkinleştirir Ortak UI parçalarını birleştirmek, başlangıçta ağ sızıntısını azaltmak için Değişiklikler ve Animasyonlar Swap faz sınıfları, isteğe bağlı durum göstergeleri, zaman değiştiricileri ve View Transitions API entegrasyonu ile birinci sınıf animasyon desteği sunar - hipermedya uygulamalarının SPA benzeri pürüzsüzlüğe ulaşmasını sağlar. HTMX Şu anda, standart CSS geçişleri / animasyonları ve bileşen yaşam döngüsünü kapakları içeren geçişleri içerir.Gelecekteki sürümler içerebilir. Lightview Devlet Yönetimi Bu, çerçevelerin mimari yaklaşımlarında en önemli şekilde farklılık gösterdiği yerdir: HTMX: Server-Side State HTMX tamamen hypermedia odaklıdır. Client-side state minimal, tipik olarak: Server Session: Durum, backend veritabanında veya oturumda sürdürülür. Gizli Form Alanları: İsteklilerde durum geri ve ileri geçmek. DOM Attributes: Data-* atribüllerinde basit durumları depolamak. Alpine.js entegrasyonu: Karmaşık client-side mantığı için, HTMX geliştiricileri genellikle Alpine.js veya benzer hafif kitaplıklara ulaşırlar. Lightview: Client-Side Reactivity Lightview, SolidJS'den ilham alan tam ve ince bir reaktivite sistemi içerir.Bu, sunucudan bağımsız olarak durumları ele alabilen çok paradigma bir çerçeve haline gelir. : HTML'yi kaldırdığınızda veya Lightview, şablon kelimelerini otomatik olarak çözür Bu, sunucu tarafından gösterilen kısımların hidrasyon senaryoları olmadan istemci üzerinde anında reaksiyonel hale gelmesine izin verir. 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 durumları, karmaşık nesneler için veri bütünlüğünü sağlayan JSON şemaları tarafından isteğe bağlı olarak uygulanabilir: 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 Sinyal (değer): Temel değerler için. state(object): nesnelerin ve arrayların derinlemesine gözlemlenmesi için. Effect(fn): Bağımlılıklar değiştikçe yan etkileri çalıştırmak. Bu mimari farklılık, Lightview'i daha fazla bir uygulama çerçevesi haline getirirken, HTMX'i özel bir hypermedia geliştirme aracı olarak kalır. Gerçek Zamanlı Güncellemeler WebSockets ve Server-Sent Events için birinci sınıf destek: HTMX <div hx-ext="sse" sse-connect="/updates" sse-swap="message"> İçinde WebSocket/SSE desteği yoktur (şimdiki sürümde olduğu gibi), ancak standart JavaScript aracılığıyla eklenebilir. Lightview Güvenlik Standart Web Güvenliği Uygulamaları: HTMX Aynı Kaynak Politikası hx-headers üzerinden CSRF token desteği İçerik Güvenlik Politikası Uyumluluğu Default olarak güvenlik içerir: Lightview Same-domain policy enforced automatically Tehlikeli protokol engelleme (JavaScript: veriler:) Validasyon Hooks Özellikleri Giderli Geliştirme excels at progressive enhancement: HTMX <!-- Works without JS, enhanced with JS --> <body hx-boost="true"> <a href="/page">Link</a> <form action="/submit" method="post"> Şu anda web soketleri veya sunucu tarafı olayları için yerleşik destek eksikliği hariç, Lightview'in yaklaşımı aynı şekilde ileri düzeyde geliştirme yeteneğine sahiptir. ve her bir element için desteklenir, böyle bir şeye gerek yoktur . Lightview href src hx-boost Arkeolojik bileşenler doesn't have a component model—it enhances standard HTML. HTMX içerir : Lightview Tek dosya bileşenleri Template components Komponentler arası değişkenlerin ithalatı / ihracatı Sandboxed remote components It also provides over Ortak bir model için, örneğin. ve ve ve ve vb. 50 İnşaat Malzemeleri yükleme Card Haritalar Çekici Cases Kullanımı HTMX’i Ne Zaman Seçmeliyim Sunucu Yönlendirilen Uygulamalara İnteraktiflik Ekleme: HTMX, Geleneksel Web Uygulamalarını Giderek Geliştirmekte Önemlidir Ekibin sunucu tarafı rendering ile tanışması: Ekibiniz Rails, Django, Laravel vb. ile rahatsa. İlerici geliştirme kritiktir: JavaScript devre dışı bırakıldığında HTMX şık bir şekilde bozulur Gerçek zamanlı özellikler: İçinde WebSocket/SSE desteği Basit, öngörülebilir davranış: HTMX'in tek amaçlı odaklanması, düşünmeyi kolaylaştırır When to Choose Lightview Çok paradigma esnekliği: İşlevsel programlama, JSON tabanlı UI ve hypermedia bir kod tabanında birleştirmek istediğinizde Güvenli AI oluşturulan UI: Güvenli, kum kutusu oluşturulan AI oluşturulan arayüzler için cDOM kullanımı Komponent tabanlı mimari: Bir oluşturma adımı olmadan tekrar kullanılabilir bileşenler istediğinizde Müşteri tarafında reaktivite: Düzgün reaktiv güncelleştirmelere ihtiyaç duyan uygulamalar Shadow DOM/Web Komponentleri: Kapsülasyon için yerleşik destek Hibrit yaklaşım: Reaktif programlama ile hypermedia desenleri karıştırın Bağımsız Kaynaklı Bölümler: Hypermedia şablonlarını kullanmak istiyorsanız ancak ağ istekleri azaltmak veya çevrimdışı hazır bölümler sağlamak için DOM'dan yerel olarak bazı içeriği kaydetmek istediğinizde Performans Düşünceler Her iki çerçeve de performanslıdır, ancak farklı şeyler optimize eder: : HTMX Network-focused optimization (reduce round trips) Servis ağır kaldırma yapar Minimum müşteri sayısı Tarih ve Caching Geliştirilmiş : Lightview Fine-grained reactivity (sadece güncellemeler düğmeleri değiştirdi) Virtuel DOM DIFFING OVERHEAD İNDİR Müşteri tarafı durumları ile ağ istekleri azaltılabilir Bağımlılık İzleme Optimize Render Developer Experience Kurşun Öğrenme : HTMX Anahtar Kelimeler: HTML + Attributes Geniş belgeler ve örnekler Büyük topluluk ve ekosistem "Hypermedia Systems" kitabı kapsamlı bir kılavuz olarak : Lightview Çeşitli zihinsel modeller (hipermedia + reaktivite + fonksiyonel) Comprehensive documentation with 40+ components and extensive examples Küçük Topluluk Çeşitli programlama paradigmalarını anlamak Debugging : HTMX Browser DevTools Doğal Çalışıyor Mükemmel depolama ve debugging için olaylar Başvuru / Cevap Kontrolü : Lightview Bağımlılık izleme düzeltmek daha zor olabilir Reaktif güncellemeler daha az belirgin olabilir Geliştirme Modu Yardımcı Ekosistem ve evlat edinme : HTMX Mature ecosystem with plugins and extensions Server-side library support in all major languages Büyük ve aktif bir toplum Birçok şirketin üretiminde kullanılan Daha geniş hypermedia hareketinin bir parçası : Lightview Küçük ama büyüyen ekosistem Companion Backend Çerçeve (Watchlight) Less third-party integration sahneye daha yakın Size Htmlx HTMX minified ve gzipped 29KB Aydınlatma Lightview üç ayrı dosya olarak yüklenebilir: // 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> HTMX'in işlevselliğinin çoğunu taklit etmek için gereken toplam boyut 20KB'dir ve bu da size çok daha fazla güç sağlar. Kod Karşılaştırması: Aynı Özellik Oluşturma Her iki çerçeve ile aktif bir arama özelliği oluşturalım: htmlx versiyonu <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 versiyonu <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": Arama yapmak için son nokta. oninput="LightviewX.request(this)": Her tuş etkisinde Lightview hypermedia motoru başlatır. Yalnızca giriş türü öğeleri için gereklidir. lv-before="input debounce(300)": İçeriği 300ms ile açıklayıcı bir şekilde debounce eder, karmaşık trigger sentezinin gereksinimini değiştirir. target="#results": HTML veya JSON yanıtını sonuç div'e yönlendirir. Integration with Backend Frameworks works with any server-side technology that can generate HTML. HTMX Herhangi bir JSON veya HTML oluşturan backend ile çalışır - sunucu tarafı mimarisi dikte etmez. Lightview Göç Yolları SPA’dan HTMX’e HTMX, aşamalı bir geçiş yolu sunar: Mevcut formlar ve bağlantılar üzerinde hx-boost ile başlayın Giderek daha sofistike hipermedia etkileşimlerini ekleyin SPA rotalarını hypermedia son noktalarıyla değiştirin SPA’dan Lightview’e Lightview aynı zamanda bir yavaş yavaş yol sunar: Sadece birkaç elemanı hipermediaya dönüştürerek başlayın Giderek daha sofistike hipermedia etkileşimlerini ekleyin İşlevsel bileşenleri etiketli fonksiyonlara dönüştürün İsim sinyalleri ve durumları ekleme cDOM/JPRX ile dinamik AI jenerasyonu ekleyin Sonuç Hem HTMX hem de Lightview ikna edici alternatifler sunar, ancak farklı ihtiyaçlara hizmet eder: : Choose HTMX if you want Pure Hypermedia-Driven Mimarlık Minimum müşteri karmaşıklığı Progressive enhancement Test edilen ve test edilen çözümler Güçlü bir toplum ve ekosistem : Choose Lightview if you want Çok paradigma esnekliği (fonksiyonel, JSON, hypermedia) cDOM/JPRX ile güvenli AI oluşturulan UI Bina araçları olmadan bileşen mimarisi Fine-grained reaktivite özellikleri Shadow DOM/Web Component support Programlama tarzınızı seçme özgürlüğü CSS Seçicileri aracılığıyla Kendi Kaynaklı Yerel Bölümler Anahtar fark: HTMX lazer odaklı hypermedia ve bunu olağanüstü iyi yapar. Birkaç paradigma arasında - her şey için hypermedia'yı seçmenizi zorlamaz. Bir seçenek Her iki çerçeve de "daha iyi" değildir - farklı öncelikler için optimize edilirler.HTMX lazer odaklı hypermedia görüşüne sadık kalırken, Lightview esnekliğe sahiptir, işlevsel programlama (BauJS gibi), JSON temsilcilik (JurisJS gibi) veya kullanım durumunuzun gereksinimlerine göre hypermedia desenleri kullanmanızı sağlar. Kaynaklar Htmlx Resmi web sitesi: htmx.org Kitap: Hypermedia Sistemleri at hypermedia.systems Etiket: aktif topluluk tartışması Aydınlatma Etiket Arşivi: lightview.dev Güvenli AI UI Üretimi Hakkında Makale: Özelleştirilmiş JavaScript Olmadan Bir AI Oluşturulan Hesaplayıcı Nasıl Oluşturulur
