Мы давно упоминали, что используем собственный JavaScript-фреймворк: Мелодия. Сегодня мы рады поделиться с вами фреймворком, который мы используем с 2016 года в качестве проекта с открытым исходным кодом. Мы разработали Melody так, чтобы она была быстрой, эффективно использовала память и была достаточно гибкой для будущего.
Откуда мы пришли
Прежде чем представить Melody, мы использовали кастомный форк Backbone с небольшими улучшениями. На бэкенде Symfony — PHP-фреймворк — использовал шаблоны Twig для выполнения рендеринга на стороне сервера. В браузере мы использовали Swig, язык шаблонов, похожий на Twig, для создания строк HTML. Они были введены в DOM с помощью innerHTML.
Эта комбинация библиотек позволила нам отображать одни и те же шаблоны на клиенте и сервере. Это также помогло нам уменьшить количество случайных ошибок из-за несоответствия между ними.
Наличие только одного набора шаблонов дало нам огромный прирост производительности и возможностей. Функции, которые раньше были сложными или невозможными, стали легкими. Все баги из-за несоответствия между клиентом и сервером исчезли из наших бэклогов.
Тем не менее, вскоре стало очевидно, что мы неправильно поступаем с нашими пользователями. innerHTML обновления и обработка дочерних представлений и обработчиков событий были для них слишком медленными. Таким образом, в некоторых случаях мы заменили его прямым манипулированием DOM. Это устранило большинство проблем с производительностью, но вновь вызвало проблему рассинхронизации. Конечно, это также снова увеличило сложность нашей кодовой базы.
Новое решение — Требования
Мы начали думать о новом идеальном решении и выдвинули некоторые требования.
- Эффективность памяти
- Производительность рендеринга
- Совместимость с Веткой
- Высокая производительность для наших разработчиков
- Маленький размер
- Возможно постепенное внедрение
Наш продукт должен быть доступен независимо от подключения к Интернету или качества устройства. Таким образом, производительность, низкое использование памяти и небольшой размер фреймворка были для нас критическими.
Мы также хотели иметь возможность перейти на него без полной перезаписи и получить преимущества с самой первой функции. Кроме того, он должен был быть совместим с шаблонами Twig, которые мы использовали на сервере.
Представляем Мелодию
Melody — это наше решение для рендеринга на стороне клиента. Он соответствует всем вышеперечисленным требованиям и используется в trivago с 2016 года.
Он состоит из трех частей: компилятора Twig, среды выполнения и API компонентов.
Компилятор нацелен на среду выполнения для создания кода рендеринга. В нашем компонентном API используются компоненты более высокого порядка, знакомые разработчикам React.
У нас есть среда выполнения с инкрементным домом, а также цель компилятора JSX для использования React и Preact. Для trivago мы используем melody-idom из-за лучшей производительности в наших экспериментах. Архитектура Melody позволяет с минимальными усилиями заменить каждую часть чем-то другим.
melody-idom состоит из простых инструкций, таких как «открыть здесь элемент». Эти инструкции сравнивают ожидаемую форму с реальным DOM на лету, обходя его. Это позволяет избежать повторного создания виртуального DOM при каждом рендеринге, а также не требуется отдельный diff. Низкие накладные расходы памяти окупаются хорошей производительностью.
За последние 2 года мы преобразовали большую часть нашего интерфейса для использования Melody. Каждый раз, когда мы переносили новую функцию, наши пользователи ценили ее, чаще используя эту функцию. Например, когда мы перенесли нашу галерею для использования Melody, мы заметили увеличение использования галереи на 7%.
Многие типы ошибок, которые мы исправляли ежедневно, полностью исчезли. Использование памяти всегда низкое, и наш продукт работает на большинстве устройств без существенных проблем.
Сегодня большая часть нашего интерфейса использует Melody, за исключением нескольких частей, где достаточно простого JavaScript.
Что дальше?
Интернет — это быстро развивающаяся среда, наполненная инновациями и возможностями. Архитектура Melody позволяет нам экспериментировать и быть в курсе последних достижений искусства.
Мы изучаем API нового компонента вокруг Custom Elements и RxJS. Наша цель в этом новом API — значительно упростить асинхронную загрузку компонентов. Но также для создания более согласованной базы кода путем удаления компонентов более высокого порядка. Мы ожидаем положительного влияния на нашу производительность.
Конечно, мы также наблюдаем за инновационной работой сообщества Ember. Их Glimmer VM — выдающийся образец инженерной мысли, способный установить новые стандарты. Мы планируем поэкспериментировать с подобными оптимизациями и в Melody. Удаление кода, создаваемого компилятором для наших шаблонов, позволит нам еще больше сократить наши пакеты JavaScript.
Также планируется рендерер Node.js для Melody, но пока он нам не нужен.
Кто это для?
Melody — это фреймворк, созданный для trivago. Это фантастический выбор, если у вас есть такие же требования, как и у нас. Если вы хотите отображать одни и те же шаблоны на клиенте и сервере без Node.js. Если вам нужно низкое использование памяти, но высокая производительность. Эти требования делают Melody подходящей для нас и, возможно, для вас.
На данный момент использование Melody — это приключение. Его непросто настроить, и вы можете столкнуться с ошибками, которые мы еще не выявили. Однако, если вы любите приключения, у Мелоди есть что предложить. Его выразительный характер помог нам сократить наш код в среднем на 40% для преобразованных функций.
Вы можете узнать больше о Melody на ее сайте: https://melody.js.org
Первоначально опубликовано Патриком Готтхардом на сайте tech.trivago.com 28 июня 2018 г.
