Хочу перемен: почему пора переходить на Vue 308.07.2022 11:02

27a2a011ced3c69b0e5327b770ba620a.png

Привет! Меня зовут Влад, я frontend-разработчик в компании SimbirSoft. Мне приходилось создавать приложения как на старых версиях Vue, так и на новых. Причем многие из моих коллег вполне успешно разрабатывают на Vue 2 и не спешат переходить на Vue3, даже спустя два года после релиза.

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

В этой статье попытался раскрыть новшества, которые могут стать «триггером» для миграции на новую технологию для обеих заинтересованных групп. Поговорим об экосистеме Vue 3, о новинках и пользе для разработчиков и бизнеса. И, разумеется, сравним Vue 2 и Vue 3 с технической точки зрения. Также рассмотрим одно из главных нововведений фреймворка — Composition API, раскроем технические нюансы и определим лучшие кейсы использования нового API.

История появления Vue

Vue — это Javascript-фреймворк для разработки пользовательских интерфейсов.

Создателем и главным разработчиком фреймворка является бывший работник Google Эван Ю. Первый коммит Vue был сделан в июне 2013 года и назывался Seed.js. Но, как выяснилось, имя seed было уже занято в npm, и название изменили на Vue.

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

Сейчас Vue — это крупнейший проект, который пользуется колоссальной финансовой и технической поддержкой партнёров и разработчиков из всего мира. В итоге то, что изначально задумывалось как инструмент для внутреннего пользования компании, переросло в один из лучших фреймворков для JavaScript.

Преимущества Vue 3

Концепция и основная идея новой версии Vue 3 возникли в 2018 году. На текущий момент времени с момента выхода Vue 3 версии прошло почти два года (дата релиза — сентябрь 2020 года).

Она включает в себя масштабные изменения в исходном коде и новый API. В ней также значительно улучшена производительность — в среднем 1,5–2 раза быстрее прошлой. Исходный код фреймворка был переписан с нуля, а при помощи использования TypeScript изменена система реактивности. А Vetur, официальное расширение VSCode, теперь поддерживает проверку типов у шаблона и свойств с использованием улучшенной внутренней типизации Vue 3.

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

Преимущества для разработчиков

Улучшенная интеграция с TypeScript

Vue 3 был полностью переписан на TypeScript и на текущий момент обеспечивает полноценную поддержку TypeScript. Все официальные пакеты Vue 3 поставляются со встроенными объявлениями типов, которые должны работать «из коробки».

А Composition API хорошо работает с типизацией данных в приложении.

Новые API для крупных приложений

Vue 3 предоставляет совершенно новый API Composition API — это мощнейшее решение, которое в полной мере разрешает проблемы Options API Vue 2 версии, а также предоставляет расширенные возможности в декларировании и управлении данными в фреймворке. Новый API позволяет облегчить реализацию сложных архитектурных решений в крупных и средних приложениях, по средствам обеспечения логической связанности и возможности повторного использования, похожую на хуки в React.

Порог входа

Vue придерживается консервативного подхода к созданию шаблонов и стилей, которые отделены от логики приложений и используют HTML и CSS. Для многих программистов это более привычно и облегчает постепенную миграцию существующих приложений.

Таким образом, исполнителю нужно меньше опыта, чтобы вносить доработки в текущую кодовую базу на Vue.

Фреймворк также отличает гибкость и модульность — можно моментально приступить к созданию приложения, не тратя лишнее время на конфигурирование c помощью инструмента командной строки VUE CLI.

Архитектура приложений

Vue использует подход ViewModel из шаблона MVVM. Он хорошо работает для более крупных приложений, используя двустороннюю привязку данных. Основная цель Vue — дать простой и гибкий уровень представления, а не полноценный фреймворк.

Документация

Разработчики Vue здесь очень постарались. Есть сайт с документацией, подробным описанием на нескольких языках и ответами сообщества на разные вопросы. А руководство и справку по методам API иногда даже признают лучшими в отрасли.

Остальные преимущества:

  • Новая концепция реактивности.

  • Улучшенная оптимизация и производительность.

  • Composition API.

  • Практически полная обратная совместимость с API второй версии.

  • Паттерн для повторного использования логики компонентов.

Преимущества для бизнеса

Безопасность

Хотя автоматически защитить приложения от XSS и других уязвимостей невозможно, разработчики Vue могут санитизировать HTML-код перед реализацией или использовать внешние библиотеки для защиты от атак. В тех случаях, когда вы знаете, что HTML безопасен, можно явно отображать содержимое HTML и защищать приложение до и после рендеринга. Исходя из последних статистических данных, следует отметить, что последняя уязвимость была обнаружена во второй версии Vue

Улучшение производительности

Vue 3 показывает значительные улучшения производительности. Если вы работаете с продуктом, который требует быстрого обновления содержимого и контента, выбор очевиден — это Vue 3. Новая версия имеет следующие показатели:

9371d1801ad9c37dd821b5cb1e8d8d61.png

Поддержка

В будущем разработчики Vue, скорее всего, прекратят поддержку версии 2.x. Выбирая Vue 3, можно получить поддерживаемый и улучшаемый инструмент на годы вперёд.

Остальные преимущества Vue 3:

  • Улучшенная адаптация под большие и средние проекты.

  • Ориентация на современные вспомогательные инструменты, в частности, улучшена поддержка TypeScript.

  • Новые функциональные возможности для решения бизнес-задач.

  • Улучшение процессов разработки и отладки продукта на всех этапах.

Ключевые функциональные преимущества Vue 3

В этом разделе рассмотрим самые интересные функциональные улучшения новой версии Vue.

Изменённые алгоритмы сравнения виртуального DOM

Процесс изменения реального DOM дерева в Vue построен на вызове функции, которая сравнивает два объекта Vnode (oldNode, vNode), и последующем патчинге изменений в DOM браузера. В Vue 2 такой алгоритм был построен на сравнении всех узлов без фокуса на тип узла.

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

Рассмотрим следующий пример: 

 
 Привет, {{username}} 
 
 Приятно с тобой познакомиться 


 Время уже позднее, увидимся завтра

Как видите, при вызове функции сравнения будет анализироваться лишь первый абзац, а остальные два статических элемента попросту будут проигнорированы. Vue 3 запоминает статический контент, чего Vue 2 делать не мог.

Статический подъем

Для лучшего понимания концепции статического подъема рассмотрим однородную структуру шаблона компонента на следующем примере: 


	

		
SimbirSoft — компания по разработке программного обеспечения.

		
{{ contentDynamic }}

А теперь посмотрим на render-функцию для версий Vue 2 и Vue 3

Vue 2

function render() {
  var vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c('div', {
    attrs: {
      "id": "app"
    }
  }, [_c('div', [_c('div', [_vm._v(" " + _vm._s(_vm.msg) + " ")]), _c('div',
    [_vm._v(
      " SimbirSoft -- компания по разработке программного обеспечения. "
    )])])])
}

Во Vue 2 независимо от того, является ли элемент статическим, он повторно создается в render-функции. Затем рендерится в шаблоне, задействуя при этом больше ресурсов.

Vue 3

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "SimbirSoft — компания по разработке программного обеспечения.", -1 /* HOISTED */)
 
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _createElementVNode("div", null, [
      _hoisted_2,
      _createElementVNode("div", null, _toDisplayString(_ctx.dynamic), 1 /* TEXT */)
    ])
  ]))
}

Во Vue 3 все статические элементы, которые не участвуют в динамическом изменении данных, поднимаются вверх, позволяя избежать повторного пересоздания, что, как следствие, экономит ресурсы.

Новая концепция реактивности

Реактивность — это механизм декларативного обновления данных в шаблоне, которые объявлены в коде. Во Vue 2 такой механизм строился на «геттерах» и «сеттерах» путём переопределения свойств объекта в инстансе Vue c помощью Object.defineProperty.

Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект или функцию и позволяет «перехватывать» их.

Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством. Подробнее про реактивность в новой версии можно прочитать здесь.

Конечно, в целом, концептуальных изменений гораздо больше. По ссылкам ниже можно найти еще несколько дополнительных интересных особенностей:

А мы перейдем к рассмотрению одного из главных нововведений Vue 3.

Composition API

Composition API — это совершенно новое решение организации компонентов в Vue 3. Оно представляет собой набор API:

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

Улучшенная организация кода в компонентах

Рассмотрим структуру двух совершенно одинаковых компонентов для взаимодействия с постами с точки зрения использования разных API.

Options API

Composition API

Как мы видим, в случае с composition API, структурировать код по логическому назначению легче. Это позволяет сохранять читаемость и масштабируемость компонента.

Декомпозиция и повторное использование кода

Методы, которые предоставляет нам Vue 2 для решения проблем декомпозиции и переиспользования кода в больших компонентах, иногда приводят к побочным эффектам. Например, Mixins может перезатереть уже существующий функционал, а Provide Inject, исходя из документации, рекомендовано использовать не во всех случаях. Кроме того, по умолчанию данные, монтируемые с помощью provide/inject, не реактивны.

С новым API мы можем инкапсулировать логику взаимодействия с постами и комментарии отдельно, а также переиспользовать в любом компоненте с помощью хука. Рассмотрим на примере.

Для наглядности упростим компонент до минимального функционала: получение и добавление поста в избранное. Логику вынесем за пределы компонента.

Наш внешний файл с логикой 

import { ref } from 'vue';
import axios from 'axios';

const posts = ref([]);
const favoritePost = ref(null);

export default function usePosts () {

 const fetchPosts = async () => {
   posts.value = (await axios.get('https://jsonplaceholder.typicode.com/posts')).data;
 }

 const addPostToFavorite = (id) => {
   favoritePost.value = posts.value.find(post => post?.id === id);
 }

 return {
   posts,
   favoritePost,
   addPostToFavorite,
   fetchPosts,
 }
}

Как мы видим, с помощью новых возможностей легко отделить логику в внешний файл и использовать, где потребуется. Поле для масштабируемости данного подхода огромно. Вплоть до отказа от всеми известного менеджера состояний Vuex. С помощью данного подхода мы можем организовывать свой store без использования сторонних библиотек. Тем, кто любит архитектурные решения, рекомендуем взглянуть на npm-пакет Pinia.

А благодаря синтаксическому сахару в виде дополнительного атрибута «setup» в тэге

Магия! Не правда ли?

Улучшенная поддержка TypeScript

В старой версии для внедрения поддержки TypeScript необходимо было использовать классовые компоненты и декораторы. Это не всегда удобно и в целом усложняет процесс разработки.

С появлением Composition API всё изменилось. Новый синтаксис позволяет использовать типизацию с минимальными трудозатратами. Рассмотрим на примерах.

ref

import { ref } from 'vue'
import type { Ref } from 'vue'

const year: Ref = ref('2020')

year.value = 2020 // отлично

reactive

import { reactive } from 'vue'

interface Post {
 id: number;
 title: string;
}

const post: Post = reactive({ id: 1222, title: 'Название' })

computed

import { computed } from 'vue'

const postId = computed(() => {
 return post.id;
})

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

Резюме

Для меня как разработчика, преимущественно на фреймворке Vue, новая версия показала себя с хорошей стороны. По сути, это тот же продукт, который не потерял концепцию декларативного инструмента и в то же время решил проблемы прошлых версий. Стало легче работать с большими объемами данных. К тому же, в третьей версии улучшена поддержка типизации TypeScript. Кроме этого, мы получили новые функциональные возможности, которые предоставляют улучшение процесса разработки в целом.

Исторически так сложилось, что Vue 2 версии больше подходил для применения на небольших и средних проектах, мы сами не раз говорили об этом в своих статьях. Однако сейчас, после масштабных нововведений, можно отметить, что Vue 3 подходит и для крупных коммерческих решений.

Если на момент релиза это все еще был новый инструмент со своими подводными камнями, практически отсутствием npm пакетов и фреймворков, адаптированных под новую версию, то сейчас можно с уверенностью сказать, что Vue 3 — оптимальная версия фреймворка на текущий момент.

Надеемся, статья была вам полезна!

Больше кейсов и полезных материалов для владельцев продуктов — в нашем ВК и Telegram.

© Habrahabr.ru