Анонс Vue.js 2.0

Перевод статьи Evan You - Announcing Vue.js 2.0

Если вы никогда ранее не слышали про Vue.js: это фронтэнд фрэймворк, состоящий из главного слоя представления и вспомогательных инструментов. Высокоуровневое описание основ и специфики вы можете прочитать здесь.

Сегодня я рад представить вам первый публичный предрелиз Vue.js 2.0, который несёт множество восхитительных улучшений и новшеств. Давайте проведём беглый обзор!

Ещё меньше, ещё быстрее

Vue всегда делал акцент на быстродействии и легковесности, 2.0 идёт ещё дальше в этом направлении. Слой отрисовки сейчас основан на легковесной реализации virtual-DOM, которая улучшает скорость и потребление памяти при первичной отрисовке в 2~4 раза (в большинстве случаев, судя по этим замерам). Компилятор "шаблон-virtual-DOM" и динамический обработчик могут быть разделены, так что можно предкомпилировать шаблоны и использовать только динамический обработчик, который занимает лишь 12kb min+gzip (для сравнения: React 15 44kb min+gzip). Компилятор работает также и в браузере, так что всё ещё можно просто вставить скрипт на страницу и быстро начать прототипировать, как и раньше. Даже с компилятором билд занимает 17kb min+gzip, всё равно легче, чем текущая версия 1.0.

Не просто "ещё один" Virtual-DOM

Сейчас, просто virtual-DOM звучит уже скучно, т.к. существует множество реализаций этой концепции, но эта - отличается. В сочетании с системой реактивности Vue, она предоставляет оптимизированную перерисовку, не заставляя вас делать ничего особенного для этого. Каждый компонент отслеживает состояние своих зависимостей во время отрисовки, так что система точно знает, когда и какому компоненту необходима перерисовка. Нет необходимости в shouldComponentUpdate или неизменяемых структурах данных - это просто работает.

В дополнение, Vue 2.0 применяет продвинутые техники оптимизации во время фазы компиляции шаблон-virtual-DOM:

• Вычисляет статические имена классов и аттрибутов, так что они не отличаются при начально и последующих отрисовках
• Определяет максимальное статическое поддеревья (поддеревья без динамических связей) и вычленяет их из функций отрисовки. Так что при каждой отрисовке происходите прямое переиспользование, пропуская сравнение.

Такие оптимизации обычно достигаются с помощью плагинов к Babel при использовании JSX, но с Vue 2.0 это достигается даже при компиляции в браузере.

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

Комбинируя эти техники Vue 2.0 предоставляет молниеносную производительность в любом сценарии и требует минимальных усилий разработчика.

Шаблоны, JSX, or или Hyperscript?

Разработчики имеют устоявшиеся предпочтения относительно использования шаблонов или JSX. С одной стороны, шаблоны ближе к HTML — они лучше соотносятся с семантической структурой вашего приложения и позволяют легче представить ваш дизайн, раскладку и стили. С другой стороны, шаблоны ограничены рамками DSL, в то время как программная суть JSX/hyperscript даёт в руки всю мощь и гибкость языка программирования.

В то время как я являюсь гибридным дизайнером/разработчиком, я предпочитаю делать интерфейсы в виде шаблонов, но в некоторых случаях мне не хватает гибкости JSX/hyperscript. Пример это компонент, который программно управляет своими "детьми", что не очень легко при просто механизме шаблонов со слотами.

Так почему бы не пользоваться двумя подходами сразу? В Vue 2.0 в можете использовать привычные шаблоны или углубиться до уровня слоя virtual-DOM, если вы почувствуете ограничения шаблонного DSL. Вместе опции шаблона просто замените её на функцию рендеринга. Вы даже можете встраивать функции рендеринга в шаблоны при помощи спец. тега <render>! Лучшее из двух миров в одном фрэймворке. Ах, и не забудьте, наши любимые "однофайловые" компоненты всё ещё с нами.

Потоковый серверный рендеринг

С миграцией на virtual-DOM Vue 2.0 естественным образом поддерживает серверный рендеринг с последующим "восстановлением" на стороне клиента. Одно неудобство с текущими популярными реализациями, такими как React, то что рендеринг происходит синхронно. Так что он может заблокировать событийный поток сервера в сложных приложениях. Синхронный серверный рендеринг также влияет на время доставки контента клиент-сайду. Vue 2.0 предоставляет встроенный потоковый серверный рендеринг, так что вы можете отрендерить свой компонент, получить поток чтения и перенаправить его прямо в HTTP ответ. Это гарантирует отзывчивость сервера и доставляет контент конечным пользователям быстрее.

Раскрываем больше возможностей

С новой архитектурой появляется ещё больше новых возможностей - например, рендеринг нативных интерфейсов для мобильных приложений. На данный момент мы рассматриваем портирование Vue 2.0 при помощи weex как нативного бекенда для рендеринга, это проект поддерживаемый инженерами из Alibaba Group, одним из самых больших технических гигантов Китая. Также технически возможно адаптировать virtual-DOM в Vue 2.0 для запуска внутри ReactNative. Мы воодушевлены увидеть то, как это будет развиваться в будущем!

Совместимость и чего ждать дальше

Vue 2.0 всё ещё в пре-альфа стадии, но вы уже можете найти исходный код здесь. Не смотря на то, что код полностью переписан, API практически полностью совместим с 1.0, за исключением некоторых намеренных изменений. Посмотрите на тот же самый официальный пример на версии 2.0 — вы сами убедитесь, что изменений мало!

Отказ от некоторого функционала, это часть наших осознанных усилий по предоставлению самого простого API, для улучшения производительности разработчиков. Вы можете посмотреть на сравнение различий версий 1.0 и 2.0 здесь. Это значит, что вам потребуется приложить некоторые усилия при миграции, если вы активно используете отменённый функционал. В будущем мы предоставим подробное руководство по миграции.

Предстоит ещё много работы. Мы выпустим альфа версию как только будет достигнуто приемлемое покрытие тестами, а бета будет приблизительно в мае/июне. В дополнение к тестам потребуется также переделать вспомогательные библиотеке (vue-router, Vuex, vue-loader, vueify…). На данный момент только Vuex работает с версией 2.0, но мы позаботимся о том, что всё работало без проблем к моменту выпуска версии 2.0.

Версия 1.x не будет забыта! 1.1 будет выпущена вместе с бетой-версией 2.0, с LTS периодом в 6 месяцев для починки критических ошибок и 9 месяцев для починки проблем безопасности. Там также будет опциональная возможность отображать сообщения об использовании устаревших функций для более лёгкой миграции на версию 2.0. Следите за обновлениями!