Практическое уравнение, которое поможет вам рассмотреть и количественно оценить известные и неизвестные факторы вашей миграции.

Если вы читаете эту статью в 2024 году или позже, жизнь Vue 2 уже закончится. Поддержка Vue 2 закончилась 31 декабря 2023 г., поэтому крайне важно принять меры немедленно.

На момент написания этой статьи конец жизни Vue 2 быстро приближался. Если вы все еще используете Vue 2, вы, вероятно, сейчас выполняете упражнение по определению того, насколько трудной будет миграция и сколько времени вам следует запланировать.

HeroDevs поможет вам. Мы работали над многими проектами миграции, помогая командам перейти с Vue 2 на Vue 3. Ниже приведен лучший быстрый способ, который мы нашли, чтобы оценить время, необходимое для правильного преобразования. Это уравнение предназначено для миграции среднесложногоприложения и может быть выше или ниже в зависимости от того, насколько простым или сложным может быть ваше приложение.

Чтобы рассчитать время миграции:

  1. Найдите количество строк кода Vue 2 в вашем приложении (LOC)
  2. Найдите среднее количество новых строк, которые ваши разработчики пишут в неделю (LPW).
  3. Умножьте LOC на 0,75. Возьмите этот результат и разделите на LPW. Пришло ваше время для миграции (TTM)
  4. Умножьте свой ТТМ на 1,3. Это ваша оценка.

Оценка = ( ( LOC * 0,75 ) / LPW ) * 1,3

Это уравнение представляет собой базовую структуру. Ниже мы разберем уравнение, чтобы объяснить, почему мы выбрали этот метод для оценки, а также объясним несколько нюансов, которые могут увеличить или уменьшить эту оценку.

Разбивка оценки

Миграция с Vue 2 на Vue 3 связана не столько с переводом кода, сколько с поиском новых зависимостей для вашего перенесенного кода. Мы учитываем эту дельту неизвестных неизвестных в наших расчетах, стратегически умножая наши LOC и TTM.

Зачем умножать LOC на 0,75?

Миграция кода не является построчной связью. Компонент со 100 строками кода в Vue 2 вряд ли будет соответствовать 100 строкам кода в Vue 3. По нашему опыту, около 25% кода приложения, скорее всего, останется неизменным. Остальные 75% — это то, что вам нужно учитывать.

Зачем умножать TTM на 1,3?

Это добавляет 30 % к вашей оценке в качестве буфера, в котором хранится пространство, которое может понадобиться вашей команде для ознакомления с любыми новыми инструментами (например, настройкой CI/CD для использования Vite), новыми зависимостями и любыми новыми шаблонами, возникающими из Vue 3.

Как сделать оценку миграции Vue 2 более точной?

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

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

  1. Ознакомьтесь с критическими изменениями в официальном руководстве по миграции на Vue. Используете ли вы Vue CLI? Vue CLI находится в режиме обслуживания и не выпускал новую версию с июля 2022 года. Сообщество Vue в целом согласно с тем, что лучше всего создавать новые приложения с помощью Vite. Официального EOL для CLI не существует, но менее частые выпуски версий часто могут указывать на то, что конец жизни библиотеки с открытым исходным кодом не за горами.
  2. Определите сторонние зависимости. Vuetify и VueBootstrap — популярные библиотеки компонентов пользовательского интерфейса, за которыми стоит следить. Совместимы ли эти и другие сторонние библиотеки, которые вы используете, с Vue 3? Какие дополнительные усилия могут потребоваться, чтобы сделать их совместимыми? Не менее важно: приближается ли конец жизни какой-либо из этих библиотек?
  3. Получите общее представление о размере и сложности существующих функций, которые необходимо перенести на Vue 3.Знания общего количества строк кода вашего приложения недостаточно для получения точной оценки. Насколько велики или малы ваши компоненты? Какую логику ветвления вам нужно учитывать? Какой код определяет вашу бизнес-логику? Какая документация и/или эксперты в предметной области доступны для справки?
  4. Получите общее представление о размере и сложности новых функций, которые вы хотите написать в Vue 3.Как новые функции взаимодействуют с функциями Vue 2, которые вы переносите? Какую архитектуру, совместимость или другие факторы необходимо учитывать во время миграции? Как это влияет на сложность вашей миграции?
  5. Не забывайте о сквозном тестировании. Приложения по своей природе реализуются итерациями, что может означать тестирование постранично или рабочий процесс за рабочим процессом, а не целостное. Грамотная проверка планов регрессионного тестирования и знание уже известных ошибок могут помочь предотвратить пробуксовку колес во время сквозного тестирования в дальнейшем.

Как может выглядеть моя оценка?

Оценка = ( ( LOC * 0,75 ) / LPW ) * 1,3

Если у вас есть приложение объемом 100 000 строк кода (LOC), а ваша команда из 10 инженеров выполняет около 5 000 строк кода в неделю (LPW), ваше уравнение может выглядеть примерно так:

( ( 100 000 * 0,75 ) / 5 000 ) * 1,3 = ТТМ

(75 000/5 000) * 1,3 = ТТМ

15 * 1,3 = 19,5 недель

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

Что, если я не смогу перенести свое приложение Vue 2 до того, как оно достигнет конца жизни?

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

Конец жизни Vue 2 не обязательно означает последнюю главу вашего приложения.

Эван Ю, создатель Vue, сотрудничал с HeroDevs, чтобы предложить бесконечную поддержку Vue 2, которая продлится после окончания срока его службы, что дает вам время принять решение или действовать в соответствии с вашей долгосрочной стратегией — или даже остаться на Vue 2 навсегда.

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

Единственный плохой вариант – вообще ничего не делать.

О HeroDevs
HeroDevs — студия разработки программного обеспечения и консалтинга, специализирующаяся на интерфейсной разработке. Наша команда является автором или соавтором таких проектов, как Angular CLI, Angular Universal, Scully, XLTS — расширенная долгосрочная поддержка AngularJS, Vue2, Protractor и многих других. Мы работаем с быстрорастущими стартапами и некоторыми крупнейшими компаниями мира, такими как Google, GE, Capital One, Experian, T-Mobile, Corteva и другими. Узнайте больше о нас на сайте herodevs.com.