Последний год мы работали с крупным корпоративным клиентом с более чем 20 веб-приложениями, написанными на AngularJS (точнее, версии 1.5). После объявления Google в начале этого года стало ясно, что клиенту необходимо обновить все эти приложения до более современной интерфейсной среды.
Основная причина этого заключалась в том, что Google прекратил поддержку с 30 июня 2021 года. Любые дыры в безопасности, обнаруженные после этого, сделают нашего клиента уязвимым, если он сам не возьмет на себя ответственность за развертывание исправлений для фреймворка. Мы знали, что нам нужен новый фреймворк, но первой большой проблемой было решить, какой из них выбрать и как это сделать.
Большая тройка Front-end Web в 2018 году
Мы могли бы легко выбрать последнюю версию Angular (v6.2 на момент написания), но мы чувствовали себя обязанными изучить все возможные варианты, прежде чем остановиться на одном и взять на себя довольно серьезное обязательство. Двумя другими претендентами, которые мы рассматривали, были Vue и React.
Несмотря на то, что он получил поддержку со стороны организаций, известных как Али-Баба, Vue был выведен из игры довольно рано. Несмотря на то, что популярность растет впечатляющими темпами, сообщество относительно невелико, что представляет собой риск. это был риск, на который стоило пойти только в том случае, если Vue предлагал функции, которые были важны для того, что мы делали, но это было не так.
Несмотря на его огромную популярность, мы также исключили из гонки React. Это скорее библиотека, чем полноценный фреймворк, что было бы хорошо, за исключением того, что нам нужно было удостовериться, что не осталось ни одной части фреймворка AngularJS, когда мы закончим.
React означал бы необходимость найти другие библиотеки для обработки маршрутизации и хранения данных и в значительной степени разработать нашу собственную архитектуру, что было просто невозможно, когда Angular 2.0+ предлагал всю эту функциональность «из коробки».
Замена интерфейсного фреймворка сама по себе является огромной задачей, и мы хотели минимизировать требуемую работу. По той же причине мы решили не вносить изменения ни в один из инструментов, которые мы использовали для развертывания или автоматического тестирования.
Настоящим решающим аргументом стал модуль ngUpgrade, предложенный Angular. Это не только официально поддерживается Google как путь обновления, но, что еще лучше, в Интернете есть множество реальных примеров, которым мы могли бы следовать. Есть даже целый курс, построенный исключительно вокруг этой темы, в котором процесс объясняется шаг за шагом.
Хотя мы хотели изменить как можно меньше, было несколько случаев, когда у нас не было выбора. Некоторые модули Node.js, используемые нашим приложением AngularJS, играют в мяч только с версией 6.0 и ниже, в то время как Angular 2.0+ требует как минимум v8.0. Нам также пришлось добавить компилятор, поскольку мы представляли TypeScript, но это было благом, потому что мы выбрали Webpack.
«Бонусные» преимущества
Новая технология создается в результате того, что поддерживающие ее сообщества нуждаются в ее создании в поисках новой функциональности. Таким образом, простой факт обновления дал нам преимущества, на которые мы не претендовали, но, тем не менее, получили.
Webpack включает поддержку ленивой загрузки, то есть браузер загружает только ресурсы, необходимые для отображения того, что отображается в области просмотра. Это очень важно для производительности, поскольку сокращает объем анализируемого Javascript, а также сокращает количество отпечатков загрузки, что имеет большое значение для крупного международного бренда, где вы не можете гарантировать условия сети на различных рынках.
< br /> Хотя можно было перенести большую часть нашего кода AngularJS с незначительными изменениями, были области, которые требовали значительного рефакторинга. Мы воспользовались этим как возможностью оптимизировать код другими способами, включая некоторые изменения в модели данных, которые уменьшили количество обращений к службам.
Необходимость в рефакторинге в основном вызвана Angular 2.0+, поощряющим компонентную архитектуру (по сравнению с Model-View-Controller для AngularJS) и не без оснований; он делает ваш код более модульным, что также отлично подходит для повторного использования и тестирования.
Наш подход
Модуль ngUpgrade позволяет загружать AngularJS в Angular 2.0+, так что компоненты могут быть встроены в обе платформы и запускаться в одном приложении при совместном использовании данных и сервисов. Эти две платформы могут сосуществовать бесконечно долго, при этом позволяя нам продолжать выпускать обновления в производственную среду. Это позволяет осуществлять постепенное обновление, начиная с самого маленького компонента и выше.
Альтернативой был бы более каскадный подход, который мог бы привести к работе на промежуточном сервере до «полного» обновления: абсолютный анти-шаблон для больших и сложных приложений, где этот процесс может занять годы.
Команда разработчиков программного обеспечения постоянно жонглирует приоритетами. Идея отказаться от всего, чтобы сосредоточиться на обновлении, была бы совершенно неприятна нашим клиентам и заинтересованным сторонам нашего бизнеса, особенно когда после всей этой работы конечный продукт будет выглядеть точно так же, без каких-либо дополнительных функций.
Однако это было не все… Angular, обязательный TypeScript, который потенциально мог вызвать раздражение у фронтенд-разработчиков, которые не знали ничего, кроме Javascript. Это был расширенный набор Javascript, поэтому многие дополнительные функции были необязательными, но все же требовалось пройти обучение. Однако для большого проекта с несколькими командами, работающими над одним и тем же кодом, TypeScript сделал облегчил всем им понимание нового кода, когда они работали над другими незнакомыми частями кодовой базы.
Последние мысли…
Мы были очень довольны решением, к которому пришли в итоге, хотя, очевидно, было бы проще, если бы Google никогда не разветвлял AngularJS / Angular.
Также не было никаких гарантий, что подобная ситуация не возникнет в будущем, хотя Google, должно быть, осознавал боль, которую они причиняли многим разработчикам, когда-то являясь ведущим фреймворком, а теперь, уступая React, поскольку огромная часть сообщества покинула корабль.
Это наводило на мысль, что в будущем они будут ошибаться в сторону дополнительных инкрементных обновлений, за которыми будет легче следить, и, безусловно, так было до сих пор. С этой точки зрения, обновление - это процесс, который стоит пройти нашему клиенту, хотя бы потому, что по мере того, как Angular скачет, будет становиться все труднее; и тем более срочно, как приближается крайний срок.
Полезные ресурсы
- Статья, в которой говорится о том, действительно ли вам нужно обновляться https://medium.com/@UpgradingAJS/stick-switch-or-upgrade-what-should-i-do-with-my-angularjs-1-x- app-945cda0cf53f
- Вы можете поиграть с TypeScript онлайн на http://www.typescriptlang.org/Playground
- Краткая справка - https://angular.io/guide/ajs-quick-reference
