Обзор миграции при переходе кодовых баз со старой на новую

Команда Angular недавно объявила о прекращении долгосрочной поддержки AngularJS. Долгосрочная поддержка (LTS) изначально планировалась на июль 2021 года, но была отложена до 31 декабря 2021 года из-за последствий COVID-19. Вы можете увидеть их объявление в их сообщении в блоге, как о прекращении LTS, так и о предоставлении переходного пути к более поздним версиям Angular для тех, чьи команды и планы разработки полностью сосредоточены на экосистеме Angular.

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

Миграция вашей кодовой базы не обязательно сложна, но может потребовать времени и самоотверженности в зависимости от размера и сложности вашего текущего решения. Вообще говоря, есть три основных подхода, которые вы можете использовать для перехода от AngularJS. Это:

  1. Одноместный СПА
  2. фреймы
  3. Микроприложения

Одноместный СПА

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

фреймы

Приложения Iframe — это автономные приложения, которые мы хотим запускать вместе с родительским приложением в качестве подфункций или дочерних приложений во всем родительском приложении. Для этого необходимо создать новое приложение со своим собственным репозиторием, конвейером, стратегиями развертывания, средами тестирования и доменами, в которых будет находиться приложение. Также требуются протоколы безопасности на стороне сервера и клиента, если вы хотите, чтобы iframe был доступен только из родительского приложения.

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

  1. Родительское приложение создает iframe для дочерних приложений на заданную страницу, функцию и т. д.…
  2. Создайте коммуникационные функции для приложений, чтобы они могли отправлять данные туда и обратно, если это необходимо.
    – Токены аутентификации являются хорошим примером функциональности кросс-коммуникации, когда вы не хотите, чтобы вашим пользователям приходилось входить в систему во второй раз. чтобы использовать ваше дочернее приложение.
  3. Создавайте общие библиотеки утилит и компонентов, которые стандартизируют использование и взаимодействие между всеми родительскими и дочерними приложениями. Это можно сделать с помощью общедоступных или частных пакетов NPM.
  4. Реализуйте оболочку $location.path, чтобы разделить маршрутизацию между двумя фреймворками.

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

Микроприложения

Это решение позволяет вам продолжить монолитную сборку, но ограничивает вас от внедрения современных методов сборки, если ваше текущее приложение слишком сложное, чтобы переписать каждую часть приложения сразу, не увеличивая технический долг и непредвиденные сбои (например, переход от Webpack 3 к Вебпак 5). Мой любимый инструмент для этого подхода — react2angular, пакет NPM, который встраивает приложения React в ваш проект AngularJS, не мешая основному обслуживанию приложения или разработке функций.

Этот инструмент позволяет вам отправлять свои сервисы AngularJS и любую поддержку, которую вы определяете, в свое приложение React без необходимости переписывать компоненты AngularJS. Ваше приложение React использует входящие сервисы и данные в качестве реквизита, и ваша команда уже работает продуктивно с самого начала с небольшими накладными расходами. В результате того, что AngularJS обрабатывает микроприложения React в вашем родительском приложении, React не имеет удобства, заключающегося в том, что приложения используют единое решение для управления глобальным состоянием, такое как Redux или Context. Это может постепенно меняться по мере того, как вы мигрируете и объединяете все больше и больше компонентов приложения с новой кодовой базой React. Еще одним преимуществом использования react2angular является создание переноса меньших компонентов React в компонент Angular только по имени, чтобы массово заменять конкретную функцию при переходе с течением времени.

Несколько вещей, которые следует учитывать при таком подходе.

  1. Хотя сам пакет не обновлялся несколько лет, он по-прежнему работает с современными версиями React.
  2. Этот пакет лучше всего работает с AngularJS версии 1.5 и выше. Если вы используете версию 1.2, возможно, вам придется поработать, чтобы повысить версию AngularJS до версии 1.5.
  3. Это не должно быть вашим окончательным решением, поскольку поддержка AngularJS в настоящее время прекращена, и вы должны стремиться в конечном итоге полностью удалить свою кодовую базу AngularJS в пользу замены React.
  4. Реализуйте оболочку $location.path, чтобы разделить маршрутизацию между двумя фреймворками.

Решение

Если вы смотрите только на разработку новых функций, подход Iframe может быть вам полезен. Если вы хотите заменить текущую функциональность устаревшего приложения, подход Micro App может быть подходом для наилучшего перехода вашего приложения. Лично я предпочитаю оба из них в унисон. Таким образом вы можете перенести старые функции на новую кодовую базу, одновременно разрабатывая новые функции в новой кодовой базе iframe. В конце концов, вы даже можете переместить код приложения react2angular Micro прямо в приложение iframe, если будете строго использовать одни и те же общие библиотеки и утилиты.

Возможный миграционный поток:

  1. Установите react2angular и начните тестировать переходы небольших функций.
  2. Начните перемещать сервисный уровень в общий общедоступный/частный пакет NPM.
  3. Замена пакетов npm AngularJS их эквивалентом React, если это необходимо.
  4. Создать дочернее приложение React, которое заменит родительское приложение.
     – Создать родительские и дочерние функции связи.
     – Отправить родительские токены аутентификации в дочернее приложение.
     – Создать правила безопасности сервера для того, где и какие дочерние приложения может существовать как iframe.
     – Настройка дочерней маршрутизации в соответствии с родительской маршрутизацией.
     – Поскольку функции встроены в родительскую структуру, оба маршрута будут совпадать для последующего полного перехода.
  5. Настройте оболочку $location.path для синхронизации маршрутизации AngularJS и React как для Micro Apps, так и для Iframe.
  6. В зависимости от потока переместите компоненты react2angular в приложение iframe.
  7. После замены представлений и компонентов AngularJS замените для окончательного перехода:
    – Маршрутизация
    – Корневые файлы (например, index.js, index.html и т. д.)
    – Обновите настройки Webpack до React на основе сборки
    — заменить все службы промежуточного программного обеспечения (например, restangular на axios.)
  8. ИЛИ замените родительское приложение приложением Iframe.
  9. Поздравляем, ваше приложение AngularJS удалено!

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

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

Спасибо за чтение, и я желаю вам удачи в миграции!

Ресурсы