Vue.js

Интерфейсы в современном вебе часто меняют состояние и обычных операций с DOM уже не хватает для удобной работы. Когда код превращается в кашу, а стейт в лапшу, на помощь приходят высокоуровневые библиотеки и ферймворки: Vue, React, Angular и пр.

Для начинающих лучше всего подойдет Vue, кривая вхождения в эту библиотеку самая пологая:

  • Простые вещи делаются просто. Не обязательно заводить сборку, можно просто подключить библиотеку в теге <script> и начать работать.
  • Vue — прогрессивный фреймворк: можно просто подключить вместо jQuery, а можно создать полноценный SPA со стором, роутингом и прочими штуками.
  • В компонентах можно использовать HTML, CSS и JS (хватает для большинства проектов, удобно новичкам), а можно добавить TypeScript, JSX, препроцессор и шаблонизатор (для больших, сложных проектов и профессиональных разработчиков).
  • Vue нормально впишется в уже работающий сайт, чтобы реализовать какую-то его динамическую часть.
  • Vue появилась позже Реакта и Ангуляра и использует некоторые основные принципы обоих. Разобравшись с Vue вам будет проще освоить все прочие популярные библиотеки и фреймворки.

Быстрый старт

Курсы

  • Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex). Доходчиво и постепенно автор знакомит со всеми особенностями работы Vue. Есть задания для практики, peer-to-peer code review.
  • Learn Vue 2 step-by-step от Laracasts — обзорный бесплатный курс, не такой глубокий, как предыдущий, но вполне хороший.

Nuxt, Server Side Rendering

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

После установки в директории /pages вы создаете свои .vue-компоненты, которые сразу становятся доступны по адресу http://website-name/component-name.

VuePress

Если нужно создать статический сайт, где основой будет текстовое наполнение (документацию, книгу, блог), то вместо Nuxt удобнее использовать VuePress. Он создан специально для работы с документацией Vue.

После установки вы просто создаете маркдаун-файлы и все сразу работает. Так же можно создавать и вставлять в текст Vue-компоненты.

Книги

Документация

Нативный мобильный интерфейс

Есть несколько вариантов использования Vue для реализации нативных мобильных интерфейсов:

  • NativeScript.
  • Ферймворк Weex, от Apache Foundation, поддерживает Alibaba.

Cordova/WebView

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

  • Onsen — набор интерфейсных компонентов для PWA и Cordova.
  • PWA — бойлерплейт для Progressive Web App.