Введение Ренессанс гипермедиа находится в полном движении. После многих лет доминирования 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 виртуальные DOM, которые представляют HTML или компоненты native 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 (по умолчанию) outerHTML До начала, после начала, до конца Удалить, ни одного HTMX обеспечивает встроенную поддержку плавных переходов интерфейса через стабильные идентификаторы элементов, классы обменных фаз ( , , , запрос государственных индикаторов ( Изменения в графике ( , Это позволяет гипермедиа-ориентированным приложениям достигать SPA-подобной гладкости без пользовательского JavaScript. CSS Transitions and Animations htmx-swapping htmx-settling htmx-added htmx-request swap:1s settle:1s Отзывы HTMX Можно расширить существующие ссылки и формы: 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: многопарадигматическая рамка с поддержкой гипермедиа Lightview также имеет нулевые зависимости, если вы не решите использовать свои предварительно построенные компоненты интерфейса пользователя, и он принимает другой подход, предлагая несколько парадигм программирования в одной структуре. Хотя он включает возможности гипермедиа, похожие на HTMX, он не заставляет вас использовать их исключительно. Вы можете использовать декларативные модели гипермедиа, функциональное программирование или определения JSON, основанные на данных — все в одном приложении. предоставляет обширную онлайн-документацию и интерактивные REPL для тестирования рамок. WEB WEB Основная философия: власть выбора Lightview является гибким по дизайну. Он не предписывает гипермедиа как Вместо этого он позволяет выбрать правильный инструмент для конкретной части вашего приложения: только Гипермедиа (HTMX-стиль): Используйте src и href для серверного контента и навигации страниц. Функциональный (BauJS-стиль): Используйте функции тегов шаблонов JavaScript для сложной, императивной логики. Data-Driven (JurisJS-style): Определите UI как чистый JSON (vDOM/oDOM) для конфигурируемых интерфейсов. AI-Safe (cDOM): Используйте песочные структуры JSON с языком эксплуатируемых выражений (JPRX) для безопасных пользовательских интерфейсов, созданных ИИ. Гипермедиа и взаимодействие Система гипермедиа 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 имеет первоклассную поддержку веб-компонентов. Вы можете вставлять контент непосредственно в корень тени с помощью location="shadow" или :shadow suffix на цели (например, target="#component:shadow"). Это отличает его от HTMX, который фокусируется на Light DOM. & ): Настроить действия 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 селектор. Self-Sourced Partials (CSS Selectors as Source) src Это позволяет использовать «Самоисточник частиц», где содержимое может быть извлечено из В скрытой Это уменьшает сетевую перегрузку и позволяет разработчикам связывать «офлайн» частицы непосредственно в пределах начальной загрузки страницы. <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 поддерживает автоматическое прокручивание к идентификатору определенного элемента при загрузке контента через Навигация через Если URL содержит фрагмент хаша (например, Lightview автоматически ожидает загрузки контента, а затем прокручивает целевой элемент в вид. Automatic Hash Scrolling src href /docs/api.html#signals Умные компенсации: Положение прокрутки автоматически учитывает фиксированную навигационную строку, если она определена (через --site-nav-height). Поддержка Shadow DOM: Прокрутка также работает для контента, загруженного в 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()) , которые возвращают ложное значение для отмены события. Реактивность и государство Lightview включает в себя встроенную, мелкозернистую систему реактивности (Сигналы и состояние), которая позволяет мгновенно обновлять и автоматически разрешать шаблоны. Эта система предусматривает: Автоматическое разрешение шаблонов: теги ${...} в HTML автоматически обновляются при изменении состояния. : Signals and states can be registered by name for easy template binding. Named Registration JSON Schema Control: обеспечение целостности данных в реактивном состоянии с помощью стандартной JSON Schema. Для подробного технического сравнения реактивного состояния Lightview по сравнению с серверным подходом HTMX см. в секции. Государственное управление Data-Driven и пользовательские интерфейсы AI Одной из самых отличительных особенностей Lightview является поддержка (vDOM, oDOM) и (в том числе Data-as-UI Safe AI-Generation Lightview может получать и рендерировать интерфейс пользователя, определенный как JSON, что зачастую легче для бак-эндов генерировать и управлять, чем строки HTML. Multiple JSON Formats vDOM — стандартная структура виртуального дома. oDOM: аббревиатура «Object DOM» для краткого пользовательского интерфейса, основанного на конфигурации. /* 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": "+" } } ] } } : Позволение ИИ писать сырой JavaScript является риском для безопасности. это песочный формат JSON, в котором ИИ может определять структуру и логику выполнение произвольного кода. В этой архитектуре, служит безопасным логическим и экспрессивным языком, встроенным в структуру cDOM, обеспечивая мощность реактивности и логики без уязвимостей безопасности . Safe AI Generation with cDOM cDOM (Clean/Computed DOM) Без JPRX (JSON Path Reactive eXpressions) eval : No or arbitrary script execution. Security eval Логика: поддерживает логику, такую как «если», «лопатка», математику и более 100 других функций через безопасный язык выражения (JPRX). Использование Case: Идеально подходит для "GenUI" приложений, где LLM генерирует интерфейс на ходу. Используйте cDOM, когда вы хотите динамизм генерируемого интерфейса без кошмара безопасности генерируемого JavaScript. Сравнение головы с головой Syntax и API Surface : HTMX Настраиваемые атрибуты hx-* для всех функций Обширный словарь атрибутов (hx-get, hx-post, hx-target, hx-trigger и т.д.) Consistent prefix makes HTMX features immediately recognizable Постепенная кривая обучения из-за разнообразия атрибутов : Lightview Использует стандартные атрибуты HTML (src, href) где это возможно Меньшие атрибуты словаря Более знакомы для разработчиков, которые знают HTML JavaScript API для реактивных функций или cDOM/JPRX для более безопасной реактивности Запрос действий Обе рамки поддерживают индивидуальные методы HTTP и тела запросов, но с разными подходами: Используйте специальные атрибуты: HTMX <form hx-post="/submit" hx-swap="outerHTML"> Используйте стандарт Атрибуты для конфигурации: Lightview data- <button href="/api/endpoint" data-method="POST" data-body="#myForm"> Save </button> Он очень гибкий: Lightview's data-body CSS Selector: автоматически сериализирует цель (например, #myForm как FormData или значение ввода). : Use for literal JSON payloads. JSON json:{"id": 1} : Use to pull data directly from reactive state. Javascript javascript:state.get('user') Текст: Используйте текст:Привет для простых текстовых загрузок. Триггеры событий Имеет сложную синтаксию триггеров: HTMX <input hx-get="/search" hx-trigger="keyup changed delay:500ms"> Имеет аналогичный подход с использованием Гейтс : Lightview lv-before <input oninput="search(this.value)" lv-before="input debounce(500)"> Позиционирование и таргетирование контента Обе рамки обеспечивают гибкий контроль над тем, где вставляется контент: использует и Атрибуты : 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 Дизайн для серверных гипермедиа (HDA) Источники должны быть URL-адресами, которые возвращают ответы гипермедиа (HTML) Требуется сетевое запрос для каждого частичного обновления : Lightview Гибкость многочисленных источников Источниками могут быть URL-адреса или CSS-селекторы Активирует «Самоисточник частиц», где содержимое извлекается из локальных тегов <template> или других элементов DOM Позволяет комбинировать фрагменты общего интерфейса, чтобы уменьшить первоначальный водопад сети Переходы и анимации имеет первоклассную поддержку анимации с классами обменной фазы, индикаторами состояния запроса, модификаторами времени и интеграцией API View Transitions, что позволяет приложениям гипермедиа достигать SPA-подобной плавности. HTMX В настоящее время он обрабатывает переходы с помощью стандартных переходов CSS/анимаций и хаков жизненного цикла компонентов без встроенных абстракций фазы обмена. Lightview State Management Именно здесь рамки наиболее существенно различаются в своем архитектурном подходе: HTMX: серверное состояние HTMX является чисто гипермедиа-фокусированным. Состояние на стороне клиента минимально, обычно обрабатывается через: Сессия сервера: Состояние поддерживается в базе данных или сессии. : passing state back and forth in requests. Hidden Form Fields Атрибуты DOM: Сохранение простого состояния в атрибутах data-*. Интеграция Alpine.js: Для сложной логики на стороне клиента разработчики HTMX часто прибегают к Alpine.js или аналогичным легким библиотекам. Lightview: клиент-страничная реактивность Lightview включает в себя полную, мелкозернистую систему реактивности, вдохновленную SolidJS. Это делает ее многопарадигматической структурой, которая может обрабатывать состояние независимо от сервера. : When HTML is fetched via or 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 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 Сигнал (значение): Для примитивных значений. состояние (объект): для глубокого наблюдения за объектами и массивами. эффект (fn): для запуска побочных эффектов при изменении зависимостей. Это архитектурное отличие делает Lightview более полной рамкой приложений, в то время как HTMX остается специализированным инструментом усовершенствования гипермедиа. Обновления в реальном времени имеет первоклассную поддержку WebSockets и Server-Sent Events: HTMX <div hx-ext="sse" sse-connect="/updates" sse-swap="message"> не имеет встроенной поддержки WebSocket/SSE (по состоянию на текущую версию), хотя ее можно добавить через стандартный JavaScript. Lightview Security опирается на стандартные практики веб-безопасности: HTMX Политика одинакового происхождения CSRF token support via hx-headers Совместимость политики безопасности контента Включает в себя безопасность по умолчанию: Lightview Политика одноименного домена выполняется автоматически Опасное блокирование протокола (javascript: данные:) Настраиваемые валидационные хоуки Progressive Enhancement Преимущества прогрессивного повышения: HTMX <!-- Works without JS, enhanced with JS --> <body hx-boost="true"> <a href="/page">Link</a> <form action="/submit" method="post"> За исключением того, что в настоящее время отсутствует встроенная поддержка веб-сокетов или событий на стороне сервера, подход Lightview также способен к прогрессивному улучшению. и are supported for every element, there is no need for anything like . Lightview href src hx-boost Компонентная архитектура не имеет компонентной модели — она усиливает стандартный HTML. HTMX includes: Lightview Единичные файловые компоненты Храмовые компоненты Импорт/экспорт переменных между компонентами Песчаные удаленные компоненты Он также предусматривает Для общих моделей UI, например. , , , и т. д. 50 встроенных компонентов Загрузка Карты Chart ДРАВЕР Используйте случаи Когда выбрать HTMX Добавление интерактивности к серверным приложениям: HTMX преуспевает в постепенном улучшении традиционных веб-приложений Знакомство команды с рендерингом на стороне сервера: если ваша команда чувствует себя комфортно с Rails, Django, Laravel и т.д. : HTMX degrades gracefully when JavaScript is disabled Progressive enhancement is critical Функции в режиме реального времени: встроенная поддержка WebSocket/SSE : HTMX's single-purpose focus makes it easy to reason about Simple, predictable behavior Когда выбрать LightView Гибкость в нескольких парадигмах: когда вы хотите объединить функциональное программирование, пользовательский интерфейс на основе JSON и гипермедиа в одну кодовую базу Безопасный пользовательский интерфейс, созданный ИИ: использование cDOM для безопасных, песчаных интерфейсов, созданных ИИ Архитектура на основе компонентов: когда вы хотите многократно использовать компоненты без шага построения Реактивность на стороне клиента: приложения, нуждающиеся в мелких реактивных обновлениях Shadow DOM/Web Components: встроенная поддержка инкапсуляции Гибридный подход: смешивание паттернов гипермедиа с реактивным программированием : When you want to use hypermedia patterns but source some content locally from the DOM to reduce network requests or provide offline-ready sections Self-Sourced Partials Обсуждения по результатам Обе рамки эффективны, но оптимизируют разные вещи: : HTMX Сетевая оптимизация (уменьшение круговых поездок) Сервер выполняет тяжелый подъем Минимальная обработка клиента История и caching встроенные : Lightview Реактивность в тонких зернах (только обновления меняют узлы) Нет виртуального DOM, диффференцирующего над головой Может уменьшать сетевые запросы с состоянием на стороне клиента Отслеживание зависимости оптимизирует рендеров опыт разработчика Учебная кривая : HTMX Концептуально просто: HTML + атрибуты Обширная документация и примеры Большое общество и экосистема Книга «Гипермедиа» как всеобъемлющее руководство : Lightview Множественные ментальные модели (гипермедиа + реактивность + функциональность) Комплексная документация с более чем 40 компонентами и обширными примерами Меньшее сообщество Требуется понимание множества парадигм программирования Дебютировать : HTMX Браузер DevTools работает естественно Excellent logging and events for debugging Простая проверка запроса/ответа : Lightview Отслеживание зависимости может быть сложнее дебютировать Reactive updates may be less obvious Встроенный режим развития помогает Экосистема и усыновление : HTMX Зрелая экосистема с плагинами и расширениями Поддержка серверной библиотеки на всех основных языках Большое и активное сообщество Используется в производстве многими компаниями Часть более широкого движения гипермедиа : Lightview Маленькая, но растущая экосистема Совместимость с Companion Backend Framework (Watchlight) Меньше интеграции третьих сторон Новое на сцену Размер HTMX HTMX minified и 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, составляет 20 КБ, и это также дает вам много другой мощности. Code Comparison: Building the Same Feature Let's build an active search feature with both frameworks: версия 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)": Декларативно дебонсирует ввод на 300 мс, заменяя потребность в сложной синтаксисе запуска. target="#results": направляет ответ HTML или JSON в исходные дивы. Интеграция с Backend Frameworks Работает с любой серверной технологией, которая может генерировать HTML. HTMX works with any JSON or HTML-generating backend—it doesn't dictate server-side architecture. Lightview Миграционный путь От SPA до HTMX HTMX предлагает постепенный путь миграции: Начните с hx-boost на существующие формы и ссылки Постепенно добавлять более сложные гипермедиа-интеракции Замена SPA маршрутов гипермедийными конечными точками От SPA до Lightview Lightview также предлагает постепенный путь: Начните, превратив всего несколько элементов в гипермедиа Постепенно добавлять более сложные гипермедиа-интеракции Эволюция функциональных компонентов в обозначенные функции Включение имен сигналов и состояния Добавьте динамическое поколение ИИ с cDOM/JPRX Заключение И HTMX, и Lightview представляют собой убедительные альтернативы, но удовлетворяют различные потребности: : Choose HTMX if you want Чистая гипермедиа-ориентированная архитектура Минимальная сложность клиента Постепенное повышение Проверенное, проверенное решение Сильное сообщество и экосистема : Choose Lightview if you want Гибкость многопарадигм (функциональная, JSON, гипермедиа) Безопасный AI-генерированный интерфейс с cDOM/JPRX Компонентная архитектура без строительных инструментов Финозернированная реактивность Поддержка Shadow DOM/Web Component Свобода выбора стиля программирования Самоисточник локальных частиц с помощью селекторов CSS Ключевое отличие: HTMX фокусируется на гипермедиа лазером и делает это исключительно хорошо. между несколькими парадигмами – это не заставляет вас выбирать гипермедиа для всего. Один вариант HTMX остается верным гипермедийному видению с лазерным фокусом, в то время как Lightview принимает гибкость, позволяя вам использовать функциональное программирование (например, BauJS), представление JSON (например, JurisJS) или модели гипермедиа в соответствии с вашими требованиями. ресурсов HTMX Официальный сайт: htmx.org Книга: «Системы гипермедиа» на сайте hypermedia.systems Discord: Активная общественная дискуссия LightView Официальный сайт: lightview.dev Статья о создании безопасного пользовательского интерфейса ИИ: как создать выработанный ИИ калькулятор без пользовательского JavaScript
