Перейти к содержимому

🎯htmx и Hotwire — это современные инструменты для веб-разработки, которые позволяют создавать быстрые, интерактивные интерфейсы (как в React или Vue), но без написания огромного количества сложного JavaScript-кода. (требование к стеку. (Я: GPT:) )

HTMX — это современная библиотека для создания динамических веб-интерфейсов, которая позволяет использовать возможности AJAX, CSS-переходов, WebSockets и Server-Sent Events прямо в HTML-разметке.

Если говорить проще: HTMX позволяет делать сайты интерактивными (как на React), не написав при этом ни строчки на JavaScript.

https://gemini.google.com/app/d600a68222b5fbb1

👨Я:

Цитата:

Это значительно упрощает работу с htmx и Hotwire. Теперь не нужно создавать десятки мелких файлов-фрагментов (_button.html, _row.html) — можно хранить всё в одном главном шаблоне и запрашивать из него только нужный кусок.

что значит в этом контексте htmx и Hotwire ?

🤖💬Gemini:

В контексте этой цитаты htmx и Hotwire — это современные инструменты для веб-разработки, которые позволяют создавать быстрые, интерактивные интерфейсы (как в React или Vue), но без написания огромного количества сложного JavaScript-кода.

Их объединяет общая философия: HTML-over-the-wire (передача HTML по сети).


Что это такое?

  • htmx: Это библиотека, которая позволяет делать AJAX-запросы, обновлять части страницы и обрабатывать события прямо через HTML-атрибуты (например, hx-get="/profile"). Вам не нужно писать JS-функцию, чтобы обновить кнопку; вы просто говорите кнопке, какой кусочек HTML загрузить с сервера.
  • Hotwire (HTML Over The Wire): Это набор инструментов от создателей Ruby on Rails (компании 37signals). Его главная часть, Turbo, работает похожим образом — он перехватывает клики по ссылкам и отправку форм, заменяя только изменившиеся части страницы вместо полной перезагрузки.

О какой проблеме идет речь в цитате?

Обычно, чтобы обновить только маленькую часть страницы (например, одну строку в таблице), сервер должен прислать в ответ только HTML этой строки, а не всю страницу целиком.

До появления технологий, о которых говорит автор: Разработчикам приходилось дробить код на десятки «микро-файлов» (фрагментов):

  • index.html (основная страница)
  • _row.html (отдельный файл только для строки таблицы)
  • _button.html (отдельный файл для кнопки)

Это делалось для того, чтобы сервер мог отрендерить и отправить только этот маленький кусочек. Это приводило к «каше» в папках проекта и путанице.

Что изменилось (суть цитаты): Современные серверные движки (например, Jinja с расширениями, Django-fragments или новые версии Rails) научились отдавать блоки из одного большого файла.

  1. У вас есть один файл users.html.
  2. Внутри него помечен блок {% block user_row %}.
  3. Когда htmx или Hotwire запрашивает обновление, сервер не лезет в отдельный файл _row.html, а просто выкусывает нужный блок из основного шаблона и отправляет его.

Итог: Ваш код остается цельным и понятным, а сайт работает быстро и без перезагрузок.


Хотите, я покажу наглядный пример кода, как именно htmx запрашивает такой «кусок» из шаблона?