Краткое введение

Vue.js или просто Vue - это еще один фреймворк веб-приложений для создания одностраничных приложений (SPA). Он имеет небольшой размер и быстро рендерится, превосходя Angular 1, Angular 2 и React (а также другие) в различных условиях.

В этом обсуждении «Vue» будет использоваться в общих чертах, но, в частности, речь идет о Vue.js версии 2.1 или выше (на момент написания статьи 2.2 была только что выпущена) и экосистеме Vue в целом. Между старыми версиями Vue есть некоторые заметные различия, но это не обзор истории, поэтому эти различия не будут обсуждаться.

Что такое Vue?

Его собственными словами (из его введения):

Vue (произносится как / vjuː /, как вид) - это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других монолитных фреймворков, Vue разработан с нуля для постепенного внедрения. Основная библиотека ориентирована только на уровень представления, и ее очень легко выбрать и интегрировать с другими библиотеками или существующими проектами. С другой стороны, Vue также отлично поддерживает сложные одностраничные приложения при использовании в сочетании с современными инструментами и вспомогательными библиотеками.

Начиная

У Vue есть множество ресурсов, которые помогут вам начать работу: полезное вводное руководство, отличная документация по API и тщательно подобранный список других связанных ресурсов (плагины, учебные пособия, подкасты, примеры и т. Д.) Под названием « Awesome Vue »». Поддержка доступна через официальный форум и чат Gitter.

Обзор пакетов

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

В рамках экосистемы Vue действительно имеет пару официальных сопутствующих пакетов для маршрутизации Vue Router и для управления состоянием Vuex. Эти пакеты называются подключаемыми модулями ядра. Использование основных подключаемых модулей совершенно необязательно, но совместное использование трех пакетов (подключаемых модулей Vue + core) обеспечивает полное решение для создания сложных приложений.

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

Сравнение с другими СПА

Синтаксис шаблона, используемый во Vue, сильно зависит от Angular 1 (по его собственному признанию) и имеет некоторые сходства с Angular 2+ (например, сокращенный синтаксис для привязок и событий). Поток данных для компонентов является реактивным и вдохновлен Elm. Vuex берет реплики от Flux / Redux и имеет аналогичные шаблоны.

Подробное сравнение интерфейсных фреймворков доступно здесь. Сравнение охватывает React и Angular 1 и 2, Ember, Knockout, Polymer и Riot. Подробное сравнение производительности (от стороннего производителя) доступно здесь.

В конечном итоге Vue представляет собой смесь многих других фреймворков - в хорошем, а не монстра Франкенштейна - и имеет несколько собственных отличительных черт.



Сравнение с другими фреймворками - Vue.js
Vue.js - интуитивно понятный, быстрый и компоновочный MVVM для создания интерактивных интерфейсов. vuejs.org



Примечательные особенности

Примечательные особенности в том, что они особенно отличаются от React и Angular 2.

Однофайловые компоненты

Vue имеет специальный тип файлов под названием «Однофайловые компоненты» (SFC), которые используют расширение .vue. Как следует из названия, необходимые части компонента находятся в одном файле: шаблон HTML (тег <template>), JavaScript (тег <script>) и стили CSS (тег <style>).

Стиль файлов SFC не является обязательным, но в подавляющем большинстве примеров он используется. По крайней мере, стоит иметь возможность читать их и понимать, как они работают.

Поддержка файлов осуществляется через плагины для таких сборщиков, как Webpack, Browserify и Rollup. Поскольку сборщик уже используется для поддержки SFC, можно добавить дополнительные плагины для поддержки нескольких языков в различных тегах:

  • шаблоны могут быть в HTML или Pug / Jade;
  • скрипты могут быть на ES5, 6 или 7 (с использованием Babel) или TypeScript; и
  • стили могут быть чистыми CSS, SASS / SCSS или Stylus.

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

Используя .vue файлы, можно легко отслеживать связанные шаблоны, код и стиль. Файлы также удобно редактировать.

Разнообразные редакторы (Atom, Brackets, Sublime, Visual Studio Code и другие) поддерживают полную подсветку синтаксиса с помощью плагинов. Список многих доступных плагинов доступен в Vue Awesome.



Однофайловые компоненты - Vue.js
Vue.js - интуитивно понятный, быстрый и составной MVVM для создания интерактивных интерфейсов. vuejs.org



Переходы

Vue имеет встроенную поддержку богатых переходов. Оберните компонент с <transition> компонентом в разметке шаблона и добавьте атрибут имени. Компонент перехода автоматически применяет имена классов CSS к компоненту для обработки различных этапов, таких как вход и выход. Определите свои классы CSS для управления конкретным поведением; скольжение, затухание, ослабление и т. д. можно применить все, что может делать CSS. Vue рекомендует использовать некоторые переходы, доступные в Animate.css. Если CSS недостаточно мощный, можно использовать JavaScript для определения библиотек переходов и анимации, таких как Velocity.js.

Переходы могут применяться от мелких элементов (добавление / удаление элементов списка) к большим (представление маршрутизатора) и всему, что между ними. Переходы можно сделать многоразовыми, чтобы вещи оставались СУХИМИ.

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

Переходное состояние - это обновление состояния элемента на экране (вместо добавления или удаления элементов). Это может быть обновление чисел на таймере, переход цветов или масштабирование, и это лишь некоторые из них. К этим предметам также могут применяться эффекты перехода.

Более подробная информация об эффектах перехода доступна здесь, а переходное состояние - здесь.

Гибридные приложения

В основных фреймворках React и Angular есть проекты, которые используют их для создания мобильных приложений. Angular 1 и 2+ используются в Ionic 1 и 2 соответственно, Angular 2+ используется в NativeScript, а React используется в React Native.

Vue также интегрируется в библиотеку для создания собственных мобильных приложений: Weex. Хотя Weex, возможно, и не так далеко, как его конкуренты, у него есть серьезная поддержка в виде Alibaba (крупнейшей в мире компании электронной коммерции), и недавно он стал инкубаторным проектом Apache Software Foundation.

Хотя это может и не решить насущные проблемы, это говорит о принятии Vue и будущем использовании.



Weex
Weex - это расширяемое кроссплатформенное решение для динамического программирования и публикации проектов. В исходном коде вы… weex.incubator.apache.org



Инструменты

Генератор проектов Vue

Vue предоставляет командную строку, vue-cli, инструмент, помогающий сформировать ваш проект, и использует различные шаблоны проектов, чтобы быстро начать работу с Webpack, Browserify, без системы сборки или с использованием собственного настраиваемого шаблона.

Инструменты разработчика Vue

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

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

Мощной функцией является то, что инструменты разработчика будут делать снимки глобального хранилища Vuex и позволяют разработчику перемещаться по этим снимкам для отладки во времени. Применение снимка обновит приложение в реальном времени и уведомит компоненты об изменении данных. Это можно использовать для отладки до и после события или вызова REST, которые изменили состояние приложения.



Vue.js devtools
Расширение Chrome devtools для отладки приложений Vue.js. chrome.google.com



Другие проблемы

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

React можно проверить статически с помощью Flow. Angular 2 использует TypeScript. Типовая безопасность может быть важна в корпоративных приложениях, и если это решающая функция, то это нормально. Vue имеет определения и объявления TypeScript, которые охватывают пакет базового представления и основные плагины Vuex и Vue Router.

Продолжение развития

React поддерживается Facebook. Angular 2 поддерживается Google. А во Vue есть… Эван Ю? Г-н Ю является создателем, и теперь он работает полный рабочий день над фреймворком и поддерживается пожертвованиями крупных организаций, которые он обсуждает в своем сообщении в блоге Vue в 2016 году. Тот факт, что Alibaba выбрала Vue для своего проекта Weex, свидетельствует о поддержке продолжающейся разработки.

Мои мысли

До сих пор я старался оставаться нейтральным и объективным.

Мне очень нравится Vue.

Некоторые предостережения: я создал небольшой или средний проект с помощью Vue. Я не использовал функции безопасности типов, и приложение потребляло файлы через XHR, но не отправляло никаких данных на сервер (это приложение «только для чтения»).

Помимо базового пакета Vue, я использовал основные плагины (Vuex и Vue Router); .vue файлы с HTML, ES6 и SCSS; компонент <transition> для быстрого перехода затухания при маршрутизации; и расширение Vue Developer Tools для Chrome.

Для процесса сборки я использовал Rollup, плагин Vue для Rollup (rollup-plugin-vue) и компилятор шаблонов Vue для компиляции шаблонов представлений в процессе сборки. Процесс оказался запутанным, и мне пришлось использовать некоторые обходные пути. На главной странице rollup-plugin-vue в самом низу указано: Этот плагин лучше всего подходит для создания компонентных модулей и плагинов. Используйте webpack и «vue-loader для создания приложений Vue.js. »Хотел бы я заметить это раньше.

В целом разработка шла неплохо, даже если у меня получился далеко не идеальный процесс сборки. Я когда-нибудь перейду на Webpack и Vue Loader.

Проблемы, которые у меня были

  • Наверное, стоило обратить внимание на переходную документацию. Я выбрал использование тонкого затухания при переключении представлений вместо более сложного перехода, потому что это было не так просто, как мне хотелось (с учетом усилий, которые я был готов приложить для функции звонка и свистка), поэтому я быстро двинулся дальше.
  • Изучение шаблонов для работы с Vuex замедлило меня, но я полагаю, что тем, у кого есть опыт использования Redux, будет легче. Само по себе это было несложно, но отличалось от Angular.
  • Я не использовал инструменты формирования шаблонов командной строки, вместо этого я решил разобраться в этом самостоятельно для лучшего понимания процесса сборки. На этом пути было несколько неприятных моментов, и плагины Rollup / Vue не кажутся такими зрелыми, как аналоги Webpack и Browserify. Учитывая, что я не заметил вышесказанного о том, что не нужно сразу использовать rollup-plugin-vue для приложений, это, безусловно, усугубило проблемы. Скорее всего, я бы просто использовал Webpack с самого начала.

Вещи, которые я люблю

  • Быстро набирать скорость. Я обнаружил, что приступить к делу быстро и практически безболезненно. На главной странице написано: «Вы уже знаете HTML, CSS и JavaScript? Прочтите руководство и начните строить в кратчайшие сроки! ». Я обнаружил, что это правда.
  • Мне нравилось использовать однофайловые компоненты (также известные как .vue файлы). Он сохраняет структуру папок в чистоте и помогает гарантировать, что я сосредоточусь на конкретном компоненте при написании стилей без раздражения, связанного с переключением между файлами (но, эй, внутри файла все еще есть прыжки).
  • Отрисовывается быстро. Это кажется быстрым, главная страница утверждает, что это быстро (Blazing Fast Virtual DOM), и тесты подтверждают это.
  • Он легкий и организованный с точки зрения программирования: простые и понятные определения объектов. Этот пункт немного более субъективен, но попробуйте его, и я думаю, вы согласитесь - или, по крайней мере, это не хуже.
  • Размер файла - 23 КБ. Для сравнения, Angular 2 с разветвленной структурой по-прежнему занимает 50 КБ при обычном размере более 110 КБ. React занимает около 40 КБ. См. Эту разбивку для более подробной информации.
  • Это гибко. Дополнительные библиотеки основных плагинов и различные варианты сообщества на выбор позволяют сделать правильный выбор для правильной ситуации.
  • Инструменты разработчика Vue довольно хороши, и полезно иметь возможность просматривать дерево компонентов и генерируемые события. Поскольку приложение было только для чтения, а все вызовы REST выполняются при загрузке, мне не нужно было много времени на отладку (было только одно второстепенное свойство состояния, которое изменилось во время использования), но я очень рад использованию этой функции в будущем.

Я думаю, что Vue - отличный фреймворк, он отобрал большинство моих любимых частей Angular 1 и 2 и Backbone, а также применил многие уроки, извлеченные из React, Flux / Redux и Elm.

Если клиент, начальник или влиятельный человек сказал: Давайте использовать Vue, я не сомневаюсь, что это сделаю. Vue определенно набирает популярность, поэтому не удивительно услышать эту фразу.

Наибольшую озабоченность вызывает то, что сообщество несколько меньше, и это влияет на продуктивность повторного использования пакетов, но сообщество растет, и я надеюсь. Нельзя сказать, что это большая проблема. На самом деле это относительно незначительный вопрос. Пакетов много, и доступна поддержка - чуть меньше, чем для React и Angular.

Возможно, пришло время самому попробовать Vue.js.

Следующие шаги

Возможно, вы захотите начать с просмотра некоторых официальных примеров (или отредактировать их, это JSFiddles) или просмотреть обязательные Пример TodoMVC и код, прочитать руководство или начать создавать свой собственный проект. И не забывайте обо всех ресурсах, доступных на Vue Awesome.

Можно было даже пройти курсы у Ларакаст или Удеми. (Обратите внимание, что курсы стоят денег, и я их не посещал.)