Веб-разработка с каждым годом движется к тому, чтобы создавать более быстрые, удобные и адаптивные интерфейсы с минимальными затратами ресурсов и времени как со стороны пользователей, так и разработчиков. На фоне множества существующих подходов становятся заметны новые технологии, способные изменить устоявшиеся паттерны работы с вебом и значительно упростить процесс разработки. Среди таких технологий особенное внимание заслуживают Turbo Frames и морфинг — идеи, пришедшие из стека Hotwire и других серверно-ориентированных инструментов, позволящие создавать динамические веб-приложения с шикарным пользовательским опытом, напоминающим нативные десктопные приложения. Эти технологии предлагают качественно иной взгляд на то, как строить интерактивность в интернете, сокращая необходимость большого объема клиентского JavaScript и поддерживая значительную логику на сервере.Изначально многие крупные веб-приложения опирались на построение полноценного фронтенда на JavaScript-фреймворках — React, Angular, Vue и другие.
Несмотря на их возможности, такой подход требует поддержки двусторонней архитектуры — отдельно бекенд и отдельно фронтенд, что усложняет разработку, поддержку и обучение команд. Кроме того, на устройствах с низкой производительностью или с медленным интернет-соединением подобные «тяжелые» приложения могут давать сбои в скорости и стабильности. В этом контексте технологии, ориентированные на сервер и работу с HTML, приобретают новую актуальность.Turbo Frames — одна из ключевых концепций фреймворка Hotwire, разработанного Basecamp. Turbo Frames позволяют делать частичные обновления страниц, загружая только необходимые сегменты HTML и заменяя их в DOM браузера без полной перезагрузки страницы.
Такой подход снижает нагрузку на клиентскую часть и уменьшает объем передаваемых данных, сохраняя при этом динамичность интерфейса. При этом Turbo Frames напоминают классические iframe, но с куда более интегрированным и управляемым поведением, позволяя легко строить взаимосвязанные части интерфейса, обновляющиеся плавно и без лишних задержек.Однако, несмотря на значительные преимущества Turbo Frames, на практике разработчики сталкиваются с определенными ограничениями и проблемами. Например, при полной замене содержимого фрейма теряется состояние элементов внутри него: скролл, фокус ввода, раскрытые меню и другие визуальные и поведенческие аспекты интерфейса. Особенно это заметно на мобильных устройствах, где пространственные ограничения экрана делают сохранение контекста пользователя критически важным.
Перезагрузка панели фильтров, полностью перекрывающей экран, приводит к тому, что пользователь неожиданно теряет позицию и чувствует дискомфорт. Попытки вручную сохранять и восстанавливать скролл через JavaScript зачастую не дают приемлемого результата из-за визуальных подергиваний и задержек.Здесь на помощь приходит морфинг — технология, основанная на сравнении текущей структуры DOM с новой, поступающей с сервера, и обновлении только тех элементов, которые действительно изменились. Инструменты морфинга, такие как idiomorph и morphdom, позволяют значительно сократить визуальные переполнения и сохранить текущее состояние элементов страницы. Вместо того, чтобы менять весь фрагмент целиком, происходит бережное сопоставление и трансформация, благодаря чему например позиция скролла остается прежней, формы не сбрасываются, а взаимодействие становится более плавным и естественным для пользователя.
В экосистеме Ruby on Rails эта идея получила отражение в Turbo 8, вышедшем в 2024 году, который официально поддерживает морфинг при обновлении страницы целиком через Turbo Drive и при частичном обновлении через Turbo Streams. Однако официальная поддержка морфинга для Turbo Frames отсутствует. Причины такого решения скорее всего связаны со сложностью синхронизации истории браузера, управлением состояния навигации и устранением потенциальных конфликтов при частичных обновлениях с эффектом изменения URL. Пока что для многих разработчиков этот факт становился ограничением, особенно если требуется максимально гладкий пользовательский опыт внутри фреймов.Тем не менее, благодаря открытому характеру Turbo и использованию тех же морфинг-библиотек внутри ядра, можно самостоятельно подключить морфинг для Turbo Frames.
Это достигается через использование событий жизненного цикла Turbo, например turbo:before-frame-render, позволяющих перезаписать стандартную функцию рендеринга содержимого. Заменяя рендер на вызов morphdom с опцией childrenOnly, можно добиться сохранения структуры DOM, и, что важно, состояния элементов интерфейса. Такой кастомный подход уже реализован в ряде проектов — в том числе и внутри команды разработчиков Carwow — и демонстрирует высокий потенциал улучшения качества пользовательского опыта.Преимущества использования морфинга в обновлениях Turbo Frames выходят далеко за рамки просто сохранения скролла. Подобный подход минимизирует количество перестроек DOM, снижает нагрузку на браузер, улучшает производительность на мобильных устройствах и экономит трафик пользователя.
За счет уменьшения «миганий» и резких изменений интерфейс ощущается намного более плавным и отзывчивым. Это создает «настольный» опыт использования веб-приложений даже в мобильном браузере, что высоко ценится современными пользователями и заказчиками.На горизонте веб-технологий морфинг и подходы типа Turbo Frames служат важным шагом обратно к серверным технологиям с современным взглядом. Они помогают размыть границы между фронтендом и бекендом, минимализуют дублирование кода, упрощают проектирование приложений и сокращают необходимость глубокой клиентской логики. В перспективе это приведет к более легким и поддерживаемым проектам, которые быстрее развиваются и требуют меньше ресурсов на поддержку.
Однако вызовы и вопросы остаются. Как учитываться при морфинге сложные случаи с уникальностью элементов, скриптами, динамическими компонентами? Как организовать совместную работу с другими технологиями и фреймворками? И как инструмент эволюционирует вместе с будущими стандартами веб-платформы? Чтобы ответить на эти вопросы, требуется дальнейшее развитие экосистемы и активное участие сообщества разработчиков.Опыт Carwow и других компаний иллюстрирует, что современные методы не только теоретические новшества, но и практичные решения, способные улучшить пользовательский опыт и упростить процессы разработки. Подобные кейсы вдохновляют других разработчиков переосмыслить свои подходы и начать экспериментировать с серверными технологиями плюс морфингом для создания действительно быстрых и удобных в использовании приложений.Таким образом, Turbo Frames и морфинг представляют собой значимый прорыв в веб-разработке, объединяя простоту классических серверных рендеров с отзывчивостью и динамичностью современных интерфейсов.
Задержки, громоздкий JavaScript и тяжелые клиентские приложения могут быть частично забыты, уступая место более гладкому, эффективному и приятному взаимодействию с вебом. Сегодня разработчики получили мощный инструмент, способный изменить привычное представление об интерфейсах и положить начало новой эпохе интернета, где сервер и клиент работают в гармонии, а веб-приложения превратились в высокопроизводительные, отзывчивые и удобные платформы для пользователей по всему миру.
