Создание масштабируемых приложений

НОВОЕ: Начните работу с компонентами Vue в одном файле, горячей перезагрузкой, проверкой на ошибки при сохранении и модульными тестами всего за несколько минут с помощью vue-cli!

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

Экосистема Vue.js предоставляет набор инструментов и библиотек для создания крупных одностраничных приложений с Vue.js. В этом разделе мы начинаем немного больше похожим на «фреймворк», но это просто набор рекомендаций; вы всё равно можете выбирать, что использовать для каждой части стека.

Модульность

Для больших проектов необходимо использовать модульную систему сборки для лучшей организации кода. Рекомендуемый подход — написание исходного кода в CommonJS или ES6 модулях и их объединение с помощью Webpack или Browserify.

Однако Webpack и Browserify — это больше, чем просто сборщики модулей. Они оба предоставляют API преобразования исходного кода, позволяющие преобразовывать исходный код с помощью других предварительных процессоров. Например, вы можете написать свой код с использованием синтаксиса ES2015/2016 будущего с помощью babel-loader или babelify.

Если вы раньше не использовали их, настоятельно рекомендуем пройти несколько учебных пособий, чтобы ознакомиться с концепцией сборщиков модулей и начать писать JavaScript с использованием последних функций ECMAScript.

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

В типичном проекте Vue.js мы будем разделять наш интерфейс на множество небольших компонентов, и было бы неплохо, чтобы каждый компонент содержал свои стили CSS, шаблон и определение JavaScript в одном месте. Как упоминалось выше, при использовании Webpack или Browserify с правильными преобразованиями исходного кода мы можем написать наши компоненты таким образом:

Если вы используете предварительные процессоры, вы можете сделать это даже так:

Вы можете создавать эти компоненты Vue в одном файле с помощью Webpack + vue-loader или Browserify + vueify. Вы также можете поэкспериментировать с этим онлайн на Webpackbin.com!

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

Самый быстрый способ начать работу с предварительно настроенной настройкой сборки — использовать официальный vue-cli. Вы также можете найти официальные шаблоны сборки на GitHub:

• Webpack + vue-loader
• Browserify + vueify

Маршрутизация

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

Если вам нужна только простая логика маршрутизации, вы также можете реализовать её, вручную прослушивая hashchange и используя динамический компонент:

Пример:

<div id="app">
  <component :is="currentView"></component>
</div>

Vue.component('home', { /* ... */ })
Vue.component('page1', { /* ... */ })
var app = new Vue({
  el: '#app',
  data: {
    currentView: 'home'
  }
})
// Switching pages in your route handler:
app.currentView = 'page1'

С помощью этой механики также очень легко использовать внешние библиотеки маршрутизации, такие как Page.js или Director.

Взаимодействие с сервером

Все экземпляры Vue могут иметь свои необработанные $data напрямую сериализованы с помощью JSON.stringify() без дополнительных усилий. Сообщество внесло вклад в плагин vue-resource, который предоставляет простой способ работы с RESTful API. Вы также можете использовать любую библиотеку Ajax, например, $.ajax или SuperAgent. Vue.js также хорошо работает с бессерверными сервисами, такими как Firebase, Parse и Hoodie.

Управление состоянием

В больших приложениях управление состоянием часто становится сложным из-за множества фрагментов состояния, разбросанных по многим компонентам, и взаимодействий между ними. Часто упускается из виду, что источником истины в приложениях Vue.js является сырой объект данных — экземпляр Vue просто делегирует доступ к нему. Поэтому, если у вас есть фрагмент состояния, который должен быть общим для нескольких экземпляров, следует избегать его дублирования. Вместо этого используйте его по идентичности:

var sourceOfTruth = {}

var vmA = new Vue({
  data: sourceOfTruth
})

var vmB = new Vue({
  data: sourceOfTruth
})

Теперь, когда sourceOfTruth изменяется, оба vmA и vmB автоматически обновят свои представления. Расширяя эту идею, мы получим шаблон **хранилища**:

var store = {
  state: {
    message: 'Hello!'
  },
  actionA: function () {
    this.state.message = 'action A triggered'
  },
  actionB: function () {
    this.state.message = 'action B triggered'
  }
}

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

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

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

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

Архитектура Flux обычно используется в приложениях React, но её можно применять и в приложениях Vue.js. Например, Vuex — это вдохновленная Flux архитектура приложений, специально разработанная для управления состоянием в больших приложениях Vue.js. Redux, самая популярная реализация Flux для React, не зависит от слоя представления и также может легко работать с Vue с помощью некоторых простых связей.

Модульное тестирование

Всё, что совместимо с модульной системой сборки, работает. Рекомендуется использовать тестовый запуск Karma. Он имеет множество плагинов сообщества, включая поддержку Webpack и Browserify. Для подробной настройки см. соответствующую документацию каждого проекта.

Что касается структуры кода для тестирования, лучшим практикой является экспорт необработанных параметров/функций в модули ваших компонентов. Рассмотрим этот пример:

// my-component.js
module.exports = {
  template: '<span>{{msg}}</span>',
  data: function () {
    return {
      msg: 'hello!'
    }
  },
  created: function () {
    console.log('my-component created!')
  }
}

Вы можете использовать этот файл в модуле входа так:

// main.js
var Vue = require('vue')
var app = new Vue({
  el: '#app',
  data: { /* ... */ },
  components: {
    'my-component': require('./my-component')
  }
})

И вы можете протестировать этот модуль так:

// Some Jasmine 2.0 tests
describe('my-component', function () {
  // require source module
  var myComponent = require('../src/my-component')
  it('should have a created hook', function () {
    expect(typeof myComponent.created).toBe('function')
  })
  it('should set correct default data', function () {
    expect(typeof myComponent.data).toBe('function')
    var defaultData = myComponent.data()
    expect(defaultData.msg).toBe('hello!')
  })
})

Существуют примеры конфигураций Karma как для Webpack, так и для Browserify.

Поскольку директивы Vue.js выполняют обновления асинхронно, при проверке состояния DOM после изменения данных вам необходимо сделать это в Vue.nextTick обратном вызове.

Развёртывание для производства

Минифицированный автономный выпуск Vue.js уже удалил все предупреждения для уменьшения размера файла, но при использовании инструментов, таких как Browserify или Webpack для сборки приложений Vue.js, вам потребуется дополнительная настройка для достижения этого.

Webpack

Используйте плагин DefinePlugin Webpack для указания среды производства, чтобы блоки предупреждений автоматически удалялись UglifyJS во время минификации. Пример конфигурации:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

Browserify

Просто выполните команду сборки с NODE_ENV установленной на "production". Vue автоматически применяет преобразование envify к себе и делает блоки предупреждений недоступными. Например:

NODE_ENV=production browserify -e main.js | uglifyjs -c -m > build.js

Пример приложения

Клон HackerNews на Vue.js — это пример приложения, использующего Webpack + vue-loader для организации кода, vue-router для маршрутизации и официальный API Firebase HackerNews в качестве бэкенда. Это не большое приложение, но оно демонстрирует совместное использование концепций, обсуждаемых на этой странице.