Как определить, является ли Vue.js подходящим фреймворком для вашего следующего проекта
Vue.js вырос из частного проекта одного человек во всем известный JavaScript фреймворк. Даже если вы не работаете с ним вы так или иначе слышали о нем от своих коллег по работе или во время конференций или в новостях из мира веб разработки. И вы, вероятно, читали какие нибудь обзоры сравнения между Vue, React и Angular. И возможно даже заметили, что Vue опережает React с точки зрения звезд GitHub.
Все это так или иначе заставляет задуматься, является ли Vue.js подходящей фреймворком для следующего проекта? Что ж, давайте рассмотрим возможности и ограничения Vue, чтобы дать вам общий взгляд на фреймворк и немного облегчить ваш выбор.
Обзор Vue.js
Первая публичная версия Vue.js была выпущена в 2014 году. Его шаблонный синтаксис – был создан очень похожим на AngularJS – а архитектура на основе компонентов – была аналогичной тому, что предлагал React – что сразу позволило сделать его известным среди разработчиков JS в то время. Но Vue.js действительно стал популярным только через год, когда он был обнаружен сообществом Laravel (популярный PHP-фреймворк).
Несколько лет спустя, согласно данным State of JS, он получил самый высокий рейтинг удовлетворенности среди всех JS фреймворков (91,2%). Все больше разработчиков сообщают о том, что слышали о нем и хотят использовать его в будущем. Такие компании, как IBM, GitLab и Adobe, так же стали использовать Vue в своих продуктах.
Согласно Evan You, создателя Vue:
Первоначальной моей целью было только «утолить жажду», то есть создать такую фронтенд библиотеку, которая бы мне нравилась.
И, видимо, ему и всему Сообществу удалось выполнить эту миссию. Но что такого особенного в Vue, что заставляет программистов использовать его?
Вот что говорит официальный сайт проекта:
Vue (произноситься /vjuː/, как view) прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других популярных фреймворков, Vue был спроектирован с нуля, без необходимости сохранения совместимости со старыми версиями. Основная библиотека ориентирована только на слой представления (view). Ее легко освоить и начать использовать совместно с другими библиотеками или интегрировать в существующие проекты.
Вот оно! Прогрессивная, легко изучаемая и легко интегрируемая. Но достаточно ли этого, чтобы выбрать именно его?
Перспектива бизнеса с Vue
В Monterail мы считаем, что для бизнеса выбор фреймворка не должно иметь существенного значения. Создание быстрых, красивых и легко обслуживаемых продуктов не самая простая задача, но если что-то возможно сделать в одном фреймворке, то это возможно и в любым другом современным фреймворке.
Тем не менее, мы любим Vue.js и рекомендуем его нашим клиентам в большинстве случаев. Это потому, что Vue отлично подходит по ряду причин. Давайте рассмотрим их.
Когда в вашем приложение много анимаций и интерактивных элементов
Vue предлагает действительно элегантный и гибкий API – не только для базовой архитектуры приложения, но и для плавных переходов между представлениями. Переходы и анимация улучшают пользовательский опыт UX, сглаживая изменения между состояниями. Человеческий мозг любит движение, поэтому это важная часть современных веб-сайтов и приложений. Анимация является ключевым моментом, когда нам нужно привлечь внимание пользователя, когда мы хотим удержать пользователя на нашем веб-сайте на более длительный период или просто сделать наш продукт более увлекательным.
В версии Vue 2.0 появилась большая гибкость в отношении переходов (transitions). Теперь у нас есть более глубокий доступ к перехватчикам переходов (transition hooks), что, в свою очередь, позволяет использовать сторонние библиотеки и выполнять сложные анимации, и при этом все еще используя Vue в ядре. Это означает, что во Vue существует множество способов создания анимации. Все, что вам нужно сделать, это использовать пользовательский атрибут (custom attr) и добавить немного магии CSS. Vue предоставляет нам компоненты <transition> и <transition-group> , уже встроенные и основанные на CSS-анимации, что позволяет использовать как CSS, так и JS-хуки. Они также легко интегрируется с non-HTML элементами, например, SVG.
В нашем портфолио есть действительно замечательный пример проекта с множеством различных переходов, где мы использовали Vue.js в тандеме с Nuxt. Нам удалось создать красивый пользовательский интерфейс для Easyship, который стал на 37% более производительным, чем такая же версия AngularJS. Невероятные возможности Vue с точки зрения переходов также делают его хорошим выбором для сайтов маркетинговой кампании. Еще один прекрасный пример Airbnb – “Until we all belong” – отмеченная наградами кампания, которая была проведена за шесть недель и полностью написана с помощью Vue.js.
Когда нужна интеграция с несколькими приложениями
Легкость интеграции была подчеркнута в качестве ключевого преимущества Vue 81% разработчиков, опрошенных для State of Vue.js 2017. Vue отлично подойдет для построения как SPA (одностраничных приложений), так и интеграции с существующими многостраничными приложения. Vue может быть легко «вставлен» на страницу, генерируемую на сервере – например, такими фреймворками, как Rails, Laravel или Express – чтобы добавить некоторый уровень интерактивности. Хотите быстро проверить клиентскую форму? Нет проблем! Динамически загружаемый контент? Не ничего проще! И этот список можно продолжать бесконечно …
В дополнение к возможности создания полноценных одностраничных приложений с нуля, благодаря интеграции с веб-пакетами, Vue также предлагает множество современных функций, таких как пакетирование (bundling), разбиение кода (code-splitting) или tree-shaking. Мы много раз использовали Vue только для того, чтобы добавить немного интерактивности на уже давно существующую страницу. Все, что нам нужно сделать, это загрузить его в тег <script> и добавить Vue({el: "#app" }) в JS файл. Затем мы можем добавить нужные нам HTML теги, вставить наши данные и визуализировать компоненты.
Когда вам нужно быстро сделать прототип какой либо идеи
Отличительной особенностью Vue является то, что компоненты могут быть написаны на чистом HTML, CSS и JavaScript. Это позволяет довольно легко начать работать с ним. С другой стороны у нас есть React, где HTML-структуры создаются с помощью JSX (что также поддерживается Vue). Мы считаем шаблоны HTML – более простая альтернатива, которая кажется более естественной для чтения и создания кода.
Такой подход позволяет менее опытным разработчикам или даже дизайнерам писать код и создавать некоторые рабочие прототипы. Понятная и подробная документация Vue также делает его очень дружелюбным для начинающих или менее опытных разработчиков.
Vue не требуют особых усилий что бы для начать проект с нуля. Интерфейс командной строки Vue CLI позволяет без труда создать готовое к работе приложение. Не большой поклонник командной строки? Нет проблем! Vue предлагает изумительный графический пользовательский интерфейс поверх интерфейса командной строки, который называется Vue UI. Всего за несколько щелчков мыши вы можете настроить свое приложение, настроить его на использование самых популярных дополнений (таких как Vuex, Vue Router или TypeScript) и многое другое. В дополнение к гибкости начальной настройки приложения, существует больше количество плагинов, позволяющих вам легко интегрировать популярные библиотеки в ваше приложение.
Правильное отображение изменений данных в представлениях может быть сложной и непростой задачей. К счастью, у Vue есть встроенная система реактивности – чего в React, к сожалению, не хватает (несмотря на название!). Таким образом, мы можем легко отслеживать любые изменения в данных, изменяемых через пользовательский ввод.
Когда вы хотите быстро создать свой MVP
Простота шаблонов Vue означает также невероятно высокую скорость кодирования – особенно по сравнению с Angular – как с точки зрения API, так и дизайна. Настройка среды проекта может занять всего один день с Vue. В отличие от Angular, который был создан в основном для крупных приложений.
С Vue вам не нужно изобретать велосипед каждый раз; Вы можете повторно использовать существующие компоненты для ускорения разработки. По словам Жиля Берто из Livestorm (который решил использовать Vue для всех своих фронтенд компонентов и создал свой первый MVP за месяц):
Другие вещи, которые делают Vue популярным
Одним из ключевых достоинств Vue является его прогрессивность. Это означает, что вы можете постепенно переходить к фреймворку, добавляя элементы там, где это необходимо. Это сделает масштабирование вашего приложения намного плавнее, позволяя вам оставаться гибкими с точки зрения функций, настройки команды и инструментов.
Последнее, что я хочу упомянуть, это люди, которые составляют невероятное сообщество Vue. Благодаря им, стек Vue намного более последовательный и хорошо контролируемый. На GitHub есть только официальный источник ядра Vue, и множества основных библиотек Vue, таких как Vuex, Vue-Router или Vuepress. Которые созданы теми же людьми, которые составляют основную команду Vue. У них одна цель: сделать лучшую платформу, которую было бы приятно использовать. Однако в случае с React история несколько иная, поскольку интересы Facebook и сообщества не всегда совпадают.
А какие есть недостатки?
Как и всех вещей, у Vue есть то что мы можем считать недостатками. С одной стороны, это его гибкость: в то время как некоторые разработчики пользуются свободой, которую предоставляет Vue, другие предпочитают иметь только один правильный способ создания новых компонентов.
Поддержка Typescript. Хотя многое уже было сделано для улучшения интеграции с Typescript, впереди еще много работы. Улучшение интеграции также появятся в Vue 3.0:
Кроме того, API разработано с учетом поддержки типов TypeScript. Сам код 3.x будет написан на TypeScript и обеспечит улучшенную поддержку TypeScript. (Тем не менее, использование TypeScript в приложении будет все еще не обязательным.)
Наконец, многие компании выбирают React вместо Vue из-за меньшего числа доступных программистов Vue.js (Западная Европа и США). Для разработчиков React существует гораздо больше предложений о работе и, естественно, на рынке появляется больше разработчиков React. Компании могут захотеть уменьшить потенциальные проблемы с наймом, выбрав более популярную библиотеку для своего приложения. С другой стороны, кривая обучения Vue плавно возрастает вверх, и любой разработчик с опытом работы в JavaScript может быстро подключиться к проекту на основе Vue.
Заключание
Существует множество тематических исследований от компаний разных форм и размеров, и я уверен, что это число будет расти в ближайшие месяцы. Если вы хотите увидеть некоторые примеры использования Vue.js в реальных бизнес-кейсах, вот список моих любимых:
- How we do Vue: one year later by GitLab
- Consider VueJS for Your Next Web Project by Codeship
- Why we moved from Angular 2 to Vue.js (and why we didn’t choose React) by Rever
- Vue.js: the good, the meh, and the ugly by ASC Mexico
- More case studies from Adobe, Behance, Livestorm, and more in State of Vue.jsby Monterail
Я надеюсь, что эта статья послужит хорошим объяснением того, почему и когда Vue является хорошим выбором для нового проекта. Очевидно, есть и другие замечательные библиотеки, которые хорошо подойдут для вашего продукта. Просто помните, что не важно, насколько популярна технология, единственный способ принять действительно обоснованное решение, это проведение собственного исследования.
