Hotwire 1.0 — конец гегемонии React от DHH?

24 сентября (буквально в первый день RubyRussia 2021) Дэвид Хейнемейер Ханссон в новой версии Ruby on Rails анонсировал новый стек технологий для разработчиков — Hotwire. 

DHH не боится говорить громко и идти против популярных мнений. Да и Rails считается очень opinionated фреймворком. Так вот Дэвид Хейнемейер Ханссон говорит, что современный фронтенд сложен, пора с этим что-то делать.

 — Мы должны вернуться к идее, что один разработчик может осмелиться понять всё. Может сделать всё. Может создавать конкурентоспособные веб-приложения, не пытаясь впихнуть в них все новые и новые сложности, — Дэвид Хейнемеер Ханссон.

Конечно, сегодня сайты комплекснее, чем 10-20 лет назад. Но их внутренняя сложность во многом накопленная и историческая. При этом не все Ruby-разработчики делают систему уровня Google или Amazon. Многие задачи, которые мы решаем, это обычная автоматизация бизнеса: CRUD-приложения, админки, ERP, CRM. Современный «грузный» фронтенд там не всегда нужен, а иногда даже мешает.

Новый стек технологий Hotwire (Turbo 7 + Stimulus 3) позволяет делать достаточно хороший фронтенд простым способом. В альфа-версии Rails 7 он уже доступен, можно ковыряться и пробовать. 

 

Что внутри у Hotwire?

Ядро Hotwire — это Turbo 7, который развивает идею Turbolinks. Честно говоря, рубисты не очень любили Turbolinks, уж слишком она была простой. Шаг влево или вправо от простых рецептов требовал переделывать все, поэтому любой туториал по использованию Rails начинался со слов «отключите Turbolinks». 
С седьмыми «рельсами» мы меняем парадигму: отключите Turbolinks, включите Turbo. Эта технология позволяет делать ненавороченный (хотя можно и накрутить) фронтенд простыми способами. 

 

 

Stimulus 3 расширяет Turbo 7 позволяет добавить немного дополнительной логики со стороны браузера. Для простых проектов Stimulus всё делает сам: берет у Rails-приложения инструкции, что делать, и изменяет страничку. Можно написать и свой JS-код для логики и компонентов и делать все то, что привыкли делать в ReactJS или AngularJS для сборки сложных элементов фронтенда.

Как работает Turbo 7? 

Пользователь открывает совершенно обычную, web 1.0 HTML-страницу. Но она устанавливает WebSocket соединение с рельсовым приложением. 
Когда пользователь нажимает на кнопку или еще как-то взаимодействует со страницей, или сервер хочет что-то сказать, или требуется изменить состояние страницы, то Rails-приложение говорит с браузером по WebSocket соединению именно по протоколу Turbo 7.

Что может бэкенд-приложение сказать браузеру? Например, «измени состояние», для этого в протоколе Turbo 7 есть определенные «фразы». Можно менять всю страницу или отдельные ее части. Чтобы делать это минимальным количеством кода, в Turbo 7 есть специальная библиотека для Rails. 

Что изменил Hotwire? 

Теперь можно не делать фронтенд там, где он не нужен. 

Допустим, вы разрабатываете небольшое приложение, тестируете функциональности или просто автоматизируете процесс, работающий в эксельке, в полноценное веб-приложение. Теперь можно привычно, прям внутри рельсов с помощью ERB верстать все HTML-страницы. А с помощью небольшого дополнительного синтаксиса и протокола Turbo 7 добавлять в страницы интерактивность. 

Пользователь теперь будет нажимать на кнопку, и нам не надо будет обрабатывать ее на фронтенде. Браузер сам обратится к бэкенду и спросит, что делать. А приложение само скажет, что показать и даже отдаст все нужное. 
Можно показывать новые страницы, отправлять формы, делать подсказки и всплывающие сообщения. То есть полноценное web 2.0 интерактивное приложение, но без вручную сделанного фронтенда. 

Конечно, Hotwire имеет свои ограничения. Сложные кейсы потребуют более сложного фронтенда. Но DHH надеется, что эта технология позволит решать большинство задач простым способом, а дальше вокруг вырастет экосистема и у нас будет выбор: использовать громоздкий набор Webpack+react+сложный routing и контроль состояния или просто Rails+Hotwire.

Кстати, Hotwire не завязан намертво на Ruby и Rails. С ним активно экспериментируют разработчики на других языках и фреймворках. Например, у питонистов есть порт стека для Django. 

Взлетит ли? Точно взлетит! 

Во-первых, Hotwire продолжает идеи, которые созрели в сообществе разработчиков уже давно. 

А во-вторых, На этих технологиях уже работает приложение Hey и готовится 4 версия Basecamp. Получается, что команда DHH создала и поддерживает технологию, которую сами же и используют. Можно надеяться на обновления и улучшения.

Мы с большим интересом будем следить за Hotwire, обязательно применим его в проектах и поделимся подробностями. Ждите кейсов и докладов про него на наших митапах и, конечно, на RubyRussia 2022 (держим кулачки, чтобы она прошла в гибридном формате — офлайн+онлайн). 

P.S.: Кстати, податься на наши мероприятия с докладом по Hotwire раньше всех — отличный хак для быстрого одобрения участия ;)

Что почитать и посмотреть?

Анонсы Turbo 7 и Stimulus 3 с подробным описанием возможностей от DHH.
Пример SPA-like фронтенда, сделанного на Hotwire, с подробным объяснением.
Большая статья с примерами от наших друзей — Evil Martians.
7-минутный ролик «Что такое Hotwire?» от PragmaticStudio. 

События