Phoenix LiveView, популярный инструмент для разработки интерактивных веб-приложений на базе фреймворка Phoenix и языка программирования Elixir, получил долгожданное обновление — версию 1.1. Эта версия знаменует собой важный шаг вперед после выхода первой стабильной версии 1.0 в декабре 2024 года. Разработчики сосредоточились на воплощении новых функций, улучшении производительности и упрощении интеграции JavaScript в проекты с использованием LiveView.
Благодаря этим изменениям создание высокоинтерактивных пользовательских интерфейсов без необходимости писать обширный клиентский код становится еще более удобным и эффективным. Одним из ключевых нововведений в Phoenix LiveView 1.1 стала поддержка колокированных хуков (colocated hooks). Ранее, чтобы добавить небольшой JavaScript-фрагмент к HEEx-компоненту, приходилось создавать отдельный JavaScript-файл, отдельно управлять импортами и учитывать сложности организации кода. Новый подход позволяет размещать JavaScript-код прямо внутри HEEx-шаблона с использованием специального тега <script> с указанием типа Phoenix.
LiveView.ColocatedHook. Такое решение упрощает структуру проекта, минимизирует беспорядок и повышает читаемость кода, благодаря чему малые кусочки JavaScript логично находятся рядом с соответствующим компонентом. Эта функция не только упрощает жизнь разработчикам, но и позволяет библиотекарям создавать хуки с использованием коротких и неперекрывающихся имен за счет автоматического префикса имени хука точкой, предотвращающего конфликты в рамках глобальной области видимости. Помимо колокированных хуков, появился более универсальный механизм колокирования JavaScript, известный как Phoenix.
LiveView.ColocatedJS. Он позволяет размещать любые JavaScript-фрагменты, относящиеся к конкретному компоненту, непосредственно внутри его HEEx-шаблона. Такой подход прекрасно подходит для небольших скриптов, например, для управления настройками, которые должны быть доступны сразу при загрузке страницы, минуя задержку отображения, характерную для хуков, которые срабатывают только при монтировании LiveView. Это делает возможным эффективное хранение состояния для различных UI-элементов, таких как панель навигации с запомненным состоянием развернутия, что в конечном итоге улучшает пользовательский опыт.
Еще одним важным улучшением стали «ключевые» (keyed) сопрограммы для оптимизации рендеринга списков и коллекций. В предшествующих версиях LiveView при изменении элемента списка приходилось перерисовывать и отправлять в браузер весь список целиком, что сокращало производительность и увеличивало нагрузку на сеть. Использование потоков (streams) помогало частично решить эти проблемы, но не всегда было удобно и не подходило для всех случаев. Новый механизм позволяет LiveView автоматически отслеживать изменения в списках с помощью ключевых атрибутов :key и использовать индекс как ключ по умолчанию. Таким образом, LiveView значительно сокращает объем данных, отправляемых клиенту при изменении отдельных элементов списка, что особенно важно для приложений с динамическим содержимым и большим количеством данных.
Это новшество предоставляет разработчикам удобный инструмент для оптимизации производительности без необходимости внедрять полноценные LiveComponent’ы для каждого элемента списка, хотя возможность их использования сохраняется и не теряет актуальности. В 1.1 версии также появилась поддержка тайпинга для JavaScript API публичных интерфейсов LiveView. Это особенно полезно для разработчиков, использующих современные редакторы и IDE с поддержкой автодополнения и статической проверки типов в JavaScript коде. Наличие деклараций типов позволяет существенно упростить написание и поддержку клиентской логики, сделать интеграцию между Elixir кодом и JavaScript максимально бесшовной и предсказуемой.
Еще одной интересной функцией, добавленной в Phoenix LiveView 1.1, стали порталы (portals), вдохновленные аналогами из популярных JavaScript-фреймворков React и Vue.js. Они позволяют «перемещать» отрендеренный элемент DOM в другую часть страницы вне его родительского контекста без нарушения логики обновления и обработки событий. Это особенно актуально для таких интерфейсных элементов, как всплывающие подсказки, модальные окна и выпадающие меню, которые могут зависеть от внешних стилистических ограничений, например, overflow: hidden.
Использование порталов обеспечивает более гибкий и правильный рендеринг подобных компонентов, поддерживая при этом полную интеграцию с жизненным циклом LiveView и обработку событий, даже если компоненты находятся вне своей первоначальной иерархии DOM. Важным техническим улучшением стало переход с библиотеки Floki к LazyHTML для парсинга HTML в тестах. LazyHTML базируется на проекте lexbor и обеспечивает более современную и точную обработку HTML и CSS селекторов. Это значительно улучшает совместимость тестов с актуальными браузерными стандартами и повышает производительность тестирования. Для разработчиков, обновляющихся с предыдущих версий Phoenix LiveView, изменения минимальны и легко внедряются благодаря рекомендациям и правкам в тестах, обычно сводящимся к замене селекторов.
Все вышеперечисленные изменения направлены на то, чтобы сделать Phoenix LiveView более мощным, гибким и удобным инструментом создания интерактивных веб-приложений с минимальным количеством JavaScript. Разработка теперь становится проще, а клиентская производительность — выше, что способствует созданию действительно высококачественного пользовательского опыта. Решения с колокированным JavaScript и хуками сглаживают привычные сложности интеграции фронтенда и бэкенда, в то время как новые оптимизации рендеринга ускоряют работу приложений с большими и изменяющимися наборами данных. Кроме того, функционал порталов расширяет возможности построения интерфейсов, позволяя создавать сложные визуальные компоненты без обходных путей и костылей. Для тех, кто хочет быстро обновиться до версии 1.
1, команда разработчиков подготовила подробный changelog и утилиту Igniter, автоматизирующую процесс обновления. Это снижает барьеры для перехода и позволяет начать использовать новые возможности без лишних хлопот. В заключение стоит отметить, что Phoenix LiveView 1.1 получил множество отзывов от сообщества и сегодня считается одной из самых востребованных технологий для разработки современных веб-приложений на базе Elixir. Благодаря активной поддержке Dashbit и влиятельным консультантам, таким как создатель Elixir Хосе Валим, проект продолжает развиваться и внедрять инновации, которые делают процесс создания интерактивных пользовательских интерфейсов заметно проще и приятнее.
