ЧТО ТАКОЕ VUE.JS?

Vue.js — это среда JavaScript с открытым исходным кодом для создания пользовательских интерфейсов. Легко интегрируется в проекты с использованием других библиотек JavaScript. Он может функционировать как веб-фреймворк, помогающий разрабатывать сложные одностраничные приложения.

В 2013 году сотрудник Google Эван Ю, работая над одним из проектов, пришел к выводу, что готовых решений для быстрого прототипирования сложных пользовательских интерфейсов веб-приложений не существует. React тогда находился на ранней стадии разработки, основными инструментами были такие сложные фреймворки, как AngularJS или MVC-ориентированный Backbone.js, которые были не очень простыми и ориентированы на разработку больших приложений. Чтобы преодолеть этот пробел, Вы начали разработку Vue.js, который при сохранении простоты оказался пригодным не только для прототипирования, но и для полноценной разработки.

Теоретически Vue.js является альтернативой jQuery. Но на самом деле Vue.JS вполне успешно конкурирует с React.JS — явным лидером в области Vue. Из современных популярных технологий, решающих подобные задачи, также можно выделить Angular и Ember. Каждый из них имеет свои преимущества и недостатки. Однако все эти рамки можно свести к одному общему знаменателю — относительной сложности разработки.

VUE.JS ПРОТИВ ДРУГИХ

Vue.JS создан с оглядкой на лучшие практики перечисленных технологий. Из React.JS команда Vue позаимствовала идею виртуального DOM. Такой подход исключает прямое взаимодействие с интерфейсными узлами. Первоначальная работа ведется с его облегченной копией — виртуальным DOM. И только после эти изменения применялись к реальным узлам интерфейса. Параллельно происходит сравнение реального DOM-дерева и его виртуальной копии. Таким образом обнаруживается различие, и перерисовывается только то, что изменилось.

Из Angular Vue.JS позаимствовал двустороннюю привязку данных. Это позволяет проектировать интерфейсы: во-первых, декларативно; во-вторых, использование Vue в шаблонизаторах. Например, Хэмл или Мопс. Но это правда, что такой подход практиковался и раньше, например, во фреймворке Knockout.JS.

Ядро Vue.JS, как и React, содержит только необходимый функционал для работы с интерфейсом. Поэтому он компактен, легко интегрируется с другими технологиями, включая jQuery, и даже может использоваться вместо него для разработки простых интерфейсов.

Кроме того, у Vue есть ряд плагинов, реализующих современный подход к разработке веб-приложений. О чем это? Например, почти все React-приложения разрабатываются в тандеме с технологией управления состоянием Redux, которая представляет собой отдельную библиотеку и реализует flux-архитектуру. Подход, который практикует библиотека Redux, оказался достаточно удобным и удачным. Поэтому Vue.JS разработал собственную технологию контроля состояния приложения — Vuex. Vuex полностью заимствует идеи Redux, но степень интеграции этой библиотеки с Vue гораздо выше, чем в случае с React и Redux. А это означает скорость и удобство.

ОСНОВНЫЕ ОТЛИЧИТЕЛЬНЫЕ ИДЕИ VUE.JS

1. Реактивность

Реактивность — это когда данные внутри приложения напрямую связаны с данными на дисплее и изменение их в любой части моментально влияет на перерисовку экрана. Как реактивность реализована в React? Короче, все данные, которые мы используем в приложении, хранятся в state и props, если нужно, меняем данные, меняем через setState, потом React определяет, какие части приложения зависели от измененных данных и перерисовывает.

Во Vue.js используется аналогичный подход, но он имеет одно принципиальное отличие — каждое поле входных данных приложения расширяется с помощью Object.defineProperty и делится на пары сеттер/геттер. С их помощью Vue отслеживает, какие данные считываются или изменяются, и может конкретно определить, что влияет на рендеринг дисплея.

2. Расчетные свойства

В Vue существует несколько типов данных компонента:
— данные-базовые данные;
— props-данные, передаваемые от родительского компонента;
— вычисляемые —данные, которые можно вычислить на основе двух предыдущих .

Такое разделение понятий — простая, но удобная идея. Последний имеет ряд преимуществ по сравнению с подходом к React:
— Мы перестаем плодить вспомогательные методы вида getFullName для компонентов;
— Они реактивные, и при первом расчете с помощью расширенных геттеров (принцип описан в первом пункте) они собирают зависимости и точно знают при изменении каких данных необходим пересчет;
- они ленивы, т.е. учитываются только при обращении к ним, а не при каждом изменении зависимых данных;
- Кэшируется на основе входных данных.

Аналогичного поведения при работе с большим размером выборки в Redux можно добиться с помощью Reselect.

3. Встроенная анимация FLIP

Идея удобного описания анимаций во фреймворках далеко не нова (ng-animate, ReactCSSTransitionGroup). Удивляет FLIP-анимация прямо из коробки. Короче говоря, это своего рода анимация движущихся элементов, когда вы сначала знаете их общее положение, а затем перемещаете с помощью translate. Во Vue эту анимацию можно получить всего парой строчек кода:

4. Компоненты и vue-загрузчик

Vue рекомендует хранить весь код компонента (js, стили, шаблон) в одном файле, что является довольно необычным подходом. Насколько это удобно, судить не будем, особенно когда ваши компоненты далеко не атомарны.

Но есть любопытный момент, компоненты загружаются через vue-loader для webpack, что скрывает от вас всю сложность сборки, позволяя прямо из коробки использовать ваши любимые технологии ES6, coffeeScript, Sass, postCSS, CSS модули, jade (мопс) и другие.

И в отличие от React нам не нужно разбираться с новым языком JSX, и мы продолжаем использовать то, что нам знакомо, или использовать совсем другие генераторы HTML, такие как PUG.

Без настроек, круто, да?

5. Слоты

Идея слотов пришла из Web Components и очень проста — если вам нужно перенести несколько компонентов внутрь другого компонента, то вы можете указать места, где они будут отображаться. Такой подход позволяет делать сложные компоненты-обертки, которые легко абстрагируются от происходящего внутри. Так, например, можно сделать компонент макета с несколькими слотами:

А ДАВАЙТЕ ПОСМОТРИМ НА РЕАЛЬНОМ ПРИМЕРЕ?

Совсем недавно мы разработали сервис Cloud Checker, который позволяет анализировать облачные сервисы и оптимизировать их использование.

Здесь мы активно использовали Vue. При разработке дизайна для проекта за основу был взят Google Material Design, он идеально подходит для этой задачи благодаря своей простоте и строгости, но, несмотря на это, он достаточно приятен и удобен в использовании.

По этой причине на этапе подготовки к написанию фронтенд части было решено использовать готовый Material Component Framework в качестве Vuetify. Он интуитивно понятен и относительно прост при написании шаблонов, а также хранит невероятно большую и мощную базу готовых компонентов, необходимых для создания полноценного готового приложения уже из коробки.

Плюсы и минусы VUE.JS

Плюсы Vue.JS

Изучив ключевые особенности технологии и протестировав их на практике, можно перечислить основные преимущества фреймворка Vue:

  1. Vue.js имеет много схожих характеристик с Angular, и это может помочь оптимизировать обработку блоков HTML с использованием разных компонентов.
  2. Vue.js имеет очень обширную документацию, которая может отразить кривую обучения для разработчиков и сэкономить много времени на разработке приложения, используя только базовые знания HTML и JavaScript.
  3. Он обеспечивает быстрый период переключения с других фреймворков на Vue.js из-за схожести с Angular и React с точки зрения дизайна и архитектуры.
  4. Vue.js можно использовать как для создания одностраничных приложений, так и для более сложных веб-интерфейсов. Главное, небольшие интерактивные части можно легко интегрировать в существующую инфраструктуру, не оказывая негативного влияния на всю систему.
  5. Требования к стеку отсутствуют, поэтому Vue.JS можно использовать в любом проекте.
  6. Vue.js может весить около 20 КБ, сохраняя свою скорость и гибкость, что позволяет достичь гораздо более высокой производительности, чем на других платформах.
  7. Благодаря использованию любых шаблонов и наличию документации, большинство возникающих проблем решается достаточно быстро. В том числе и по сравнению с React, так как в большинстве приложений, не имеющих сложных интерфейсов, вся мощь этого фреймворка немного избыточна.
  8. Vue.js может помочь разработать достаточно большие повторно используемые шаблоны, которые можно сделать без выделяемого на это лишнего времени, в соответствии с его простой структурой.
  9. Возможность найти и подключить к проекту практически любого разработчика, хоть немного знакомого с фронтендом. Низкий порог вхождения позволяет работать с фреймворком как фронтенд-, так и бэкенд-разработчикам.
  10. Vue позволяет создавать функциональные приложения, отвечающие всем современным стандартам, с минимальным подключением новых ресурсов и, по сути, дешевле.

Минусы Vue.JS

Есть и минусы, в частности, по сравнению с React.JS:

  1. Работа над состоянием приложения ведется «под капотом». Это увеличивает порог входа для новых разработчиков, но для нашей команды это не является недостатком.
  2. Vue.js по-прежнему имеет довольно небольшую долю рынка по сравнению с React или Angular, а это означает, что обмен знаниями в этой среде все еще находится на начальном этапе. Но надо отметить, что тренды меняются колоссально, и Vue очень активно набирает обороты намного быстрее других фреймворков.
  3. Поскольку Vue.js имеет некоторую китайскую основу, многие элементы и описания по-прежнему доступны на китайском языке. Это приводит к частичной сложности на некоторых этапах разработки, однако все больше материалов переводится на английский язык. Что касается личного опыта, то наша команда с помощью Vue справляется с задачами любой сложности и не сталкивалась с недопониманием в использовании фреймворка.

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

Сегодня Vue.js используют такие компании, как Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab и Laracasts, Adobe, Behance, Codeship, Reuters.

У Angular и React есть свои способы делать то, что Vue значительно проще. Многие компании переходят на Vue, потому что с ним легко работать. Разработка в Angular или React требует хороших знаний JavaScript, и вам нужно принимать множество решений относительно сторонних библиотек.

Теперь, если мы рассмотрим наши фреймворки в этом случае, Angular использует двустороннюю привязку данных, React использует единый поток данных, а Vue поддерживает оба.

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

Первоначально опубликовано на https://amoniac.eu.