Hacker News Digest

HTMX предлагает декларативный подход к веб-разработке через HTML-атрибуты, что могло бы сократить потребность в JavaScript, если бы браузеры поддерживали такие семантики изначально. Однако автор отмечает, что HTMX не предоставляет чёткой структуры, подобной SPA-фреймворкам, что ведёт к риску создания спагетти-кода, как в случае с jQuery.

В ответ на это был создан MESH — фреймворк, сочетающий модульный SSR с гидрацией, где каждый компонент соответствует одному эндпоинту. Это позволяет писать бэкенд с фокусом на HTML, сохраняя ощущение работы с SPA. Для демонстрации использовались Go, Templ и Declarative Shadow DOM, с небольшим хаком для обхода ограничений HTMX внутри теневых DOM. Ключевая идея — обеспечить единственно верный способ структурирования кода, избегая хаоса.

• Обсуждается применимость HTMX для различных типов приложений: отличное решение для многостраничных приложений, но может быть неоптимальным для сложных SPA-подобных интерфейсов с интенсивным взаимодействием (например, drag-and-drop).
• Представлены альтернативные подходы и фреймворки: MESH (один эндпоинт на компонент), Data-Star (обновление по SSE), Blazor, Leptos, а также использование чистого JS или Web Components.
• Поднимаются технические нюансы HTMX: поведение по умолчанию при замене контента (innerHTML), обработка ошибок, ограничения парсера DOM при работе с Shadow DOM.
• Критикуется тенденция добавления абстракций поверх HTMX, что, по мнению части участников, противорит его философии простоты и возврата к истокам.
• Отмечается ценность HTMX и подобных инструментов как реакция на сложность современных JS-фреймворков и возможность быстрой разработки без сборки.

• Lit — простая, быстрая библиотека для Web Components
• Bluesky: lit.dev

---

Основные плюсы

• Simple
  Минимум шаблонного кода: реактивность, декларативные шаблоны, продуманные фичи.

• Fast
  ≈ 5 КБ (сжато), рендер только изменённых частей, без виртуального DOM.

• Web Components
  Нативные кастом-элементы работают в любом фреймворке и без него.

---

Мини-пример

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;
  @property() name = 'Somebody';
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

<simple-greeting name="World"></simple-greeting>

Попробовать в Playground

---

Возможности

• Custom Elements — встраиваются как обычные теги.
• Scoped styles — Shadow DOM изолирует CSS.
• Reactive properties — автоматический перерендер при изменении.
• Declarative templates — нативные литералы, без компиляции.

---

Что строят на Lit

• Shareable Components — капсулы для любого стека.
• Design Systems — единые компоненты под разные фреймворки.
• Sites & Apps — постепенное улучшение или полные приложения.

---

Кто использует

Adobe Spectrum, Alaska Auro, Cisco Momentum, Home Assistant, IBM Carbon, Lion, Pharos, PWA Starter, SAP UI5, Shoelace, Hilla, Clarity, Wired Elements и др.

---

Учимся и общаемся

• Туториалы
• Playground
• Документация
• Get started

• Кто-то рад избавиться от Lit, считая его лишним слоем; другие называют «недооценённой» и «лучшей абстракцией» над Web Components.
• Пользователи хвалят маленький размер, отсутствие бойлерплейта и лёгкость внедрения в legacy-проекты, но жалуются на shadow DOM (проблемы a11y, стили) и отсутствие SSR.
• Некоторые вообще отказались от фреймворков и пишут «сырые» web-компоненты, считая, что Lit лишний.
• Вопросы к мейнтейнеру: SSR, реактивность свойств, взаимодействие со сторонними компонентами, работа без бандлера.

• Это не настоящий WYSIWYG, а прозрачное синтакс-подсветка Markdown в textarea.
• Работает через наложение прозрачной textarea на div-рендер, что даёт лёгкость и совместимость с undo/redo и мобильной клавиатурой.
• Пользователи хвалят простоту (≈45 KB, нет зависимостей), но замечают просадку FPS на телефонах, смещение каретки и невозможность вставки картинок.
• Часто предлагают завернуть решение в web-component с shadow DOM, чтобы избежать проблем CSS-наследования.
• Несколько человек поделились похожими проектами (CodeJar, rich-textarea, Milkdown) и предложили добавить авто-списки, подсветку кода в блоках и поддержку variable-width шрифтов.