Начинается приключение

Мы в Зелео столкнулись с небольшой загвоздкой; у нас есть довольно большой клиентский проект, который был начат 6 лет назад и поэтому застрял на фреймворке AngularJS, который был в моде еще в 2014 году. столкнуться с реальностью, которую нам нужно было перенести на текущий фреймворк Angular.

Теперь я предполагаю, что если вы читаете это, вы в курсе, но что касается Angular 2, фреймворк полностью отличается от дней славы AngularJS.

У меня странное чувство, что мы не одиноки в этой ситуации, поэтому я подумал, почему бы не взять с собой в это приключение Интернет!

Мы сопротивлялись этому, по крайней мере, несколько лет, и AngularJS 1.7 находится в LTS (долгосрочной поддержке) до 2021 года, что вызывает очевидный вопрос: почему сейчас?

Что ж, мы вышли на рынок под названием Zeleo немногим более года назад после перехода от автоматизированного приложения для управления рабочими процессами в сфере здравоохранения, которое имело умеренный успех. К счастью, сотни людей зарегистрировались и предоставили отзывы (спасибо!), что наш пользовательский опыт не имел особого смысла, поскольку мы стали IPaaS (платформа интеграции как услуга). Да, мы согласны; пора что-то с этим делать.

О да, и 2021 год не за горами!

Наш проект следует классической структуре AngularJS… с 2014 года. Вы, ребята, вероятно, также знаете, что рекомендуемые соглашения для AngularJS со временем значительно изменились, чтобы стать тем, что они теперь публикуют здесь.

Однако изначально речь шла о службе $scope в контроллере, а не о разделении компонентов.

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

Ах да, и мы используем bower в качестве инструмента управления пакетами для библиотек поставщиков… потому что 2014 год был отличным годом.

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

В любом случае… что-то из этого выглядит знакомым?

Я должен признаться — я уже протестировал процедуру, как из вышеописанного получить чистое приложение Angular 8 на небольшом компоненте. Так что я знаю, что это сработало, по крайней мере, для этого! Мы будем путешествовать по дороге вместе, но я немного протестировал путь, прежде чем начать публиковать это в мире.

В целом мы собираемся это сделать следующим образом:

  1. Обновите пакеты до последней версии, особенно AngularJS (сейчас 1.7.9).
  2. Рефакторинг структуры проекта, чтобы вращаться вокруг компонентов, а не типа файла. Для этого мы будем следовать соглашениям, рекомендованным командой Angular.
  3. Переключите Директивы на Компоненты. Теперь этот тип объекта представляет собой упрощенную директиву, которая была введена в AngularJS ~ 1.5 (точно не уверен, но это было относительно недавно), и они удвоили этот шаблон в Angular 2+.
  4. После завершения рефакторинга и прохождения тестов добавьте в проект typescript и начните портировать js на ts. Мы также будем использовать специальный пакет typescript, предназначенный для репликации аннотаций Angular 2+ в AngularJS.
  5. Попутно перейдите от bower к npm в качестве основного диспетчера пакетов. Мы уже использовали npm для разработки и сборки зависимостей, но библиотеки также необходимо перенести. Обратите внимание, что это означает, что нам также понадобится бандер. Кроме того, нам нужно будет удалить все директивы и библиотеки поставщиков, которые не внесли изменения в Angular 2+.
  6. После того, как все это настроено, должен быть небольшой шаг, чтобы переместить компонент за компонентом в новый новый проект Angular 8!

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

  • Как и вам, нам нужно продолжать выпускать релизы на этом пути, а наличие фреймворков AngularJS и Angular 8 (обе не совсем легкие) кажется очень тяжелым для пропускной способности.
  • Настоящая работа в этом заключается в рефакторинге структуры проекта, чтобы она основывалась на компонентах. Мы должны сделать это в любом случае, так что лучше всего сделать это одним выстрелом.
  • В этом гибридном мире не все компоненты могут взаимодействовать друг с другом.
  • Приближается дата AngularJS LTS! Мы хотим как можно быстрее избавиться от зависимости от AngularJS.
  • Если мы войдем в гибридное состояние, каков будет стимул платить цену за выход из него? Я хотел сделать все сразу и в итоге получить хороший проект на Angular 8.

Итак, вы готовы присоединиться ко мне в этом? Мы не можем быть одни в этой ситуации, поэтому, надеюсь, мы сможем помочь вам справиться с предстоящими трудностями!

Затем мы делаем рефакторинг.