Первоначально опубликовано здесь. Проверьте это!

Знаю, знаю. Эта статья может выглядеть как еще одно сравнение Vue.js и [вставьте фреймворк здесь]. Если и есть что-то, что любят разработчики переднего плана, помимо написания JavaScript-фреймворков, так это написание статей, сравнивающих JavaScript-фреймворки и защищающих мнения, лежащие в их основе. Есть и действительно хорошие, например, вот этот или вот этот. (Кстати, если вы не занимаетесь веб-разработкой или запускаете веб-приложение и до сих пор не знаете, что такое Vue, сначала прочтите это).

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

Но сначала, прежде чем даже думать о рефакторинге, совет мудрости: перед вашим приложением должна стоять надлежащая автоматизированная среда сквозного (E2E) тестирования, по крайней мере, для критических путей. Никакой рефакторинг не может быть выполнен должным образом без уверенности, что ваше приложение будет работать так же, как и после переключения. Вы предупреждены.

Итак, вот пять причин перейти на Vue.js в ваших текущих продуктах:

1. Стоимость входа очень низкая

Файл шаблона Vue напоминает стандартный html-файл. Он состоит из трех основных тегов и содержания: стиль, шаблон и скрипт. Это может показаться не таким уж большим, но если вы веб-разработчик и до сих пор помните время, когда вы написали свою первую HTML-страницу или впервые применили стили или закодировали какое-то взаимодействие, я уверен, что это чувство такое же, как и у вас. чувствует новичок при написании своего первого файла Vue. Как новичок, вам не нужно беспокоиться о JSX, декораторах или реактивности, чтобы быть продуктивным. Но когда вы обретете уверенность и приобретете опыт работы с Vue, вы обнаружите, что все шаблоны и концепции из других фреймворков также можно применять: вы не привязаны к какому-то одному шаблону и можете выбирать те, которые найдете вы и ваша команда. как правильные. Вы получите те же преимущества (в некоторых случаях больше, чем в других) с точки зрения производительности, гибкости и поддержки, как и в любой другой среде.

Кроме того, Vue очень легкий. Даже легче, чем jQuery¹! Таким образом, добавление сценария поверх других ваших зависимостей является допустимым накладным расходом, учитывая, что в конечном итоге вы удалите другие.

2. Нанять двух разработчиков по цене одного

Будем честны. Обучение реактивному программированию Angular и концепциям внедрения зависимостей опытного разработчика React или обучение компонентам высшего порядка и композиции функций разработчику Angular — это накладные расходы, которые никто не любит иметь в продукте в срок. У людей может быть свое мнение, и может быть трудно убедить их пойти тем или иным путем. И даже если вы сможете привести всю свою команду в соответствие с одной парадигмой, есть шанс, что новый сотрудник будет открывать эту банку с червями снова и снова. Учитывая, что Vue имеет несколько шаблонов, вдохновленных предшествующими ему фреймворками, я вижу Vue как золотую середину, в которой сходятся все разработчики Front End с разным опытом. Даже разработчики, у которых нет опыта работы с фреймворками!

Также стоит упомянуть потрясающую документацию, которую собрала команда Vue и сообщество. Руководства по началу работы просты для понимания, а основные концепции подробно объясняются. Таким образом, вы можете чувствовать облегчение при поиске новых сотрудников с опытом работы в React или Angular; Я уверен, что они смогут подобрать Vue в кратчайшие сроки.

3. Начинайте с листьев, а не с корня

Крупные организации испытывают большие трудности при определении общего визуального языка для своих продуктов. Как правило, разные команды запускают свои продукты параллельно. С большими благими намерениями несколько команд разработчиков изо всех сил стараются писать многоразовые виджеты с целью их распространения по всей компании. Проблема в том, что некоторые продукты могли быть запущены в Angular, а другие — в Ember и React. Возможно, эти продукты не были запущены одновременно, и их версии заблокированы по какой-либо причине соответствия требованиям. Таким образом, библиотека виджетов, написанная в Ember 1.18, плохо работает с контейнерным приложением Angular 2. И в итоге у компании четыре реализации одного и того же карусельного виджета. Много переделок, не так ли?

Ну, Vue вас прикрыл. Учитывая небольшой размер файла библиотеки, легко просто добавить зависимость и отобразить виджет. API Vue отлично сочетается с другими библиотеками, и, в зависимости от уровня сложности вашей реализации, вы даже можете поставлять веб-компоненты, соответствующие спецификации W3C, включая саму библиотеку Vue, в крошечной упакованной зависимости. Больше никаких поисков вложенных ng-приложений в StackOverflow. Vue хорошо работает даже с разными версиями самого себя!

Когда вы закончите создание компонентов и виджетов и соберете целые страницы из своей библиотеки виджетов Vue, Vue также может помочь вам провести рефакторинг некоторых из наиболее важных областей с помощью пакетов, которые официально поддерживаются теми же мейнтейнерами Vue: vue -router, vuex (для управления состоянием), vue-cli (для скаффолдинга) или Vue SSR (для рендеринга). Более того, если вы хотите инвестировать в рендеринг на стороне сервера с помощью Node.js, есть такие библиотеки, как Nuxt, которые, хотя официально не поддерживаются командой Vue, имеют такие же первоклассные стандарты документации.

4. Разработано разработчиками для разработчиков

Показателем хорошего самочувствия в проектах с открытым исходным кодом является «рейтинг звезд GitHub». Это не сравнимо с метрикой использования в продакшене, но говорит о влиянии и поддержке сообщества. Многие сторонники Vue обычно выступают против Vue по многим стилистическим причинам, и это более самоуверенные (обычно старшие) разработчики. Но тот факт, что Vue в какой-то момент превзошел React по количеству звезд на GitHub, является хорошим показателем принятия среди разработчиков среднего и старшего уровня. В Zemoga у нас есть несколько «евангелистов» Vue, и даже когда мы считаем себя технологичными агностиками, для наших внутренних проектов мы всегда предпочитаем Vue, и опыт разработчиков не может быть более плавным.

Vue — единственный крупный фреймворк, не поддерживаемый каким-либо крупным технологическим гигантом (Angular поддерживается Google, а React — Facebook). Исторически это был аргумент против принятия Vue, но я на самом деле считаю этот факт его реальной силой. В то время как другие фреймворки начинались с решения внутренних требований к продукту, а затем были выпущены с открытым исходным кодом, Vue начинал с решения задач разработчиков в фреймворках, доступных в то время. Таким образом, эта сосредоточенность на разработчике делает Vue действительно приятным, и я твердо верю, что счастливый разработчик — продуктивный.

5. Создан на века

Поскольку изменения в вечнозеленых браузерах, движках JavaScript, спецификациях ECMAScript, фреймворках и инструментах происходят одновременно, очень сложно сохранить обратную совместимость и получить преимущества новых функций без ущерба для производительности и целостности API. Классический пример — переход от Angular 1.x к Angular 2. Но после этого эпизода все изменилось, и основные JavaScript-фреймворки усвоили урок. И Vue очень серьезно относится к совместимости. Согласно дорожной карте и планам для Vue 3.0 и учитывая, что в них будут внесены критические изменения, большая часть базового API останется прежней или будет иметь сборку совместимости, а также другие пути обновления с предыдущих версий. Это обязательство показывает зрелость и стабильность фреймворка в будущем.

Итак, что вы скажете?

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

В Zemoga мы инвестируем в создание баланса между пользовательским опытом и технологиями. Мы принимаем принципы «атомарного дизайна и работаем над Разработкой, управляемой компонентами как передовой практикой. Vue — одна из таких технологий, которая помогает нам применять такие принципы эффективным, устойчивым и приятным способом. И хотя это не единственное — как я уже сказал, мы технологически независимы — мы уверены, что технологии, которые объединяют наши команды, заслуживают инвестиций. Мы готовы строить лучше вместе. Когда начнем?

[1]: Согласно их собственным домашним страницам, Vue легче, чем jQuery. Vue.js — это минифицированный файл размером 20 КБ + gzip, а jQuery — минифицированный файл размером 30 КБ + gzip.