Прежде всего, эта статья не предназначена ни для очередной статьи, сравнивающей Vue.js с Angular, ни для сравнения Vue.js и React.

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

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

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

Фон

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

Если углубиться в техническую часть, старый стек использует Angular (1.5.x) на стороне интерфейса. В бэкэнде сервер Node.js (в частности, Express.js) служит API для внешнего интерфейса, в то время как модель данных и некоторые функции электронной коммерции предоставляются commercetools

Если вы не слышали о commercetools, это облачная платформа Commerce as a Service, которая предоставляет API с несколькими конечными точками и действиями для основных сущностей платформы электронной коммерции (продукты, тележки, клиенты, заказы, скидки и т. Д.) .

Благодаря этому вы можете централизовать ядро ​​вашего бизнеса в коммерческих инструментах, а ваши приложения (например, приложение iOS, приложение Node.js и т. Д.) Или FaaS (функция AWS Lambda, функция Google Cloud и т. Д.) - это просто клиенты. этого API, позволяя вам по-настоящему взаимодействовать с несколькими каналами.

Почему не Angular 2 или React?

И вы можете спросить: почему вы выбрали Vue.js вместо Angular 2 или React? и мой ответ: почему бы и нет? Что ж, это обе фантастические технологии, но для нашего конкретного случая:

Мы не выбрали Angular 2, потому что нам не требовался полноценный фреймворк для наших нужд. Мы предпочли начать с небольшой базовой библиотеки и подключать другие библиотеки в соответствии с нашими потребностями (то есть, когда мы начали переход на Vue.js, мы думали, что нет необходимости использовать библиотеку управления состоянием, но в то время мы разработали несколько представлений с несколькими компонентами, связанными друг с другом, мы поняли, что нам нужно включить один, и поэтому мы легко включили Vuex, официальную библиотеку управления состоянием, вдохновленную Flux и Redux).

Таким образом, мы могли выбрать React, который в настоящее время является беспроигрышным вариантом, как вы знаете: Никого не увольняли за то, что он выбрал IBM.

Шаблоны Vue.js очень похожи на HTML, но с добавлением Vue.js magic, поэтому не только разработчики, но и те, кто знаком с HTML, например дизайнеры, могут понять код шаблона.

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

Наконец, что подтолкнуло нас к Vue.js, так это большое количество разработчиков, пришедших из Angular, заявивших, что кривая обучения незначительна и плавна (я могу подтвердить этот момент).

Для тех, кто знаком с Angular, просто пример: директивам ng-if, ng-show, ng-repeat соответствуют соответствующие v-if, v-show, v-for. в Vue.js. Синтаксис интерполяции и фильтра абсолютно одинаков: двойные фигурные скобки «{{}}» и вертикальная черта «|» соответственно.

Поэтому мы решили двигаться дальше. В конце концов, у Vue.js очень хорошие отзывы и большой импульс в сообществе разработчиков (более 64 тысяч звезд в Github), так что никто не может ошибаться;).

Цель

Идея миграции заключалась в том, чтобы переработать интерфейс на Vue.js с помощью Webpack, ES6 и т. Д.… При сохранении того же внутреннего интерфейса. Мы воспользовались миграцией и обновили версию Node.js и библиотек.

Мы также добавили больше модульного тестирования в наш бэкэнд в тех частях, где, по нашему мнению, не было слишком много тестового покрытия ... пока не вините нас, у нас были тесты, но мы хотели большего !.

И, наконец, мы изменили пользовательский интерфейс на более привлекательный, основанный на AdminLTE ( Поздравляю, ребята с проектом! Он великолепен).

Процесс

Итак, как только мы получили одобрение от нашего клиента, мы начали миграцию с небольшой командой, не имеющей реального опыта работы с Vue.js (в то время я начал личный проект на Vue.js, но большинство из нас имели солидный опыт работы с Angular. ).

Мы потратили несколько дней на изучение официального руководства и руководств. Я хочу отметить одну вещь: насколько хороша документация официальных библиотек (Vue.js, Vuex, Vue-Router…).

Документация ясна, проста для понимания и содержит основные концепции.

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

После прочтения руководства у вас будет достаточно уверенности, чтобы начать разработку чего-то более сложного.

Как это было?

Всего одно предложение: просто и легко.

У нас никогда не было ощущения, что технология блокирует нас, и мы могли сосредоточиться на самой функциональности (я помню, что у меня было это чувство давным-давно, когда я много лет разрабатывал на Java и начал проект на Ruby. - извините, у меня было чтобы сказать, что даже при том, что Java долгое время была моим хлебом с маслом).

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

Сколько раз вы как разработчик задавались вопросом: почему это не работает? почему он не работает? вы заметили, что это хорошо продуманная библиотека.

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

  • Компоненты, которые вы можете разработать один раз и повторно использовать в своем приложении. Если вам просто нужно определенное поведение или пользовательский интерфейс для компонента, вы можете просто изменить реквизиты (для людей, которые не знакомы, они похожи на параметры, которые вы можете передавать компонентам). Это означает, что на заключительных этапах вашего проекта ваша скорость разработки увеличивается, потому что вы можете повторно использовать компоненты, которые у вас уже есть.
  • Компоненты, которые вы можете протестировать. Я большой поклонник TDD (разработка через тестирование), поэтому могу думать о компоненте как о единице, которую я могу тестировать изолированно, и с легкостью могу включить тестирование в свой процесс разработки.
  • Компоненты, область действия которых известна и автономна. Состояние каждого компонента в определенный момент легко отслеживать. Сложнее встретить неожиданное поведение внутри компонентов, потому что внешний компонент может изменять состояние компонента только через свойства или события.

Резюме

После двух месяцев разработки мы достигли 90% миграции с фантастическими результатами.

Разработчики довольны и чувствуют себя комфортно с технологией.

Разработчики, пришедшие из Angular или React, могут рассчитывать, что они хорошо разбираются в этом через несколько дней.

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

По сути, они хотят, чтобы Vue.js был интерфейсной технологией для всех их проектов.

Если вы думаете о переходе с Angular на новую интерфейсную технологию или просто о запуске нового проекта, попробуйте Vue.js, вы не пожалеете.

Нам понравился Angular, нам нравится Vue.js

В Devgurus мы всегда инвестируем в технологии и предлагаем нашим клиентам самые инновационные технологии. Если вам интересно узнать больше историй успеха, не стесняйтесь обращаться к нам: [email protected]