Hotwire

Hotwire — это набор технологий для веб-разработки, предложенный компанией Basecamp (США) в 2020 году, который позволяет создавать динамические веб-приложения с минимальным использованием клиентского JavaScript. Основная идея Hotwire заключается в том, чтобы отправлять с сервера HTML-код вместо JSON-данных, а на клиенте обновлять только необходимые части страницы, что упрощает архитектуру и ускоряет разработку.

История

Технология Hotwire была создана Дэвидом Хайнемайером Ханссоном (DHH) и командой Basecamp как эволюция их подхода к веб-разработке, известного как «Ruby on Rails». Первоначально в Rails использовался подход «Server-Generated JavaScript Responses» (SJR), где сервер возвращал JavaScript-код для обновления страницы. Однако этот метод имел недостатки, связанные с производительностью и сложностью отладки.

В 2020 году, в рамках работы над новым проектом HEY (почтовый сервис), команда Basecamp разработала Hotwire как альтернативу SJR. Название «Hotwire» расшифровывается как «HTML Over The Wire» (HTML по проводам). Публичная презентация технологии состоялась на конференции RailsConf 2020. В декабре 2020 года Hotwire был официально интегрирован в Ruby on Rails 7.

Составные части

Hotwire состоит из трёх основных компонентов, которые могут использоваться как вместе, так и по отдельности:

Turbo

Turbo — это центральный компонент Hotwire, который управляет передачей HTML-кода между сервером и клиентом. Он включает несколько подсистем:

Turbo Drive — ускоряет навигацию по страницам, перехватывая все переходы по ссылкам и отправку форм. Вместо полной перезагрузки страницы Turbo Drive заменяет только содержимое тега <body> и обновляет заголовок страницы, что создаёт иллюзию одностраничного приложения без необходимости писать JavaScript-код.

Turbo Frames — позволяет разбить страницу на независимые фреймы. Каждый фрейм может загружать или обновлять своё содержимое независимо от других частей страницы. Это особенно полезно для таких элементов, как пагинация, формы редактирования или вкладки.

Turbo Streams — обеспечивает обновление частей страницы в реальном времени через WebSocket-соединения или серверные события (Server-Sent Events). Turbo Streams передаёт набор инструкций (например, «добавить элемент», «заменить элемент», «удалить элемент»), которые выполняются на клиенте без перезагрузки страницы.

Stimulus

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

Stimulus работает по принципу «контроллеров» — небольших JavaScript-классов, которые привязываются к HTML-элементам через атрибуты data-controller. Контроллеры могут реагировать на события (например, клики, ввод текста) и изменять DOM-дерево, но не занимаются загрузкой данных с сервера — это задача Turbo.

Strada

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

Принцип работы

Hotwire основан на идее «серверного рендеринга» (Server-Side Rendering, SSR). Когда пользователь выполняет какое-либо действие (например, нажимает кнопку или отправляет форму), запрос отправляется на сервер. Сервер обрабатывает запрос, генерирует новый HTML-код и отправляет его обратно клиенту. Turbo на клиенте получает этот HTML-код и заменяет им соответствующие части страницы, не перезагружая её полностью.

Этот подход отличается от традиционных одностраничных приложений (SPA), где сервер отправляет JSON-данные, а клиентский JavaScript-фреймворк (React, Vue, Angular) самостоятельно генерирует HTML-код. В Hotwire вся логика генерации HTML остаётся на сервере, что упрощает разработку и снижает требования к клиентским устройствам.

Преимущества и недостатки

Преимущества

Простота разработки — разработчикам не нужно изучать сложные клиентские фреймворки и управлять состоянием на клиенте. Вся логика остаётся на сервере, что особенно удобно для команд, работающих с Ruby on Rails, Python Django, Laravel или другими серверными технологиями.
Производительность — Hotwire отправляет только необходимый HTML-код, а не весь JavaScript-бандл, что снижает объём передаваемых данных и ускоряет загрузку страниц.
SEO-оптимизация — поскольку HTML-код генерируется на сервере, поисковые системы могут легко индексировать содержимое страниц без необходимости выполнения JavaScript.
Совместимость — Hotwire работает на любом современном браузере без дополнительных плагинов или полифиллов.
Меньше кода — по утверждению разработчиков, Hotwire позволяет сократить объём клиентского JavaScript-кода на 90–95% по сравнению с традиционными SPA.

Недостатки

Зависимость от сервера — каждое действие пользователя требует запроса к серверу, что может увеличить задержки при медленном интернет-соединении.
Ограниченная интерактивность — Hotwire плохо подходит для приложений с высокой степенью интерактивности, таких как графические редакторы, игры или приложения с офлайн-режимом.
Сложность с WebSocket — настройка Turbo Streams для работы в реальном времени может потребовать дополнительных серверных компонентов (например, Redis или Action Cable).
Ограниченная экосистема — Hotwire в первую очередь ориентирован на Ruby on Rails, хотя существуют реализации для других языков (например, Hotwire для Laravel, Django, Phoenix).

Применение

Hotwire чаще всего используется в веб-приложениях, где требуется высокая скорость разработки и низкая сложность, но не требуется сложная клиентская логика. Типичные примеры:

Панели администрирования — системы управления контентом (CMS) и административные интерфейсы.
Социальные сети — ленты новостей, комментарии, лайки.
Электронная коммерция — каталоги товаров, корзины, оформление заказов.
Сервисы для бизнеса — CRM, системы управления проектами, бухгалтерские приложения.

Примеры использования

HEY — почтовый сервис от Basecamp, который стал первым крупным проектом, использующим Hotwire.
Basecamp — платформа для управления проектами, также разработанная компанией-создателем Hotwire.
GitHub — частично использует Turbo для ускорения навигации (например, при просмотре файлов).

Интересные факты

Hotwire не требует установки дополнительных пакетов для Ruby on Rails 7 — он входит в стандартную поставку фреймворка.
Технология Hotwire вдохновлена более ранними подходами, такими как «pjax» (pushState + AJAX) и «Turbolinks».
В 2021 году компания Basecamp выпустила книгу «Hotwire: Modern Web Applications Without JavaScript» под руководством Дэвида Хайнемайера Ханссона.

Критика

Основная критика Hotwire связана с его ограниченной применимостью для сложных пользовательских интерфейсов. Критики отмечают, что для приложений с высокой степенью интерактивности (например, Google Docs или Figma) Hotwire не подходит, так как требует постоянного обмена данными с сервером. Также высказываются опасения, что Hotwire может привести к «блокировке» разработчиков в экосистеме Ruby on Rails, хотя существуют реализации для других языков.

Источники

Документация Hotwire (hotwired.dev)
Книга «Hotwire: Modern Web Applications Without JavaScript» (DHH, 2021)
Статья «Introducing Hotwire» (блог Basecamp, 2020)
Репозиторий Turbo на GitHub (github.com/hotwired/turbo)
Документация Ruby on Rails 7 (guides.rubyonrails.org)

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →