Недавно мы решили перенести некоторые из наших существующих веб-приложений с AngularJS на Vue.js и установить Vue в качестве нового стандартного фреймворка для создания пользовательского интерфейса в Unbabel.
Поскольку полное переписывание существующего производственного приложения потребовало бы очень много времени и помешало бы продвижению приложения вперед, мы обнаружили, что почти всегда лучше вносить небольшие изменения и чаще выпускать выпуски. Единственное требование здесь - иметь четкое представление о том, где вы хотите быть, когда это будет сделано.
Сделав это, мы смогли постепенно перенести наши старые приложения Angular 1.2 на Vue.
Мы можем разбить процесс на следующие 3 этапа:
1 - Детские шаги
Первое приложение, которое мы решили перенести, является частью того, что мы называем The Core, монолита, объединяющего несколько сервисов в Unbabel - идеальный кандидат в приложение для того, что мы хотели сделать.
Что касается конфигурации, мы хотим, чтобы все было просто. К счастью, Vue приходит нам на помощь. В разделе Начало работы вы обнаружите, что можете начать работу, просто включив скрипт на свою страницу и начав писать компонент Vue.
Благодаря простоте использования, мы смогли создать первые компоненты без каких-либо дополнительных инструментов и продолжить предоставлять новые функции. Одной из первых вещей, которые мы разработали, была новая боковая панель для нашего приложения.
Когда этот новый набор компонентов был готов и интегрирован в страницу, пришло время подключить его к основному приложению.
Наша новая боковая панель получает информацию от основного приложения и отображает ее в определенном формате. Поскольку мы уже включаем jQuery на нашу страницу, один очень простой способ взаимодействия между Angular и Vue - это использование событий jQuery для передачи информации. Мы можем использовать .trigger() на стороне Angular, а затем поймать результат с помощью .on().
Когда код в main-application.js запускается, боковая панель перехватит событие, получит данные и вызовет внутренний метод handleUpdateSidebarData, который затем обновит состояние компонента.
Таким образом, мы можем легко общаться между двумя сторонами, используя существующие инструменты, и если нам нужно отправить данные с боковой панели в основное приложение, мы просто делаем наоборот.
Если вам нужно иметь компоненты Vue внутри нашего существующего приложения Angular, это также возможно.
Создайте точку монтирования для вашего компонента Vue, добавьте ее в желаемое место на целевом элементе DOM, затем создайте свой компонент и подключите его к ранее созданной точке монтирования.
Не забывайте вызывать $destroy() на ComponentVM, когда это больше не нужно, чтобы очистить его соединения с другими существующими виртуальными машинами, отвязать все его директивы и отключить все прослушиватели событий.
2 - Подготовка инструментов к масштабированию
Как разработчики, нам нравятся инструменты, которые облегчают нашу жизнь и позволяют нам быстрее и лучше выполнять свою работу. После перемещения шаблонов приложений и ресурсов в собственный проект настало время реализовать лучшие инструменты для разработки с помощью Vue.
Подобно тому, как React имеет create-response-app, Vue также имеет аналогичный набор инструментов, который предоставляет разработчикам Webpack, настроенный с горячей перезагрузкой, линтингом, извлечением css и vue-loader, что позволяет вам использовать потрясающий Single Файловые компоненты . Вы можете найти его здесь vuejs-templates / webpack.
Мы хотели иметь все эти замечательные инструменты, потому что они делают разработку с Vue намного лучше, поэтому мы загрузили шаблон и адаптировали файлы конфигурации к нашей собственной структуре проекта.
После того, как инструменты были правильно настроены, у нас была задача переместить компоненты, которые мы создали ранее, и переместить их в Однофайловые компоненты, это было довольно просто, нам просто нужно было объединить шаблон и компонент, который мы создали. раньше, в тот же файл.
Здесь у вас есть простой компонент Vue, шаблон которого объявлен в HTML.
При использовании он будет отображать <h1>Hello World!</h1>
А вот эквивалентный компонент, написанный с использованием Single File Components.
Весь код, связанный с этим компонентом, находится в одном файле, поэтому его намного проще поддерживать и понимать.
Взгляните на vuejs-templates / webpack, если вы хотите сразу начать использовать однофайловые компоненты.
Управление общими зависимостями
Если у вас есть зависимости, которые являются общими для Angular и Vue, например jQuery, вы должны добавить их в качестве требования вашего приложения Vue и открыть их в окне. Это позволит использовать jQuery в приложении Angular, как и раньше.
Если вы ссылаетесь на jQuery через переменную $, вам также нужно будет открыть ее в таком окне window.$ = jQuery
3 - Здоровый рост
Наличие тестов является важной частью любого веб-приложения, которое необходимо правильно масштабировать и поддерживать, поэтому они обязательно должны были быть у нас. Мы позаботились о том, чтобы наши новые компоненты были полностью протестированы с первого дня, и в конце концов, после нескольких тестов с разными фреймворками, мы решили, какой инструмент модульного тестирования использовать.
В настоящее время мы используем Jest by Facebook. Это очень эффективный инструмент с первой минуты его установки. В зависимости от конфигурации вашей разработки первое и единственное, что вам нужно, - это создать любой файл, соответствующий .test.js или .spec.js, написать несколько тестов и затем запустить Jest. Он автоматически найдет любые файлы, имя которых соответствует предыдущему шаблону, и сделает внутри любые утверждения. Взгляните на раздел начало работы, чтобы получить представление о том, как начать использовать Jest.
Jest также сообщает о покрытии кода, если вы запускаете его с --coverage в качестве опции. Вы можете использовать эту опцию, чтобы понять, какие части вашего кода вы не тестировали. Вам не нужно стремиться к 100-процентному покрытию кода, если у вас более 80%, вы уже неплохо справляетесь.
Поскольку вы читаете эту статью, вы, вероятно, уже используете Vue или планируете использовать Vue, поэтому вот несколько советов по Jest, которые могут быть полезны с учетом мотивации этой статьи.
Добавьте "test": "jest --coverage" в раздел scripts вашего package.json файла, затем запустите команду npm test, чтобы увидеть результаты. Напоминаем, что любые другие команды в разделе scripts можно выполнить с помощью следующей команды npm run :script-name:.
Вы можете настроить Jest, создав jest.config.js и поместив его в тот же каталог, что и ваш package.json файл.
Использование относительного импорта
Если вы импортируете файлы с использованием псевдонима @, например import Header from @/components/Header, вам нужно, чтобы в тестовых файлах Jest было такое же поведение и простота использования. Для этого вам необходимо добавить следующие конфигурации.
rootDir- это место, где расположен ваш исходный код относительно файла конфигурации.moduleNameMapperявляется эквивалентом псевдонима Webpack.@/Utilsзагрузит файл./webapp/src/Utils
Это позволит вам использовать относительный импорт, который у вас уже есть в Webpack.
Добавление Babel и поддержка файлов .vue
Если вы используете функции ES6, вам нужно будет включить Babel (никакого отношения к нам!), А если вы используете .vue файлы, вам необходимо включить поддержку и для них.
Для этого вам нужно запустить npm install --save-dev babel-jest jest-vue, чтобы добавить babel-jest и jest-vue, затем вам нужно добавить следующие преобразования в jest.config.js
Определение mapCoverage в true важно для jest-vue, чтобы сообщить о надлежащем покрытии кода.
Мокинг зависимостей
Еще одна вещь, с которой вы в конечном итоге столкнетесь, - это необходимость имитировать зависимости проекта. Хорошим примером является служба, которая делает сетевые запросы для получения информации.
В этом примере я показываю функцию, которая выполняет сетевой запрос и возвращает Promise с результатом JSON.
Если вы тестируете компонент, у которого Api.js в качестве зависимости, вы захотите имитировать эту службу и возвращать определенные выходные данные при вызове fetchData().
Для этого вы сначала создаете фиктивную версию, вот так.
Как видите, оба файла реализуют метод fetchData(), поэтому мы можем легко поменять местами один на другой, и наш код может быть выполнен должным образом.
Теперь нам нужен простой способ сказать Jest, что при импорте @/Api мы хотим вернуть @/ApiMock, и мы хотим сделать это, никоим образом не изменяя исходный код.
В Jest есть целая страница, посвященная функции имитации, но важно знать, как обрабатывать предыдущий пример, так как следующее. Вам нужно создать файл, в котором вы будете определять свои макеты, назовем его setup-mocks.js.
Внутри вы объявите, что, когда файл запрашивает @/Api, Jest вместо этого вернет @/ApiMock.
Последний шаг - добавить этот файл в вашу опцию setupFiles внутри jest.config.js.
setupFiles: [ '<rootDir>/src/tests/setup-mocks.js', ],
Теперь, когда вы запускаете свои тесты, метод fetchData() всегда будет возвращать Promise со значением { message: 'This is a static value', } вместо выполнения сетевого запроса.
TL;DR
Перейти с Angular на Vue очень просто. Вы можете начать с включения Vue на свою страницу с помощью одного тега <script> и создать свои первые компоненты. Когда вы будете готовы к росту, вы можете добавить отличные инструменты, такие как Webpack, которые предлагают горячую перезагрузку и позволяют использовать компоненты Single File. Вам нужно будет добавить тесты в свое приложение, чтобы гарантировать устойчивый рост, и для этого вы можете использовать Jest, его очень просто настроить и начать писать тесты.
