Фреймворк vue js что это
Обзор JavaScript фреймворка Vue.js
Были времена, когда веб-приложения разрабатывались на JavaScript таким образом, что как и HTML, так и JavaScript и временами даже CSS, все писалось вместе и вперемешку, не было никакой строгой архитектуры и последовательности, код никак не разбивался на какие-нибудь отдельные части, что конечно же, делало всю разработку невыносимой. Такие времена прошли и сейчас используются различные библиотеки и фреймворки, позволяющий сделать разработку веб-приложений простой и качественной.
Особенность Vue.js в том, что его можно начинать с легкостью использовать в уже существующем приложени, внедряя постепенно и используя вместе с другими JavaScript библиотеками. Это очень отличная особенность, когда нужно переписать приложение постепенно, а не все сразу.
Плюсы Vue.js
Концепции фрейморвка
Основными концепциями Vue являются:
Реактивность
Экземпляр
С создания экземпляра Vue начинается вся разработка. Экземпляр создается через функцию:
Для экземпляра указывается объект с набором опций, используемых в приложении.
Все компоненты Vue также являются экземплярами Vue и поэтому также принимают объект параметров.
Компоненты
Разделение программного кода на некие отдельные компоненты, которые потом взаимодействуют между собой, хорошее решение при построении качественных приложений. Такие приложения легче поддерживать, ведь код каждого компонента написан так, чтобы было как можно меньше зависимостей между компонентами. Ведь когда первый код зависит от второго, и в этом втором, что-то поменялось, то можно ожидать, что в первом коде что-то пойдет не так как ожидалось.
Vue.js позвляет разделять весь код приложения на компоненты и даже асинхронно загружать необходимый компонент в нужный момент.
Можно представить 3 вида разделения кода приложения:
1. Постраничное разделение кода
Разделение кода постранично производится когда в приложении используется несколько страниц, то есть, ваше приложение не одностраничное. За каждую страницу отвечает отдельный компонент, а сборка файлов с этими компонентами происходит через функцию import. При перемещении между страницами, нужные файлы будут асинхронно подгружаться. Такое поведение можно сделать с помощью роутинга Vue.js.
Простой пример роутинга может выглядеть следующим образом:
2. Разделение кода вне видимости
3. Разделение кода по условию
Когда какая-то часть приложения должна отображаться в зависимости от состояния какого-либо элемента или выполнения действия, то можно использовать разделение кода по условию. Например, если пользователь находится в одной группе, то ему можно подгружать один тип контента, если пользователь во второй группе, то соответственно ему отображаем другой тип контента и так далее. Сюда же можно отнести какие-либо всплывающие окна, вкладки, отображение элементов в зависимости от состояния различных переключателей.
Директивы
В примере директива v-if удалит или вставит элемент
в зависимости от истинности значения выражения seen.
Анимация и переходы
Vue позволяет анимировать переходы при добавлении, обновлении и удалении объектов DOM.
Система анимирования переходов Vue предоставляет много простых методов для анимации появления и исчезновения элементов и списков, а также анимации самих данных. Например:
Все эти параметры либо хранятся как числа, либо могут быть сконвертированы в числа. Это значит, что мы можем использовать сторонние библиотеки для анимации, в сочетании с компонентными и реактивными системами Vue.
Анимация состояния при помощи наблюдателей позволяют нам анимировать изменения любых числовых свойств. В такой абстрактной форме это может звучать сложновато, так что давайте просто разберём пример с использованием Tween.js:
Как и для анимированных компонентов, данные, на которых основываются переходы, могут обновляться в режиме реального времени, что особенно полезно для прототипирования! Даже используя простой SVG-полигон можно достичь многих интересных эффектов, труднодостижимых без небольшой игры с переменными.
Основы Vue.js
Что такое Vue.js. Первое приложение
Первый релиз фреймворка увидел свет в феврале 2014 года. Его создателем является Эван Ю (Evan You), который до этого работал в Google над AngularJS. С тех пор фреймфорк динамично развивается, его текущей версией является версия 2.3.
Для этого Vue.js использует виртуальный DOM. Виртуальный DOM представляет легковесную копию обычного DOM. Если приложению нужно узнать информацию о состоянии элементов, то происходит обращение к виртуальному DOM. Если данные, которые используются в приложении Vue.js, изменяются, то изменения вначале вносятся в виртуальный DOM. Потом Vue выбирает минимальный набор компонентов, для которых надо выполнить изменения на веб-странице, чтобы реальный DOM соответствовал виртуальному. Благодаря виртуальному DOM повышается производительность приложения.
Vue.js поддерживается всеми браузерами, которые совместимы с ECMAScript 5. На данный момент это все современные браузеры, в том числе IE11.
Первое приложение
Создадим первое приложение на Vue.js. Прежде всего нам надо подключить файлы фреймворка на веб-страницу. Все необходимые материалы для загрузки можно найти по адресу https://vuejs.org/v2/guide/installation.html. С этой страницы можно загрузить файл фреймворка локально (доступен в двух вариантах: Production и Development).
Вместо использования локального файла мы можем загружать фреймворк из CDN по ссылке:
Либо если используется Node.js, то можно установить Vue.js через пакетный менеджер npm с помощью команды:
В данном случае будем использовать подключение файла из CDN. Для этого определим следующую веб-страницу:
То есть корневым элементом приложения будет элемент с id равным app.
Также объект определяет используемые данные через параметр data :
В данном случае определено только свойство message, которая хранит строку.
В элементе с на веб-странице, используя двойные фигурные скобки мы можем вывести значение свойства message и более того связать участок веб-станицы с этим элементом.
Теперь запустим веб-страницу в веб-браузере (можно просто кинуть веб-страницу в браузер):
И при вводе в текстовое поле будет автоматически изменяться значение, которое выводится на веб-страницу.
Разработка более быстрых приложений на Vue.js
JavaScript — это душа современных веб-приложений. Это — главный ингредиент фронтенд-разработки. Существуют различные JavaScript-фреймворки для создания интерфейсов веб-проектов. Vue.js — это один из таких фреймворков, который можно отнести к довольно популярным решениям.
Vue.js — это прогрессивный фреймворк, предназначенный для создания пользовательских интерфейсов. Его базовая библиотека направлена, в основном, на создание видимой части интерфейсов. В проект, основанный на Vue, при необходимости легко интегрировать и другие библиотеки. Кроме того, с помощью Vue.js и с привлечением современных инструментов и вспомогательных библиотек, можно создавать сложные одностраничные приложения.
В этом материале будет описан процесс создания простого Vue.js-приложения, предназначенного для работы с заметками о неких задачах. Вот репозиторий фронтенда проекта. Вот — репозиторий его бэкенда. Мы, по ходу дела, разберём некоторые мощные возможности Vue.js и вспомогательных инструментов.
Создание проекта
Прежде чем мы перейдём к разработке — давайте создадим и настроим базовый проект нашего приложения по управлению задачами.
Теперь, после того, как база приложения готова, мы можем переходить к следующему шагу работы над ним.
Маршрутизация
Объект children содержит вложенные маршруты, которые будут показаны на странице приложения, представляющей его панель управления (файл DashboardLayout.vue ). Вот шаблон этой страницы:
Основы работы с компонентами
Компоненты — это базовая составляющая Vue.js-приложений. Они дают нам возможность пользоваться модульным подходом к разработке, что означает разбиение DOM страниц на несколько небольших фрагментов, которые можно многократно использовать на различных страницах.
При проектировании компонентов, для того, чтобы сделать их масштабируемыми и подходящими для повторного использования, нужно учитывать некоторые важные вещи:
Вот как этот компонент используется в DashboardLayout.vue :
Взаимодействие компонентов
В любом веб-приложении чрезвычайно важна правильная организация потоков данных. Это позволяет эффективно манипулировать и управлять данными приложений.
При использовании компонентного подхода, при разделении разметки и кода приложения на небольшие части, перед разработчиком встаёт вопрос о том, как передавать и обрабатывать данные, используемые различными компонентами. Ответом на этот вопрос является организация взаимодействия компонентов.
Взаимодействие компонентов в Vue.js-проекте можно организовать с использованием следующих механизмов:
Вот файл компонента NoteViewer ( NoteViewer.vue ):
Теперь, когда компоненты созданы, изучим их разделы
Именно так можно избежать проблемы с масштабированием. Речь идёт о том, что если есть вероятность изменения реализации некоего механизма, то в такой ситуации компонент просто генерирует соответствующее событие.
Вот и всё. Теперь наши компоненты могут обмениваться данными.
Использование библиотеки Axios
Axios — это библиотека, основанная на промисах, предназначенная для организации взаимодействия с различными внешними сервисами.
Она обладает множеством возможностей и ориентирована на безопасную работу. Речь идёт о том, что Axios поддерживает защиту от XSRF-атак, перехватчики запросов и ответов, средства преобразования данных запросов и ответов, она поддерживает отмену запросов и многое другое.
В файл main.js добавим перехватчик ответов на запросы, предназначенный для взаимодействия с внешним API. Мы будем применять перехватчик для подготовки данных, передаваемых в приложение, и для обработки ошибок.
Мы сможем работать с этой переменной во всём приложении через экземпляр Vue.js.
Теперь мы готовы к выполнению запросов к API, которые могут выглядеть так:
Оптимизация
Представим, что наше приложение доросло до размеров, когда в его состав входят сотни компонентов и представлений.
Это повлияет на время загрузки приложения, так как весь его JavaScript-код будет загружаться в браузер за один заход. Для того чтобы оптимизировать загрузку приложения, нам нужно ответить на несколько вопросов:
Это позволяет создавать для конкретного маршрута отдельные фрагменты с материалами приложения (вида [view].[hash].js ), которые загружаются в ленивом режиме при посещении пользователем данного маршрута.
Упаковка проекта в контейнер Docker и развёртывание
Теперь приложение работает так, как нужно, а значит пришло время его контейнеризации. Добавим в проект следующий файл Dockerfile :
При использовании приложения в продакшне мы размещаем его за мощным HTTP-сервером вроде Nginx. Это позволяет защитить приложение от взломов и от других атак.
Помните о переменной окружения, содержащей сведения о хосте, которую мы объявили, настраивая Axios? Вот она:
После того, как контейнер приложения будет собран, его можно запустить:
Vue.js и как его понять
В своей работе, мне относительно недавно пришлось столкнуться с фреймворком Vue.js, т.к. до этого, я занимался в основном backend разработкой, пришлось со многим разбираться и многое было сложновато понять, особенно, когда раньше использовал только jQuery. В рамках данной статьи, я хочу помочь своему читателю разобраться с теми проблемами в понимании, с которыми столкнулся я. Конечно проблемы на этапе изучения чего-то нового у всех возникают разные, но и не мало тех, у кого они будут похожи, именно на это и будет направлена данная статья.
Я не буду проводить сравнение данного фреймворка с другими, думаю, что по этому поводу в интернете информации хватает, попытаемся разобраться именно с Vue.js и с “чем его едят?!”. В данном контексте будут рассматриваться примеры для сборки с помощью webpack или подобным системам. Примеры компонентного взаимодействия будут на примере однофайловых компонентов, поскольку они немного проще в понимании. Однако, принципы взаимодействия однофайловых и многофайловых компонентов ничем особо не отличаются.
Рассматриваемые аспекты
Сразу дам небольшой совет: “Не нужно пытаться провести аналогии написанного с jQuery!”, чем больше будет попыток провести аналогию, тем больше будет путаницы и непонимания.
Области видимости переменных
В официальной документации, конечно есть вся необходимая информация, но с ней сложновато разобраться, пока не попробуешь и не разберешься сам. Я попробую облегчить этот процесс.
В любом компоненте Vue имеется набор данных называемых “props”. Это объект содержащий в себе те данные, которые могут быть определены при вызове компонента или иметь значение по умолчанию.
Пример объявления свойств компонента:
В данном примере, мы указываем, что в нашем компоненте есть некий uuid, который является строкой и по умолчанию он является пустой строкой.
Кроме этого, в компоненте содержится объект data<>, который выполняет взаимодействие нашего компонента, с какими-либо другими, которые мы можем использовать в своем. В Vue является нормальной практикой, когда один компонент, может в себе совмещать несколько других, для их объединения. data, часто объявляется как функция, такую практику вы встретите наиболее часто на форумах и сообществах, обсуждающих реализацию на Vue
Как видите, объект data не задает типы переменных, а сразу присваиваются значения. В своем приложении, мы можем менять это значение по определенным событиям, а в свою очередь другие компоненты вызванные в нашем, будут отслеживать изменение этих переменных и определенным образом реагировать на них. Это и будет реактивная связка компонентов с определенными переменными.
Кроме этого, в общем объекте компонента задаются методы (функции), для работы с этими переменными и событиями внутри компонента. В зависимости от того, где они вызываются, они должны располагаться в определенных объектах. Более подробно, про них, вы можете ознакомиться в официальной документации, там вопросов вроде бы не возникает. Мы же говорим об области видимости. Поэтому рассмотрим пример:
В данном примере, мы в своем компоненте создаем шаблон, в котором вызываем компонент Vuetify dialog
Для работы с ним, на понадобится модель alert, которая будет указывать на то открыто ли это окно сейчас или закрыто (соответственно true или false), а так же переменная alertMessage — которая будет в себе нести сообщение об ошибке или предупреждении. Каждому свойству, например color или max-width мы можем задать переменные, которые должны находиться в объекте data()<>, и с помощью своих методов изменять их. Но для простоты ограничимся двумя. Итак для управления этими свойствами, мы должны правильно распределить объекты внутри скрипта компонента.
На данном примере видно, что у нас есть некий метод deleteObject(), заданный в объекте methods, который делает запрос на удаление чего-то на сайте example.com, каким то образом обрабатывает ответ, а в случае провала выбрасывает исключение, в котором, уже мы вызываем наш компонент диалог, присваивая переменной alert значение true и присваиваем сообщение, которое будет выведено в шаблоне. Теперь обратите внимание, что в шаблоне, мы обращаемся к переменным в дате напрямую, просто указывая их название, а в методах, через объект this. Все методы, где бы они не были заданы, если они работают с data, они используют эти переменные через this. Если один метод, должен вызывать какой-то другой, определенный в объекте methods, он тоже вызывается через this.methodName().
Также обратите внимание на обработчик события клика в шаблоне:
Здесь можно без метода изменить значение переменной alert в data, и поскольку она реактивно связана с моделью — компонент сразу отреагирует на ее изменение.
В данном случае, тем кто привык работать с классическими объектами можно запутаться, потому что связь выглядит немного нелогичной. Но на самом деле, никакой магии здесь нет. Когда мы вызываем экземпляр класса Vue и подключаем туда компоненты, он их интерпретирует через собственные объекты внутри js-фреймворка, именно поэтому у него образуется некое подобие собственной области видимости.
Передача данных между компонентами
Часто из нашего компонента, мы должны управлять состоянием других компонентов, вызванных внутри нашего. Как я уже писал выше, для этого существует объект `props`, а передача осуществляется путем присвоения этого значения, либо с помощью нашей переменной в data либо сразу присвоением значения этому свойству.
В нашем же примере, который я использовал выше уже это есть, для удобства, я продублирую его снова, и постараюсь объяснить:
Возьмем для примера, встроенный в наш шаблон компонент
В объекте data, мы должны объявить эту переменную, тогда мы сможем ее изменять методами нашего компонента, указанными в объекте methods:
Теперь мы можем объявить метод, и изменять переменную toolbarColor внутри него, используя конструкцию this.toolbarColor = “Значение”, и компонент будет на нее реагировать.
Таким образом, мы можем передавать значения в дочерние компоненты.
Для обратной связи, т.е. из дочернего компонента получить данные в родительский используются другие, чуть более сложные конструкции. В Vue есть встроенные методы, для этого, они хорошо описаны в официальной документации Vue, по ссылке,
поэтому я не буду подробно останавливаться на них. Проблема в том, что это не всегда удобный способ, и когда вы его подробно изучите, то сами убедитесь в этом. Он, так сказать, применим не во всех случаях.
Есть еще один хороший способ, использование библиотеки Vuex, которая создает некое хранилище для общих переменных, для управления состоянием приложения. На ней я тоже не буду подробно останавливаться, потому что, если вы поймете логику взаимодействия переменных внутри методов компонента и других компонентов, разобраться с Vuex, не должно составить труда. Кроме того, у них есть хорошая русскоязычная документация.
Для работы с Vuex, я прошу обратить особое внимание на то, как она правильно устанавливается, и что для доступа к данным, вам как минимум нужно использовать Мутации и Геттеры. Про них советую прочитать наиболее подробно. Я сначала пытался бегло понять суть и приступить к программированию, но столкнулся с множеством непонятных мне, на тот момент, проблем. Поэтому этим разделам уделите особое внимание.
Я обращу ваше внимание на саму систему взаимодействия. Она немного отличается от стандартного взаимодействия внутри Vue. Это как раз то, что я сначала упустил, а потом потратил много времени, чтобы разобраться. Возьму пример из официальной документации:
Здесь, мы объявляем сам store и getters методы для него. Обратите внимание, что метод внутри getters задан не совсем стандартно, но еще более нестандартно его использование в своем компоненте. В нашем компоненте, если мы хотим использовать переменную из store, мы должны вызвать ее с помощью новых переменных, и метод будем вызывать не как метод, а как свойство объекта store
И никаких скобок, поскольку это метод, который вернет готовый объект, он и вызывается как просто свойство объекта getters внутри $store.
С мутациями немножкуо проще, там сразу написано, что нужно использовать comit(‘methodName’, ПЕРЕДАВАЕМЫЕ_В_МЕТОД_ПЕРЕМЕННЫЕ).
Более подробно про мутации здесь.
Заключение
Мы познакомились с областью видимости переменных внутри компонентов, узнали способы обмена данными между компонентами, отсюда уже должно сложиться общее понимание о взаимодействии компонентов друг с другом в Vue.js. От себя скажу, что система достаточно гибкая, и уже существует множество готовых компонентов и библиотек, расширяющих возможность Vue. Каждый желающий может присоединиться к развитию этой системы и облегчать жизнь другим разработчикам. Компонентная система позволяет легче обслуживать код, соединять готовые компоненты внутри других, и не дублировать код, что приближает нас к способом “красивой” разработки. Новичкам желаю терпения и успеха, в познании новых для себя областей.
Ниже я добавил ссылки, с которых я использовал материалы для написания статей и примеров. Для библиотеки Vuetify я напишу две ссылки, на англоязычную и на русскоязычную документацию, поскольку русскоязычная на момент написания статьи переведена не полностью, и в ней может чего-то не быть. Но в англоязычной, вы сможете найти все что нужно знать об этой библиотеке. По работе с данной библиотекой, могу написать более подробно, если будут вопросы по ней или что-то станетне понятно.
Сравнение с другими фреймворками
Определённо, этот раздел руководства — самый трудный для написания, но он очень важен. Вероятно, вы уже решаете определённые задачи, используя тот или иной фреймворк или библиотеку, а сюда вас привело желание узнать, не позволит ли Vue упростить и улучшить вашу работу. На этот вопрос мы и надеемся ответить.
Мы очень постараемся не быть предвзятыми. Будучи членами основной команды разработки Vue, мы, разумеется, сами его очень любим. На наш взгляд, с некоторыми задачами Vue справляется лучше, чем какой-либо другой существующий фреймворк. Если бы мы не верили в это, мы бы наверное и не работали над этим проектом, верно? И тем не менее, нам бы хотелось быть предельно честными и точными в оценках. В тех случаях, когда альтернативные библиотеки имеют существенные преимущества, как например обширнейшая экосистема альтернативных средств отрисовки React’а или поддержка браузеров вплоть до IE6 Knockout’ом, мы постараемся не забыть о них упомянуть.
Кроме того, мы очень высоко ценим вашу помощь в деле поддержания актуальности этого документа, потому что мир JavaScript развивается стремительно! Если вы заметите какую-либо неточность или ошибку — пожалуйста, дайте нам знать, открыв issue на GitHub.
React
React и Vue во многом похожи. Они оба:
Из-за столь похожих ниш, мы уделили сравнению этих фреймворков больше всего времени. Нашей целью было не только удостовериться в технической точности, но также и сохранить баланс. Мы указываем, где React превосходит Vue, например — в богатстве экосистемы и изобилии доступных пользовательских средств отрисовки.
Тем не менее, многие рассматриваемые моменты — в известной мере субъективны, и видится неизбежным то, что некоторым пользователям React дальнейшее сравнение всё равно покажется предвзятым. Мы понимаем, что и в технических вопросах существуют элементы вкуса, и в основном ставим своей целью в этом сравнении указать причины, по которым Vue может оказаться вам полезным — на случай если ваши вкусы совпадают с нашими.
Некоторые из приведённых ниже разделов могут быть немного устаревшими из-за недавних обновлений в React 16+, и мы планируем работать с сообществом React для актуализации этого раздела в ближайшем будущем.
Быстродействие выполнения
Как React, так и Vue — исключительно быстрые, поэтому скорость вряд ли будет решающим фактором при выборе между ними. Если вас интересуют цифры, то можете изучить стороннее сравнение производительности, которое фокусируется на сырой производительности отрисовки/обновления дерева очень простых компонентов.
Усилия для оптимизации
В целом, это устраняет необходимость целого класса оптимизаций производительности для разработчика, что позволяет больше сосредоточиться на построении самого приложения по мере его масштабирования.
HTML & CSS
В React абсолютно всё — это JavaScript. Не только структуры HTML, выраженные через JSX, последние тенденции также включают управление CSS внутри JavaScript. Этот подход имеет свои преимущества, но также заставляет идти на компромиссы, которые могут показаться неэффективными для каждого разработчика.
Vue охватывает классические веб-технологии и основывается на них. Чтобы показать вам что это значит, мы рассмотрим несколько примеров.
JSX vs Шаблоны
В React все компоненты реализуют свой UI в render-функциях с использованием JSX, декларативным XML-подобным синтаксисом, который работает в JavaScript.
Render-функции с JSX имеют несколько преимуществ:
Вы можете использовать все возможности языка программирования (JavaScript) для построения своего представления. Это включает в себя временные переменные, управление ветвлением и прямые ссылки на значения JavaScript в области видимости.
Поддержка инструментов (например, линтинг, проверка типов, автодополнение в редакторе) для JSX в некоторых отношениях более продвинута, чем то, что доступно в настоящее время для шаблонов Vue.
Для многих разработчиков, которые работают с HTML, шаблоны просто более естественны для чтения и написания. Само это предпочтение может быть несколько субъективным, но если это делает разработчика более продуктивным, то преимущество налицо.
HTML-шаблоны облегчают постепенную миграцию существующих приложений для использования возможностей реактивности Vue.
Это также облегчает дизайнерам и менее опытным разработчикам разбираться и вносить доработки в текущую кодовую базу.
Вы можете даже использовать препроцессоры, такие как Pug (ранее известный как Jade), чтобы создавать ваши шаблоны во Vue.
Некоторые утверждают, что важно изучить дополнительный язык DSL (Domain-Specific Language) для написания шаблонов — мы считаем, что эта разница в лучшем случае поверхностна. Во-первых, JSX не означает, что пользователю не нужно ничего учить — это дополнительный синтаксис на основе простого JavaScript, поэтому он прост в освоении для любого, кто знаком с JavaScript, но говорить, что это просто для всех, было бы заблуждением. Точно также шаблон является просто дополнительным синтаксисом поверх простого HTML и, следовательно, имеет очень низкий порог вхождения для тех, кто уже знаком с HTML. С помощью DSL мы также можем помочь пользователю сделать больше с меньшим количеством кода (например, с v-on модификаторами). Похожая задача может включать в себя намного больше кода при использовании простых функций JSX или render-функций.
Модульный (компонентный) CSS
За исключением случаев разделения компонентов на несколько файлов (например, посредством CSS-модулей), для ограничения области видимости CSS в React обычно используется подход CSS-in-JS (например, styled-components и emotion). Это представляет собой новый компонентно-ориентированный подход к стилизации, который отличается от обычного процесса разработки CSS. Кроме того, несмотря на поддержку извлечения CSS в отдельный файл стилей на этапе сборки, по-прежнему может быть необходимо, чтобы во время выполнения были подключены в сборку для корректной работы стилизации. В то время, как вы получаете доступ к динамичности JavaScript при создании ваших стилей, этот компромисс зачастую увеличивает размер сборки и время исполнения.
Если вы поклонник подхода CSS-in-JS — многие популярные библиотеки поддерживают Vue (например, styled-components-vue и vue-emotion). Главным отличием между React и Vue здесь будет то, что по умолчанию стилизация Vue выполняется через знакомые теги style в однофайловых компонентах.
Однофайловые компоненты предоставляют вам полный доступ к CSS в том же файле, что и остальная часть кода вашего компонента.
Масштабирование
Масштабирование вверх
Для крупных приложений, как Vue так и React предоставляют надёжные решения для роутинга. Сообщество React также породило весьма инновационные решения в области управления состоянием приложения (см. Flux/Redux). Эти подходы, и даже сам Redux легко интегрируются в приложения на Vue. В действительности, Vue сделал следующий шаг, создав Vuex — вдохновлённую Elm реализацию паттерна управления состоянием приложения. Vuex глубоко интегрирован с Vue, что, на наш взгляд, изрядно облегчает жизнь разработчикам.
В качестве ещё одного важного различия между React и Vue можно упомянуть тот факт, что все дополнительные библиотеки Vue, включая библиотеки для управления состоянием приложения и для роутинга (среди прочих задач), официально поддерживаются в актуальном соответствии с ядром библиотеки. React, напротив, предпочитает отдать эти вопросы на откуп сообществу, тем самым создавая более фрагментированную экосистему. Впрочем, как уже замечалось ранее, в силу популярности React, его экосистема значительно обширнее, чем у Vue.
Наконец, у Vue есть CLI генератор проектов, который позволяет легко начать новый проект с помощью интерактивного мастера. Его также можно использовать для мгновенного прототипирования компонента. React также делает успехи в этой области с помощью create-react-app, но в настоящее время у него есть несколько ограничений:
Важно заметить, что многие из этих ограничений — следствия сознательно принятых решений команды create-react-app, и в них есть и свои плюсы. Например, коль скоро ваш проект не требует пользовательской настройки процесса сборки, её можно будет обновлять как зависимость. Прочитать больше об этом подходе можно здесь.
Масштабирование вниз
React известен своей довольно крутой кривой изучения. До того момента, когда новичок сможет что-то написать, ему придётся узнать о JSX, а вероятно — и о ES2015+, поскольку многие примеры используют синтаксис ES2015-классов. Кроме того придётся разобраться с системами сборки, поскольку, хотя технически и существует возможность использовать Babel самостоятельно для live-компиляции кода, для production этот подход в любом случае не годится.
Vue масштабируется вверх ничуть не хуже, чем React, и в то же время его можно масштабировать и вниз — вплоть до варианта использования вместе с jQuery. Именно так — для старта в простейшем случае достаточно просто добавить тег скрипта на HTML-страницу.
Начиная с этого момента можно писать код на Vue, и даже использовать production-версию, не мучаясь угрызениями совести и волнениями насчёт производительности.
Поскольку знания JSX, ES2015 и систем сборки не требуется для начала работы с Vue, в среднем у новых разработчиков уходит не больше дня на чтение руководства, позволяющего узнать достаточно для построения нетривиальных приложений.
Нативная отрисовка
React Native позволяет писать нативные приложения для iOS и Android, используя ту же самую модель компонентов React’а. Это — прекрасно, так как позволяет разработчикам применить знание одного и того же фреймворка на различных платформах. В этой области, Vue официально поддерживает проект Weex — кроссплатформенный UI-фреймворк, созданный Alibaba Group и инкубированный Apache Software Foundation (ASF). Weex позволяет использовать тот же синтаксис Vue для создания компонентов, которые не только могут отображаться в браузере, но и также нативными элементами в iOS и Android!
На данный момент Weex всё ещё находится в активной фазе разработки, и ещё не столь матёр и проверен опытом, как React Native. Однако, его разработка мотивируется реальными требованиями крупнейшего бизнеса электронной коммерции в мире. Команда разработки Vue также активно взаимодействует с разработчиками Weex, гарантируя отсутствие неожиданностей для Vue-разработчиков.
Ещё один вариант NativeScript-Vue — плагин для NativeScript для создания по-настоящему нативных приложений с помощью Vue.js.
Сравнение с MobX
MobX стал довольно популярным в сообществе React. Он использует почти идентичную Vue систему реактивности. В некотором смысле, связку React + MobX можно считать несколько более многословным вариантом Vue, так что если вы используете её, и она вам нравится, переход на Vue может оказаться следующим логичным шагом.
Preact и другие React-подобные библиотеки
React-подобные библиотеки обычно пытаются использовать как можно больше своих API и экосистемы React насколько это осуществимо. По этой причине большинство сравнений, приведённых выше, также применимы и к ним. Главным отличием, как правило, будет уменьшение доступной экосистемы (часто значительно) в сравнении с React. Поскольку эти библиотеки не могут быть на 100% совместимы со всем в экосистеме React, некоторые библиотеки инструментов или сопутствующие библиотеки могут не использоваться. Или, даже если похоже что они работают, они могут сломаться в любое время, если ваша конкретная React-подобная библиотека не поддерживается наравне с React.
AngularJS (Angular 1)
Некоторые части синтаксиса Vue выглядят очень похоже на синтаксис AngularJS (например, сравните v-if и ng-if ). Это — не случайность: многие идеи, лежащие в основе AngularJS мы считаем верными, и вдохновлялись ими на ранних этапах разработки Vue. Впрочем, в AngularJS немало и болезненных проблем, и в этих областях мы постарались добиться значительных улучшений.
Сложность
Vue значительно проще AngularJS, как в смысле API, так и в смысле архитектуры. Получение достаточных знаний для написания нетривиальных приложений обычно происходит менее чем за день, чего нельзя сказать об AngularJS.
Гибкость и модульность
AngularJS имеет жёсткое мнение насчёт структуры вашего приложения, в то время как Vue проявляет гибкость и является более модульным решением. Хотя это и делает Vue пригодным для большего разнообразия проектов, мы понимаем и то, что когда решения уже приняты за тебя, можно сразу начать программировать, и в этом есть свои преимущества.
Поэтому мы предоставляем полную систему для быстрой разработки на Vue.js. Vue CLI нацелен стать стандартным базовым инструментом для экосистемы Vue. Это гарантирует, что различные инструменты сборки будут работать вместе с оптимальными настройками по умолчанию, что позволит сосредоточиться на создании приложения, а не тратить часы на конфигурирование. В то же время, он по-прежнему предоставляет гибкую настройку конфигурации каждого инструмента в соответствии с конкретными потребностями.
Связывание данных
AngularJS использует двунаправленное связывание данных между областями видимости, в то время как Vue концентрируется на однонаправленном потоке данных между компонентами. Это позволяет облегчить понимание потока данных в нетривиальных приложениях.
Директивы и компоненты
Vue чётче разделяет директивы и компоненты. Директивы предназначены только для инкапсуляции низкоуровневых манипуляций с DOM, в то время как компоненты являют собой полноценные автономные объекты, со своей собственной логикой данных и представления. В AngularJS директивы делают всю работу, а компоненты всего лишь определённый тип директив.
Быстродействие выполнения
Vue производительнее AngularJS. Кроме того, из-за отсутствия dirty-checking, оптимизировать Vue-приложения намного-намного проще. AngularJS замедляется при увеличении количества наблюдателей, поскольку каждый раз при изменении чего-либо в области видимости все эти наблюдатели должны быть перезапущены. Кроме того, цикл может повториться несколько раз перед стабилизацией, поскольку реакция наблюдателей может спровоцировать следующее обновление. Пользователям AngularJS нередко приходится прибегать к весьма эзотерическим техникам для обхода этих трудностей, а в некоторых случаях оптимизация и вовсе становится невозможной.
Vue не подвержен таким проблемам по причине использования прозрачного механизма учёта зависимостей с асинхронной очередью — все изменения рассматриваются независимо, кроме случаев явного указания наличия связи между ними.
Любопытно, что есть немало общих черт, как Angular и Vue решают эти проблемы AngularJS.
Angular (известный также как Angular 2)
Мы выделяем отдельную секцию для нового Angular, поскольку по сути он полностью отличен от AngularJS. Например, теперь он содержит полноценную компонентную систему; кроме того, многие детали реализации были полностью переписаны, а API очень существенно изменился.
TypeScript
Для Angular требуется использовать TypeScript, поскольку почти вся его документация и учебные ресурсы основаны на TypeScript. TypeScript имеет свои очевидные преимущества — проверка статических типов может быть очень полезна для крупных приложений, и может добавить производительности разработчикам, работающим на Java и C#.
Однако не все хотят использовать TypeScript. Часто для небольших приложений введение системы типов может привести к большему увеличению накладных расходов нежели увеличению производительности разработки. В таких случаях вам лучше воспользоваться Vue, так как использовать Angular без TypeScript может быть сложным.
Наконец, хотя Vue и не так глубоко интегрирован с TypeScript как Angular, но предоставляет официальные декларации типов и официальный декоратор для тех, кто хочет использовать TypeScript с Vue. Мы также активно сотрудничаем с командами TypeScript и VSCode в Microsoft, чтобы улучшить опыт TS/IDE для пользователей Vue + TS.
Быстродействие выполнения
В смысле производительности, оба фреймворка весьма быстры, и пока нет достаточных данных из реального мира чтобы вынести окончательный вердикт. Но если вы всё же хотите цифр, похоже что Vue 2.0 всё-таки обгоняет Angular, по крайней мере, если верить этому стороннему исследованию производительности.
Оба фреймворка исключительно быстрые, с очень похожими метриками в тестах. Вы можете изучить конкретные цифры для более детального сравнения, но скорость вряд ли станет решающим фактором.
Размер
Последние версии Angular, с AOT-компиляцией и tree-shaking, смогли значительно уменьшить размер сборок. Однако полнофункциональный проект Vue 2 с включёнными Vuex + Vue Router (
30КБ gzip) по-прежнему значительно легче из коробки, чем AOT-скомпилированное приложение, созданное с помощью angular-cli (
Гибкость
Vue значительно менее упрям, чем Angular, и поддерживает множество различных систем сборок, не ограничивая разработчиков в том, какую структуру использовать для приложения. Многим программистам эта свобода нравится, хотя есть и те, кто предпочитают иметь единственно-правильный способ построения приложения.
Кривая обучения
Всё что необходимо для начала работы с Vue — это знакомство с HTML и обыкновенным (ES5) JavaScript’ом. С этими базовыми навыками вы уже можете начать строить нетривиальные приложения после менее чем однодневного прочтения руководства.
Кривая обучения у Angular гораздо круче. API фреймворка просто огромное и вам как пользователю нужно будет разобраться с большим количеством концепций, прежде чем стать продуктивным. Очевидно, что сложность Angular во многом обусловлена его направленностью только на большие, комплексные приложения — но это делает платформу намного более трудной для менее опытных разработчиков.
Ember
Ember — это полнофункциональный фреймворк, изначально созданный «имеющим и отстаивающим своё мнение». Он требует соблюдения множества соглашений и конвенций, и когда вы с ними освоитесь — он может сделать вас весьма продуктивными. Однако, это означает ещё и высокую и крутую кривую обучения, не говоря о страдающей гибкости. Выбор между жёстко структурированным фреймворком и библиотекой со слабосвязанными совместно работающими инструментами — это всегда компромисс. Последняя даёт больше свободы, но и требует принятия большего количества самостоятельных архитектурных решений.
Учитывая вышесказанное, вероятно будет разумнее сравнивать ядро Vue и слои шаблонизации и объектной модели Ember:
Vue предлагает ненавязчивую реактивность для простых JavaScript-объектов и полностью автоматические вычисляемые свойства. В Ember от вас ожидается заворачивание всего в «Объекты Ember» и ручное указание зависимостей для вычисляемых свойств.
Синтаксис шаблонов Vue позволяет использовать все возможности выражений JavaScript, в то время как возможности выражений Handlebars и синтаксис хелперов в Ember намеренно существенно ограничены.
В вопросах производительности Vue существенно выигрывает — даже с учётом последнего обновления Glimmer engine в Ember 3.x. Vue автоматически объединяет операции обновления, в то время как в Ember требуется ручное управление циклом выполнения в ситуациях, где производительность критична.
Knockout
Knockout был пионером MVVM-подхода и отслеживания изменений в данных. Его система реактивности очень похожа на используемую Vue. Список поддерживаемых браузеров — впечатляет, особенно с учётом всех немалых возможностей фреймворка, доступных даже в IE6! Vue же поддерживает только IE9+.
Со временем, впрочем, разработка Knockout замедлилась и он понемногу начал показывать признаки своего возраста. Например, компонентной системе недостаёт полного набора хуков жизненного цикла, а интерфейс передачи дочерних компонентов, хоть и используется очень широко, выглядит по сравнению со слотами Vue не очень выигрышно.
Кроме того, похоже что существует разница в философских подходах к API, которая, если вам интересно, может быть продемонстрирована различиями при создании простого списка todo. Конечно же, это — субъективный вопрос, но многим API Vue кажется проще и лучше структурированным.
Polymer
Polymer — это проект, спонсируемый Google. В действительности, он тоже послужил источником вдохновения для Vue. Компоненты Vue можно приблизительно сравнивать с пользовательскими элементами Polymer. Стиль разработки с использованием обоих фреймворков довольно похож. Самая существенная разница состоит в том, что Polymer базируется на последних возможностях Web Components и требует для работы использования весьма нетривиальных полифилов (с потерей быстродействия в браузерах без нативной поддержки этих возможностей). Vue, напротив, без каких-либо зависимостей или полифилов работает во всех браузерах, начиная с IE9.
В Polymer, разработчики существенно ограничили систему связывания данных для улучшения производительности. Например, единственными поддерживаемыми в шаблонах Polymer выражениями являются булево отрицание и одиночные вызовы методов. Реализация вычисляемых свойств — тоже не очень гибкая.
Riot 3.0 предлагает похожую модель разработки, основывающуюся на компонентах (в Riot называемых «тегами»), с минималистичным и прекрасно организованным API. Вероятно, Riot и Vue во многом основаны на схожих философских подходах. Однако, несмотря на немного больший размер по сравнению с Riot, Vue имеет некоторые существенные преимущества: