הוצאת לאחר שנים של דומיננטיות SPA, מפתחים מגלים מחדש את הכוח של ארכיטקטורות מבוססות שרתים המשתמשים ב-HTML כמנוע של מצב היישום. המסגרת המובילה לתשלום זה, HTMX, מתמקדת באופן בלעדי בהיפרמדיה. חלופה, Lightview, אינה מחזיקה אותך בתבניות היפרמדיה בלבד. שלא כמו הגישה היפרמדיה המוקדמת של HTMX, Lightview היא מסגרת רב-פראדיגמלית התומכת בתבניות היפרמדיה, תכנות פונקציונליות עם פונקציות תגית תבניות כמו BauJS [ , וייצוג JSON (כמו JurisJS [ ]), - הכל בתוך אותה מסגרת. מאמר זה מספק השוואה טכנית של יכולות היפרמידיה של HTMX ו- Lightview כדי לעזור לך לבחור את הכלי הנכון עבור הפרויקט שלך. https://github.com/grucloud/bau https://jurisjs.com אתה יכול לומר בשלב זה, "חכה שניה, HTMX אמור להקל על פיתוח, למה אני רוצה את המורכבות של פרדיגמות קוד מרובות?" ייתכן שלא, נקודת המבט של Lightview היא לתת לך בחירה, אתה יכול לבנות את היישום כולו עם היפרמדיה, או אתה יכול לבנות את היישום כולו עם תכנות פונקציונליות, או אתה יכול לבנות את היישום כולו עם ייצוג JSON, או אתה יכול לבנות את היישום כולו עם שילוב של כל שלוש. הכל תלוי במה שאתה צריך. מה זה היפרמדיה? לפני שנכנס לתוך ההשוואה, בואו נקבע מה אנחנו מתכוונים על ידי היפרמדיה. היפרמדיה מתייחס לתוכן המכיל קישורים ושליטה לניווט למשאבים הקשורים. HTML המסורתי מספק את זה באמצעות קישורים ופורמטים, אבל מסגרות היפרמדיה המודרניות להרחיב יכולות אלה לכל אלמנט, המאפשר אינטראקציות עשירות יותר. כל אלמנט יכול לשמש כקישור וכל אלמנט יכול לציין את המקור שממנו הוא רוצה לקבל את התוכן שלו. . htmz HTMX ו-Lightview: השלמת HTML כתיבת היפרטקסט HTMX, שנוצר על-ידי קרסון גרס כמשכן של intercooler.js, שואף "למלא HTML כקיצור היפרטקסט." Lightview, שנוצר על ידי המחבר, סיימון בלאקוול, תוכנן בשיתוף פעולה עם LLMs, לא רק כדי להשלים את ה-HTML כתיבת היפרטקסט, אלא גם כדי לספק גישה ניידת יותר, מסרטיבית לביצוע התוכן של השרת, אם כי התוכן היפרמדיה עדיין יכול להיות HTML כמו HTMX, זה יכול להיות גם JSON ה-DOMs וירטואליים המייצגים HTML או רכיבי UI מקוריים. פילוסופיה עיקרית HTMX מכסה את ארכיטקטורה Hypermedia-Driven Application (HDA), המאופיינת בשני מגבלות: סינטקטית מצהירה: משתמשת באפקטים המוטבעים ב-HTML במקום תסריטים אימפרטיביים תגובות היפרמדיה: השרת מגיב עם HTML, לא JSON גישה זו שומרת על המורכבות על השרת, בעוד שהלקוח נשאר פשוט ומצהיר. תכונות מפתח HTMX מאפשר לכל אלמנט להוציא בקשות HTTP באמצעות תווים סטנדרטיים: HTTP Method Support <button hx-delete="/contacts/1" hx-target="#contact-list" hx-confirm="Are you sure?"> Delete Contact </button> • The המאפיין קובע היכן יש להוסיף תשובות שרת, באמצעות בוחרי CSS: Flexible Targeting hx-target <input type="text" hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results"> הגדרת הגדרת הגדרת הגדרת הגדרת הגדרת הגדרת הגדרת הגדרת הגשר: Event Triggers <div hx-get="/news" hx-trigger="every 30s"> <!-- Auto-refreshing content --> </div> אפשרויות רבות כיצד תוכן מחליף את ה-DOM הקיים: Swap Strategies קישור לHTML (default) outerHTML לפני תחילת, אחרי תחילת, לפני סוף מחיקה, אף אחד תגיות: תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות , , , בקשה למדינות אינדיקטורים ( ), timing modifiers ( , זה מאפשר ליישומים המנוהלים על ידי היפרמדיה להשיג שקט כמו SPA ללא JavaScript מותאם אישית. CSS Transitions and Animations htmx-swapping htmx-settling htmx-added htmx-request swap:1s settle:1s תגית: htmlx ניתן לשפר קישורים וטפסים קיימים: Progressive Enhancement hx-boost <body hx-boost="true"> <!-- All links and forms now use AJAX --> </body> תמיכה מקורית לעדכונים בזמן אמת: WebSockets & SSE <div hx-ws="connect:/chatroom"> <div hx-ws="send"> <input name="message"> </div> </div> התמכרות HTMX יש אפס תלויות, מה שהופך אותו אידיאלי כדי להוסיף יכולות היפרמידיה ליישומים קיימים מבלי להציג מורכבות נוספת. Lightview: Multi-Paradigm Framework עם תמיכה בהיפרמדיה ל-Lightview יש גם אפס תלויות, אלא אם כן תבחר להשתמש בהרכיבי ה- UI המוקדמים שלה, והיא לוקחת גישה שונה על ידי מתן פרדיגמות תכנות מרובות בתוך מסגרת אחת. בעוד שהיא כוללת יכולות היפרמדיה דומות ל-HTMX, היא לא מכריעה אותך להשתמש בהן באופן בלעדי. מספק תיעוד מקוון מקיף ו REPL אינטראקטיביים כדי לנסות את המסגרת. WEB WEB הפילוסופיה הבסיסית: כוח הבחירה Lightview היא גמישה בעיצוב.היא לא קובעת את היפרמידיה כעיצוב. במקום זאת, זה מאפשר לך לבחור את הכלי הנכון עבור החלק הספציפי של היישום שלך: רק Hypermedia (HTMX-style): השתמש ב- src ו-href עבור תוכן מבוסס שרת וניווט בדף. פונקציונלי (BauJS-style): השתמש בתפקידי תגית תבנית של JavaScript לוגיקה מורכבת ומחייבת. Data-Driven (JurisJS-style): הגדר את המשתמש כ-JSON טהור (vDOM/oDOM) עבור ממשקי Config-Driven. AI-Safe (cDOM): השתמש במבנים JSON עם ארגז חול עם שפת ביטוי מבוצעת (JPRX) עבור ממשקי משתמש מאובטחים, שנוצרו על ידי AI. Hypermedia & אינטראקציה מערכת היפרמידיה של Lightview מבוססת על תכונות HTML סטנדרטיות ( , ) התרחב עם יכולות חזקות. src href : Unified Attributes src: מציג תוכן כדי למלא אלמנט. יכול להיות כתובת URL (לחלקים בצד השרת) או מבחר CSS (לחלקים מקומיים). href: הגורמים לניווט או לטעון תוכן על אינטראקציה עם משתמשים (לדוגמה, <button href="/page.html">). Lightview מציעה שליטה מתוחכמת על איפה תוכן מוטבע באמצעות תכונה או להגדיר Targeting & Location target location מיקומים סטנדרטיים: innerhtml, outerhtml, beforebegin, afterbegin, beforeend, afterend Shadow DOM: Lightview תומך ברמה הראשונה ב- Web Components.You can insert content directly into a shadow root using location="shadow" or the :shadow suffix on a target (e.g., target="#component:shadow"). & התאמה אישית של פעולות HTTP ישירות ב-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> הבדל נוסף חזק של Lightview הוא היכולת להקליד תוכן מהמסמך הנוכחי, בעוד HTMX נועד להשיג חלקיקי היפרמידיה מהשרת, Lightview מאפשר תכונה להכיל CSS Selector. Self-Sourced Partials (CSS Selectors as Source) src זה מאפשר "Partyals Self-Sourced" שבו תוכן יכול להיות מושך מתוך → הסתתר , או כל אלמנט אחר ב-DOM.זה מפחית את כמות העלילה של הרשת ומאפשר למפתחים לקבץ חלקיקים "לא מקוונים" ישירות בתוך עומס הדף הראשוני. <template> <div> Lightview לוקחת את הגישה כי היפרמדיה לא חייבת להיות פירושה חלקיקים בצד השרת, אתה יכול להיות היפרמדיה מלא 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 תומך בסריקה אוטומטית ל-ID של אלמנט מסוים בעת הורדת תוכן באמצעות או ניווט דרך אם ה-URL מכיל קטע hash (לדוגמה, ), Lightview ימתין באופן אוטומטי לתוכן לטעון ולאחר מכן להזיז את האלמנט היעד לתוך התצוגה. Automatic Hash Scrolling src href /docs/api.html#signals פיצויים חכמים: מיקום הסריקה מייחס באופן אוטומטי לסרגל ניווט קבוע אם הוא מוגדר (באמצעות --site-nav-height). תמיכה ב-Shadow DOM: Scrolling פועל גם עבור תוכן שהועלה ל-Shadow Root. טעינה חלקית: פועלת הן עבור ניווט מלא (href) והן עדכוני תוכן חלקיים (src). ) ו Triggers: Lightview מספק מערכת "Gating" חזקה כדי לעקוף אירועים לפני שהם מפעילים פעולות. Declarative Event Gating ( lv-before שינויים: תמיכה מובנית עבור throttle(ms) ו debounce(ms). צינורות: שערי שרשרת מרובים (לדוגמה, lv-before="click throttle(500) confirm('Are you sure?')" ). שערים מותאמים אישית: הגדרת פונקציות גלובליות כדי לאמת פעולות (לדוגמה, validateUser()) שמחזירות false כדי לבטל את האירוע. • Reactivity & State Lightview כוללת מערכת חזותית מובנית עם גרעינים עדינים (סימנים ומצב) המאפשרת עדכונים מיידיים ורזולוציה אוטומטית של תבניות, מה שמפריד אותה מ- HTMX, אשר מסתמכת בעיקר על תשובות שפורסמו על ידי השרת או על מצב מבוסס DOM לשינויים. מערכת זו מספקת: רזולוציה אוטומטית של תבנית: תגיות ${...} ב-HTML מתעדכנות באופן אוטומטי כאשר המצב משתנה. רישום בשם: ניתן לרשום אותות ומצבים בשם כדי להקל על קשירת תבנית. JSON Schema Control: להפעיל את שלמות הנתונים במצב תגובה באמצעות JSON Schema סטנדרטי. עבור השוואה טכנית מפורטת של מצב התגובה של Lightview לעומת הגישה המבוססת על השרת של HTMX, ראה סעיף ניהול המדינה 3.Data-Driven & AI ממשקי משתמש אחת התכונות הבולטות ביותר של Lightview היא התמיכה שלה עבור (VDOM, oDOM) ו (למרות זאת Data-as-UI Safe AI-Generation Lightview יכולה להשיג ולהפוך את ה- UI המוגדר כ- JSON, אשר לעתים קרובות קל יותר עבור backends ליצור ולנהל מאשר שורות HTML. Multiple JSON Formats vDOM: מבנה ה-DOM הווירטואלי הסטנדרטי oDOM: קיצור של "Object DOM" עבור UI מבוסס תצורה קצרה. /* 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 לכתוב JavaScript גלם הוא סיכון לאבטחה. הוא פורמט JSON עם קופסת חול שבו AI יכול להגדיר מבנה ולוגיקה. תרגום קובץ בקטגוריה זו, משמש לשפת ההיגיון והביטוי הבטוח המוטבע בתוך מבנה cDOM, ומספק את הכוח של תגובה והיגיון ללא פגיעות אבטחה של . Safe AI Generation with cDOM cDOM (Clean/Computed DOM) בלי JPRX (JSON Path Reactive eXpressions) eval אבטחה: אין ביצוע של סקריפטים אקראיים או אקראיים. לוגיקה: תומך בלוגיקה כגון "אם", "פרווה", ומתמטיקה ומעל 100 פונקציות אחרות באמצעות שפת ביטוי מאובטחת (JPRX). שימוש מקרה: אידיאלי עבור יישומים "GenUI" שבו LLM מייצר את הממשק על המעופף. השתמש ב-cDOM כאשר אתה רוצה את הדינמיקה של ממשק משתמש שנוצר ללא הסיוט של אבטחה של Javascript שנוצר. השוואה ראש-ראש Syntax ו-API Surface : HTMX מאפיינים מותאמים אישית של hx-* לכל הפונקציונליות מילון תכונות נרחב (hx-get, hx-post, hx-target, hx-trigger וכו ') מקדמה עקבית הופכת את המאפיינים של HTMX לזיהוי מיידי קווי למידה קפדניים יותר בשל מגוון תכונות : Lightview משתמש בתכונות HTML סטנדרטיות (src, href) במידת האפשר מילוי מילים קטנות יותר היכרות עם מפתחים שיודעים HTML API JavaScript עבור תכונות תגובה או cDOM / JPRX עבור תגובה מאובטחת יותר בקשה לפעולה שני המסגרות תומכות בשיטות HTTP מותאמות אישית ובגופים של בקשות, אך עם גישות שונות: משתמשים בתכונות ייעודיות: HTMX <form hx-post="/submit" hx-swap="outerHTML"> שימוש סטנדרטי תכונות של Configuration: Lightview data- <button href="/api/endpoint" data-method="POST" data-body="#myForm"> Save </button> הוא מאוד גמיש: Lightview's data-body : Automatically serializes the target (e.g., as , or an input's ). CSS Selector #myForm FormData value JSON: השתמש ב- json:{"id": 1} עבור משאבי JSON מילוליים. JavaScript: השתמש ב- javascript:state.get ('user') כדי למשוך נתונים ישירות ממצב תגובה. Text: Use text:Hello for plain text payloads (שימוש בטקסט: שלום עבור תשלום טקסט פשוט). Triggering אירועים יש לו סינטקס טריגר מתוחכם: HTMX <input hx-get="/search" hx-trigger="keyup changed delay:500ms"> יש גישה דומה לשימוש הגטו : Lightview lv-before <input oninput="search(this.value)" lv-before="input debounce(500)"> Targeting and Content Positioning שני המסגרות מספקות שליטה גמישה על המקומות בהם מופיע התוכן: משתמשים and attributes: HTMX hx-target hx-swap <button hx-get="/content" hx-target="#results" hx-swap="beforeend"> Load More </button> משתמשים עם תוספת מיקום אופציונלית או נפרדת תכונות : 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 כולל כמו אפשרות מיקום עבור הוספת Shadow DOM, בעוד HTMX מתמקדת מניפולציה סטנדרטית של DOM. Key difference shadow קידום תוכן (Server vs. Local) : HTMX תוכנה עבור Hypermedia Server-Driven (HDA) מקורות חייבים להיות כתובות URL שמחזירות תשובות היפרמדיה (HTML) דורש בקשה לרשת עבור כל עדכון חלקי : Lightview גמישות ממספר מקורות מקורות יכולים להיות URLs או CSS selectors Enables "Self-Sourced Partials" where content is pulled from local tags or other DOM elements <template> מאפשר חיבור של חלקי UI משותפים כדי להפחית את נפילת הרשת הראשונית Transitions and Animations היא תומכת באנימציה ברמה הראשונה עם שיעורי שלב החלפה, אינדיקטורים של מצב בקשה, שינויים בזמן ו- View Transitions API - המאפשרת ליישומי היפרמדיה להשיג שקט כמו 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 ניהול המדינה זה המקום שבו המסגרות משתנות באופן משמעותי ביותר בגישה האדריכלית שלהם: HTMX: Server-Side State – מצב מצד שרת HTMX מתמקד היטב בהיפרמדיה.המצב בצד הלקוח הוא מינימלי, בדרך כלל מטופל באמצעות: פגישת שרת: המצב נשמר במסד הנתונים האחורי או בפגישה. : passing state back and forth in requests. Hidden Form Fields תכונות DOM: אחסון מצב פשוט בתכונות data-* אינטגרציה של Alpine.js: עבור לוגיקה מורכבת בצד הלקוח, מפתחי HTMX לעתים קרובות פונים אל Alpine.js או ספריות קלות דומות. תגית: Client-Side Reactivity Lightview כוללת מערכת תגובה מלאה, מעוצבת בצורה מעולה, בהשראת SolidJS, מה שהופך אותה למסגרת רב-פראדיגמלית שיכולה לטפל במצב באופן עצמאי מהשרת. : כאשר HTML נלקח דרך או Lightview פותר באופן אוטומטי אותיות תבנית פעולה זו מאפשרת לחלקיקים המוצגים על-ידי השרת להפוך באופן מיידי להגיב על הלקוח ללא סקריפטים של הידראציה. Automatic Template Resolution src href ${...} סימנים ומצבים יכולים להיות רשומים בשם כך שהם זמינים להחלטת תבנית ברחבי העולם: 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 ניתן לאכוף באופן אופציונלי על-ידי תוכניות JSON, המספקות שלמות נתונים עבור אובייקטים מורכבים: 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 סימן (ערך): עבור ערכים פרימיטיביים. מצב (אובייקט): עבור תצפית עמוקה של אובייקטים ומערכות. אפקט (fn): כדי להפעיל תופעות לוואי כאשר התמכרות משתנה. ההבדל האדריכלי הזה הופך את Lightview למסגרת יישומים מלאה יותר, בעוד HTMX נשאר כלי שיפור היפרמידיה המוקדש. עדכונים בזמן אמת יש תמיכה ברמה הראשונה עבור WebSockets ו- Server-Sent Events: HTMX <div hx-ext="sse" sse-connect="/updates" sse-swap="message"> אין תמיכה מובנית ב- WebSocket/SSE (כמו בגירסה הנוכחית), אם כי ניתן להוסיף אותה באמצעות JavaScript סטנדרטי. Lightview בטיחות מבוסס על שיטות אבטחה סטנדרטיות באינטרנט: HTMX מדיניות המקור CSRF תמיכה טוקן דרך hx-headers מדיניות אבטחת תוכן תאימות כולל אבטחה כברירת מחדל: Lightview מדיניות דומיין זהה מתבצעת באופן אוטומטי מחסום פרוטוקול מסוכן (JavaScript: נתונים:) תגית: validation hooks שיפור מתמיד היתרונות של שיפור הדרגתי: HTMX <!-- Works without JS, enhanced with JS --> <body hx-boost="true"> <a href="/page">Link</a> <form action="/submit" method="post"> פרט לכך שאין כיום תמיכה מובנית ב-websockets או באירועים בצד השרת, הגישה של Lightview מסוגלת לשיפור הדרגתי. ו הם נתמכים עבור כל אלמנט, אין צורך בשום דבר כמו . Lightview href src hx-boost רכיב ארכיטקטורה doesn't have a component model—it enhances standard HTML. HTMX includes: Lightview רכיבי קובץ יחיד Template מרכיבים ייבוא / ייצוא של משתנים בין רכיבים רכיבים מרחוק Sandboxed היא גם מספקת עבור דפוסים משותפים, למשל , , , וכדומה 50 רכיבים מובנים Loading כרטיס Chart דרור שימוש במקרים מתי לבחור HTMX הוספת אינטראקטיביות לאפליקציות המוצגות על-ידי שרתים: HTMX מצוינת בשיפור הדרגתי של יישומי אינטרנט מסורתיים היכרות הצוות עם rendering בצד השרת: אם הצוות שלך מרגיש בנוח עם Rails, Django, Laravel, וכו '. שיפור פרוגרסיבי הוא קריטי: HTMX מתדרדר בקלות כאשר JavaScript אינו זמין תכונות בזמן אמת: תמיכה מובנית ב- WebSocket/SSE התנהגות פשוטה, צפויה: המוקד למטרה יחידה של HTMX הופך את זה קל לחשוב על מתי לבחור Lightview גמישות רב-פראדיגמלית: כאשר ברצונך לערבב תכנות פונקציונליות, JSON-based UI ו-hypermedia בסיס קוד אחד UI מאובטח שנוצר על-ידי AI: שימוש ב-cDOM עבור ממשקים מאובטחים שנוצרו על-ידי AI ארכיטקטורה מבוססת רכיבים: כאשר אתה רוצה רכיבים שיכולים לשמש שוב ללא שלב בניית תגובה מצד הלקוח: יישומים הדורשים עדכוני תגובה מעוצבים Shadow DOM/Web Components: תמיכה משולבת ב-encapsulation גישה היברידית: שילוב של דפוסי היפרמדיה עם תכנות תגובה חלקי מקור עצמאי: כאשר ברצונך להשתמש בדפוסים של היפרמדיה, אך מקור חלק מהתוכן באופן מקומי מ-DOM כדי להפחית בקשות רשת או לספק חלקים מוכנים לא מקוון שיקולים ביצועים שני המסגרות יעילות, אבל אופטימיזציה דברים שונים: : HTMX אופטימיזציה ממוקדת ברשת (פחתת מסלולי טיולים) השרת עושה את ההרים כבדים עיבוד מינימלי מצד הלקוח היסטוריה ו-Caching built-in : Lightview Reactivity Fine-grained (רק עדכונים שינו את הצמתים) אין דומיין וירטואלי מתפשט מעל ראשו יכול להפחית בקשות רשת עם מצב מצד הלקוח מעקב אחרי התמכרות אופטימיזציה ניסיון מפתחים קורת הלמידה : HTMX תגית: HTML + Attributes תיעוד רחב ודוגמאות קהילה גדולה ומערכת אקולוגית הספר "מערכות Hypermedia" כמדריך מקיף : Lightview מודלים נפשיים מרובים (היפרמדיה + תגובות + פונקציונליות) תיעוד מקיף עם 40+ רכיבים ודוגמאות מקיפות קהילה קטנה יותר דורש הבנה של פרדיגמות תכנות מרובות Debugging : HTMX דפדפן DevTools עובד באופן טבעי רישום מעולה ואירועים עבור דיבוג בקשה/תגובה בדיקה פשוטה : Lightview מעקב אחרי התמכרות יכול להיות קשה יותר לפרוץ עדכוני תגובה עשויים להיות פחות ברורים שיטת התפתחות מובנית עוזרת אקולוגיה ואימוץ : HTMX אקולוגיה בוגרת עם plugins ו-extensions תמיכה בספריות בצד השרת בכל השפות העיקריות קהילה גדולה ופעילה משמש בייצור על ידי חברות רבות חלק מהתנועה הרחבה יותר של היפרמדיה : Lightview אקולוגיה קטנה אך גוברת עקבו אחרי watchlight watchlight watchlight פחות אינטגרציה של צד שלישי עוד על הבמה גודל HTMLX HTMX minified and gzipped הוא 29KB LightView Lightview ניתן להעלות כשלושה קבצים נפרדים: // 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 הוא 20KB, וזה גם נותן לך הרבה כוח אחר. השוואת קודים: בניית אותו תכונה בואו נבנה פונקציית חיפוש פעילה עם שני המסגרות: גרסה 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> גרסה 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": הנקודה הסופית כדי לחפש. oninput="LightviewX.request(this)": מפעיל את מנוע ההיפרמדיה של Lightview בכל מפתח. נדרש רק עבור אלמנטים מסוג כניסה. עיבוד קליקים אוטומטי על אלמנטים שאינם כניסה. lv-before="input debounce(300)": מחליף את ההכנסה באופן מפורש ב-300ms, ומחליף את הצורך בסינטקס הגורם המורכב. target="#results": מכוון את התגובה HTML או JSON לתוצאות div. אינטגרציה עם Backend Frameworks עובד עם כל טכנולוגיית צד השרת שיכולה ליצור HTML. HTMX עובד עם כל JSON או HTML-generating backend - זה לא קובע ארכיטקטורה בצד של השרת. Lightview מסלול ההגירה מ SPA ל-HTMX HTMX מציעה נתיב הגירה הדרגתי: התחל עם hx-boost על טפסים וקישורים קיימים הוספת אינטראקציות היפרמדיה מתוחכמות יותר להחליף את מסלולי ה-SPA עם נקודות קצה היפרמדיה מ SPA ל Lightview Lightview מציעה גם נתיב הדרגתי: התחל על ידי הפוך רק כמה אלמנטים ל-Hypermedia הוספת אינטראקציות היפרמדיה מתוחכמות יותר אבולוציה של רכיבים פונקציונליים לתפקידים מסומנים הוספת אותות שמות ומצב הוספת ייצור דינמי של AI עם cDOM/JPRX מסקנה הן HTMX והן Lightview מייצגות חלופות משכנעות אך משרתות צרכים שונים: : Choose HTMX if you want ארכיטקטורה hypermedia-driven מורכבות מינימלית מצד הלקוח שיפור מתמיד פתרון מבוקש, מבוקש קהילה חזקה ואקולוגיה חזקה : Choose Lightview if you want גמישות רב-פראדיגמלית (פונקציונלית, JSON, היפרמדיה) UI מאובטח שנוצר על ידי AI עם cDOM / JPRX ארכיטקטורה של רכיבים ללא כלים רדיואקטיביות מתוקה תמיכה ב-Shadow DOM/Web Component החופש לבחור את סגנון התכנות שלך קישורים מקומיים עצמאיים באמצעות בוחרים CSS ההבדל העיקרי: HTMX מתמקד לייזר על היפרמידיה ועושה את זה מצוין. בין מספר פרדיגמות - זה לא מכריח אותך לבחור היפרמדיה עבור הכל. אחת האפשרויות HTMX נשאר נאמנה חזון היפרמידיה עם התמקדות לייזר, בעוד Lightview מתייחסת לגמישות, ומאפשרת לך להשתמש בתכנות פונקציונליות (כגון BauJS), ייצוג JSON (כמו JurisJS), או דפוסי היפרמידיה בהתאם לדרישות המקרה שלך. משאבים HTMLX אתר רשמי: htmx.org ספר: "מערכות Hypermedia" באתר hypermedia.systems תגית: דיון קהילתי פעיל LightView אתר אינטרנט: lightview.dev מאמר על יצירת AI UI בטוחה: כיצד לבנות מחשב שנוצר על ידי AI ללא JavaScript מותאם אישית
