ЧТО ТАКОЕ 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:
- Vue.js имеет много схожих характеристик с Angular, и это может помочь оптимизировать обработку блоков HTML с использованием разных компонентов.
- Vue.js имеет очень обширную документацию, которая может отразить кривую обучения для разработчиков и сэкономить много времени на разработке приложения, используя только базовые знания HTML и JavaScript.
- Он обеспечивает быстрый период переключения с других фреймворков на Vue.js из-за схожести с Angular и React с точки зрения дизайна и архитектуры.
- Vue.js можно использовать как для создания одностраничных приложений, так и для более сложных веб-интерфейсов. Главное, небольшие интерактивные части можно легко интегрировать в существующую инфраструктуру, не оказывая негативного влияния на всю систему.
- Требования к стеку отсутствуют, поэтому Vue.JS можно использовать в любом проекте.
- Vue.js может весить около 20 КБ, сохраняя свою скорость и гибкость, что позволяет достичь гораздо более высокой производительности, чем на других платформах.
- Благодаря использованию любых шаблонов и наличию документации, большинство возникающих проблем решается достаточно быстро. В том числе и по сравнению с React, так как в большинстве приложений, не имеющих сложных интерфейсов, вся мощь этого фреймворка немного избыточна.
- Vue.js может помочь разработать достаточно большие повторно используемые шаблоны, которые можно сделать без выделяемого на это лишнего времени, в соответствии с его простой структурой.
- Возможность найти и подключить к проекту практически любого разработчика, хоть немного знакомого с фронтендом. Низкий порог вхождения позволяет работать с фреймворком как фронтенд-, так и бэкенд-разработчикам.
- Vue позволяет создавать функциональные приложения, отвечающие всем современным стандартам, с минимальным подключением новых ресурсов и, по сути, дешевле.
Минусы Vue.JS
Есть и минусы, в частности, по сравнению с React.JS:
- Работа над состоянием приложения ведется «под капотом». Это увеличивает порог входа для новых разработчиков, но для нашей команды это не является недостатком.
- Vue.js по-прежнему имеет довольно небольшую долю рынка по сравнению с React или Angular, а это означает, что обмен знаниями в этой среде все еще находится на начальном этапе. Но надо отметить, что тренды меняются колоссально, и Vue очень активно набирает обороты намного быстрее других фреймворков.
- Поскольку 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.