Как определить, является ли Vue.js подходящей основой для вашего следующего проекта

Тем не менее, мы любим Vue.js и рекомендуем его нашим клиентам в большинстве случаев. Это потому, что Vue отлично подходит по ряду причин. Давайте рассмотрим их.

Когда ваше приложение полно анимаций и интерактивных элементов

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

В выпуске Vue 2.0 появилась большая гибкость в отношении переходов. Теперь у нас есть более детальный доступ к перехватчикам переходов, что, в свою очередь, позволяет использовать сторонние библиотеки и выполнять сложные анимации, все еще используя Vue в ядре. Это означает, что в Vue существует множество способов создания анимации. Все, что вам нужно сделать, это применить пользовательский атрибут и добавить немного магии CSS. Vue предоставляет нам компоненты <transition><transition-group> Он также легко интегрируется с элементами, отличными от HTML, например, SVG.

В нашем портфолио есть действительно отличный пример проекта с множеством различных переходов, где мы использовали Vue.js в тандеме с Nuxt . Нам удалось создать красивый пользовательский интерфейс для Easyship, который был на 37% более производительным, чем их версия AngularJS. Невероятные возможности Vue с точки зрения переходов также делают его хорошим выбором для сайтов маркетинговой кампании. Еще один прекрасный пример Airbnb — «Пока мы все не станем» — отмеченная наградами кампания, которая была проведена за шесть недель и полностью написана с помощью Vue.js.

Когда вам нужна бесшовная интеграция с несколькими приложениями

Легкость интеграции была подчеркнута в качестве ключевого преимущества Vue 81% разработчиков, опрошенных для State of Vue.js 2017. Vue отлично подойдет для создания как SPA (одностраничных приложений), так и интеграции с существующими серверными (многопользовательскими). страница) приложения. Vue может быть легко «вставлен» на страницы, отображаемые на сервере — например, такими фреймворками, как Rails, Laravel или Express — чтобы добавить некоторый уровень интерактивности. Хотите быстро проверить клиентскую форму? Нет проблем! Динамически загружаемый контент? Не может быть проще! И список продолжается …

В дополнение к возможности создания полноценных одностраничных приложений с нуля, благодаря интеграции с веб-пакетами, Vue также предлагает множество современных функций, таких как пакетирование, разбиение кода или встряхивание деревьев. И было много случаев, когда мы использовали Vue только для того, чтобы добавить немного интерактивности поверх существующих страниц — и это так же эффективно. Все, что нам нужно сделать, это загрузить его в <script>Vue({ el: "#app" }) Это наша основа. Затем мы можем добавить шаблоны HTML, вставить наши данные и визуализировать компоненты.

Когда вы хотите создать прототип без продвинутых навыков

Отличительной особенностью Vue является то, что компоненты могут быть написаны на чистом HTML, CSS и JavaScript. Это позволяет довольно легко начать с. На противоположной стороне у нас есть React, где HTML-структуры выражаются с помощью JSX (который также поддерживается Vue). Шаблоны HTML — это более простая альтернатива, которая кажется более естественной для чтения и построения кода.

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

Приложения Vue не требуют особых усилий для настройки. Интерфейс командной строки Vue ( интерфейс командной строки) позволяет без труда создать готовую к работе настройку приложения. Не большой поклонник командной строки? Нет проблем! Vue предлагает изумительный графический пользовательский интерфейс поверх своего CLI, который называется Vue UI . Всего за несколько щелчков мыши вы можете настроить свое приложение, настроить его для использования самых популярных функций (таких как Vuex, Vue Router или TypeScript) и многое другое. В дополнение к гибкости начальной настройки приложения, существует все больше плагинов, позволяющих вам легко интегрировать популярные библиотеки в ваше приложение.

Правильное отражение изменений данных в ваших представлениях может быть сложной и непростой задачей. К счастью, Vue приходит на помощь благодаря встроенной системе реактивности, которой, к сожалению, не хватает в React (несмотря на название!). Система может быть очень полезна в небольших приложениях, где состояние относительно простое и более сложные решения по управлению состоянием не обязательно требуются. Таким образом, мы можем легко отслеживать любые изменения в данных, предоставленных через пользовательский ввод.

Когда вы хотите быстро отправить свой MVP

Простота шаблонов Vue означает также невероятно высокую скорость кодирования — особенно по сравнению с Angular — как с точки зрения API, так и дизайна. Настройка среды проекта может занять всего один день с Vue. Это не совсем верно для Angular, который был создан в основном для крупных приложений.

С Vue вам не нужно изобретать велосипед каждый раз; Вы можете повторно использовать существующие компоненты для ускорения разработки. По словам Жиля Берто из Livestorm (который решил использовать Vue для всех своих интерфейсных компонентов и поставил свой первый MVP за месяц):

Нам не пришлось тратить месяц на настройку, как с React. Вью заставил нас работать через неделю. Мы никогда не были бы в той точке, в которой мы находимся сейчас, если бы не Vue. Я на 100% уверен в этом.

Другие вещи, которые делают Vue взрыв

Я бы сказал, что описанные выше случаи не представляют никакой сложности, и мы всегда рекомендуем Vue.js, когда клиент обращается к нам с чем-то похожим. Но это не обязательно означает, что Vue будет работать только в тех случаях (которые, тем не менее, охватывают большинство проектов, с которыми мы сталкиваемся).

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

Последнее, что я хочу упомянуть, это люди, которые составляют невероятное сообщество Vue. Благодаря им, стек Vue намного более последовательн и хорошо курирован. На GitHub есть только одна организация, и многие из библиотек Vue, включая Vuex, Vue-Router или Vuepress, созданы теми же людьми, которые составляют основную команду Vue. У них одна цель: сделать лучшую платформу, которую было бы приятно использовать. Однако в случае с React история несколько иная, поскольку интересы Facebook и сообщества не всегда совпадают.

Так где же улов?

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

Другое дело, поддержка Typescript. Хотя многое уже сделано для улучшения опыта, впереди еще много работы. Изменения также будут в Vue 3.0 :

Кроме того, API разработан с учетом вывода типа TypeScript. Кодовая база 3.x сама будет написана на TypeScript и обеспечит улучшенную поддержку TypeScript. (Тем не менее, использование TypeScript в приложении все еще не является обязательным.)

Наконец, многие компании выбирают React вместо Vue из-за меньшего числа доступных программистов Vue.js (Западная Европа и США). Для разработчиков React существует гораздо больше предложений о работе и, естественно, на рынке появляется больше разработчиков React. Компании могут захотеть уменьшить потенциальные проблемы с наймом, выбрав более популярную библиотеку для своего интерфейса. С другой стороны, кривая обучения Vue действительно плавная, и любой разработчик с опытом работы с JavaScript может быстро подключиться к проекту на основе Vue. Мы видели, как юниоры, не имеющие опыта Vue, стали продуктивными за считанные часы. Поэтому я считаю, что это не должно нарушать договоренности для любого бизнеса.

Вывод

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

• Как мы делаем Vue: год спустя GitLab

• Рассмотрите VueJS для вашего следующего веб-проекта от Codeship

• Почему мы перешли с Angular 2 на Vue.js (и почему мы не выбрали React) от Rever

• Vue.js: хорошо, ме, и уродливый ASC Мексика

• Больше примеров из Adobe, Behance, Livestorm и других в State of Vue.js от Monterail

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