[Перевод] Новый этап эволюции Vue — Vapor07.11.2024 12:01

19 октября 2024 года завершился Vue Fes Japan 2024 — традиционное событие, которое собрало множество энтузиастов и экспертов в области веб-разработки, где рассказывали о будущем экосистемы вью. На этой конференции разработчик Кевин Денг подробно представил новый этап в эволюции фреймворка Vue — Vapor Vue. Ожидается, что Vapor Vue значительно повысит скорость работы фреймворка, делая его еще более эффективным и мощным инструментом для создания современных веб-приложений. Такой шаг в развитии не только обещает ускорение производительности, но и открывает новые горизонты для гибкости и адаптивности Vue в работе над сложными проектами. В данной статье мы расскажем о самом интересном в этой презентации.

Что такое Vapor

Vue Vapor представляет собой новый механизм рендеринга, который имеет следующие ключевые особенности:

1. Прямая работа с нативными API DOM.
   Технология больше не полагается на виртуальный DOM, вместо этого напрямую вызывает нативные API DOM. Это позволяет уменьшить количество издержек, повышает производительность и снижает потребление памяти, поскольку сокращается количество промежуточных шагов и уменьшается нагрузка на систему.

2. Уменьшение размера итогового бандла. 
   Этот подход уменьшает размер итогового бандла. При прямом использовании нативного API DOM исключается необходимость в коде для обработки виртуальных узлов DOM, что приводит к более компактному и быстрому загружаемому приложению, облегчающему использование, особенно для пользователей с медленным интернетом.

3. Fine-grained rendering.
   Теперь, основываясь на системе реактивности vue, можно точно отслеживать изменения данных и обновлять только то, что действительно необходимо. Это позволяет избежать повторного рендеринга всего компонента и поиска измененных узлов виртуального DOM.

Уменьшение бандла 

Ранее я упоминал о важности уменьшения размера бандла. В результате использования прямого взаимодействия с нативными API DOM размер бандла сократился на впечатляющие 53,3% по сравнению со стандартным режимом виртуального DOM. Эти данные не учитывают размер самой системы реактивности, но даже без этого уменьшение уже является значительным и положительно сказывается на производительности приложения.

Ускорение производительности 

Если же говорить про скорость работы, то за абсолютное значение можно взять ванильный js, который будет представлять собой 100%. Дальше идёт текущий рекордсмен — Solid, следом идёт многим полюбившийся Svelte. Теперь же Vue Vapor работает наравне со Svelte, что весьма впечатляет. Он заметно быстрее, чем режим Vue vDOM и React с Jotai. Несмотря на то, что Vapor уже превосходит Vue vDOM и React, его еще можно улучшить, и команда стремимся сделать его еще лучше.

Vapor не является отдельным режимом

Vapor — по своей сути, лишь подмножество vDOM, что приводит к некоторым ограничениям. 

Текущий режим виртуального DOM (vDOM) поддерживает множество функций, таких как Options API, Composition API, пользовательские директивы, миксины и другие.

Vapor поддерживает исключительно Composition API и не включает Options API. Однако в будущем Options API может быть доступен через стороннюю библиотеку на основе отзывов пользователей. 

Для работы с Vapor необходимо использовать инструменты сборки, такие как Babel, так как компилятор Vapor сложен и не позволяет запускать код напрямую в браузере через CDN, в отличие от vDOM. Запуск в браузере замедлил бы процесс и увеличил размер бандла, снижая эффективность по сравнению с vDOM.

Кроме того, Vapor поддерживает только

Рассмотрим скомпилированный код SFC поэтапно:

import { ref } from 'vue'
import { delegate, delegateEvents, renderEffect, setText,
         template } from 'vue/vapor'


const t0 = template('
')
const t1 = template('Increase')
delegateEvents('click')


export default {
  setup() {
    const count = ref(0)
    function increase() {
      count.value++
    }


    const n0 = t0()
    const n1 = t1()
    delegate(n1, 'click', () => increase)
    renderEffect(() => setText(n0, 'Count: ',
                               count.value))
    return [n0, n1]
  },
}

Сначала шаблон компилируется в отдельные фрагменты, а обработка событий перенаправляется на корневой узел. Это уменьшает количество слушателей событий и улучшает производительность.

Затем мы определяем переменную `count` и функцию `increase` внутри `setup`.

Последние строки кода обрабатывают основную логику рендеринга. Мы связываем обработчик событий с узлом и используем `renderEffect` для отслеживания любых обновлений данных.

После этого при необходимости обновлений выполняется только код внутри `renderEffect`.

Структура сборки 

Структура Vapor отличается гибкостью благодаря следующему процессу:

1. Общая логика вызовов для однофайлового компонента (SFC): сначала используется верхнеуровневый плагин Vite, который вызывает компилятор SFC.

2. Компилятор SFC извлекает тег шаблона и передаёт его компилятору Vapor, который затем компилирует его в JavaScript код.

Внутренний процесс включает:

• Фазу разбора: содержимое разбирается в абстрактное синтаксическое дерево (AST).

• Фазу трансформации: AST преобразуется в промежуточное представление (IR).

• Фазу генерации: IR преобразуется в JavaScript код, который является конечным результатом компиляции.

иллюстрация работы компиляции vapor

IR (Intermediate Representation) — это промежуточное представление, используемое Vapor. Оно выступает связующим звеном между шаблоном и финальным JavaScript кодом.

IR определяет ключевые действия, такие как создание фрагментов шаблона, привязка событий, вставка или добавление DOM-узлов, настройка атрибутов или свойств и другие.

Это означает, что независимо от используемого синтаксиса шаблона, если он может генерировать целевой IR в соответствии со стандартами Vapor, мы можем скомпилировать его в код для выполнения Vapor.

IR может быть адаптирован для различных синтаксисов шаблонов, таких как шаблоны Vue, Svelte, JSX и другие, что упрощает поддержку различных синтаксисов шаблонов.

Нужно ли переходить на Vapor сразу же полностью?

Ответ — не обязательно. Компоненты Vapor будут совместимы с режимом vDOM и наоборот. Конечно, будет поддержка и чистого режима Vapor.

Это позволяет осуществлять переход более плавно, без необходимости мгновенного перевода всего проекта на Vapor. Можно сначала мигрировать критически важные для производительности компоненты на Vapor, оставив остальные в режиме vDOM

Подводя итоги

• Vapor — это новое начало для Vue. Было переписано почти всё с нуля.  

• Vapor является подмножеством режима vDOM Vue, с акцентом на упрощение.  

• Vapor на текущий момент сильно оптимизирует производительность и размер сборки.  

НЛО прилетело и оставило здесь промокод для читателей нашего блога:

-15% на заказ любого VDS (кроме тарифа Прогрев) — HABRFIRSTVDS.

© Habrahabr.ru