Совет, который я хотел бы получить перед переходом с AngularJS на Angular 2+

Как вы, наверное, знаете, существует целый мир различий между AngularJS и новым Angular (версии 2 и выше). Даже мысль об обновлении - это само по себе приключение. К счастью, разработчики Angular приложили немало усилий, чтобы сделать этот процесс максимально безболезненным. Но путь к Angular по-прежнему непрост, если вы хотите обновить что-нибудь, кроме небольшого веб-приложения.

Я знаю, что уже есть много статей, в которых это обсуждается, но большинство из них - это руководства для очень простых случаев. Это не то, что вы собираетесь прочитать ... Для получения технических пошаговых инструкций посетите Angular.io (конечно, после прочтения этой статьи).

В Poka мы медленно перешли на Angular 2 (а затем и на 4), продолжая разрабатывать новые функции для наших клиентов. От начала до конца потребовался год (неполный рабочий день), и на этом пути мы столкнулись с множеством проблем и препятствий. Мы хотим поделиться с вами своим опытом, предлагая вам несколько советов и рекомендаций.

Это общее руководство о том, чего ожидать, как подготовиться и когда делать что при обновлении приложения до Angular 2 и выше.

Машинопись

Чтобы в полной мере воспользоваться преимуществами Angular, вам абсолютно необходимо перейти с обычного JS на TypeScript. Не волнуйтесь, этот шаг может быть самым простым из всех.

При желании можно просто изменить расширения файлов с .js на .ts, и все готово. Если вы спешите отказаться от AngularJS, возможно, переходите к следующему шагу ... Но, сделав это, вы упустите все интересные функции TypeScript.

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

TypeScript имеет много преимуществ по сравнению с JavaScript. Найдите время, чтобы ознакомиться с ним. Поверьте, вы больше никогда не вернетесь к vanilla JS.

Разработка и создание гибридного приложения

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

Если у вас нет особых индивидуальных потребностей, я настоятельно рекомендую использовать AngularCLI. Он имеет отличную поддержку разработчиков, а также все, что вам нужно для разработки, тестирования, линтинга и сборки. По мере развития Angular будет развиваться и интерфейс командной строки.

Однако, если ваше приложение имеет особые технические особенности, делающие AngularCLI непригодным для него (например, наше в Poka), выберите собственную конфигурацию Webpack.

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

Тестирование

В Angular есть такая штука, которая называется TestBed. Согласно документу TestBed:

Настраивает и инициализирует среду для модульного тестирования и предоставляет методы для создания компонентов и сервисов в модульных тестах.

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

В нашем основном веб-приложении у нас более 3000 тестов. Когда мы запускали наши тесты с TestBed, инициированным для каждого компонента, для первого прохода требовалось от 40 минут до часа . Мы думали, что переключившись с PhantomJS на HeadlessChrome, мы выиграем пару минут. Мы ошибались.

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

Я не предлагаю вам не тестировать свой код. Вам следует. Серьезно, сделай это. Но если у вас много тестов (1000+), вам следует сосредоточиться только на простом модульном тестировании без использования TestBed. В любом случае, поскольку вы конвертируете с AngularJS, это, вероятно, все, что у вас есть прямо сейчас. Не беспокойтесь об использовании (потрясающе) TestBed от Angular. Это отлично, но слишком медленно…

Преобразование

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

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

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

  • При начальной загрузке вам нужно будет добавить массив entryComponents. Это компоненты Angular, которые (могут) появиться при запуске приложения AngularJS. Дело в том, что с точки зрения AngularJS практически любой компонент Angular может быть точками входа в приложение Angular. Если у вас возникли проблемы с подключением к компоненту, попробуйте добавить его в свои entryComponents.
  • При переходе на более раннюю версию преобразованных компонентов не забудьте указать, каковы их входы и выходы. Если вы добавляете или удаляете какие-либо входные или выходные данные из компонента, не забудьте отразить эти изменения в своем объявлении AJS.
.directive('deathStarControls', downgradeComponent({
  component: CommentFormComponent,
  inputs: ['kyberCrystalStatus', 'crew', 'director'],
  outputs: ['mayFireWhenReady'],
}) as angular.IDirectiveFactory)
  • При использовании компонентов Angular внутри компонентов AngularJS не записывайте свои входные и выходные данные, как обычно. Другими словами, используйте kebab-case, а не camelCase.
    Вместо [deathStarPlans] напишите [death-star-plans]. Не забудьте вернуть все в camelCase при преобразовании компонента, содержащего уже преобразованные компоненты.
  • Записывайте любые странные ошибки, которые у вас были и которые были устранены. Если процесс обновления занимает столько же времени, сколько у нас, вы можете забыть, что вы сделали для решения проблемы. Это поможет вам сэкономить часы на чесании головы и избежать множества разочарований.

Маршрутизация и основной компонент

На этом этапе ваша маршрутизация все еще должна обрабатываться AngularJS. Пришло время преобразовать последние части вашего приложения.

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

Однако маршрутизация может показаться немного сложной. Если в прошлом вы использовали только базовый маршрутизатор AngularJS, вас могут впечатлить предложения Angular с вложенной маршрутизацией. Это очень гибкий и простой способ, но, опять же, в зависимости от размера вашего приложения, я бы посоветовал пока сохранить маршрутизацию на одном уровне и отложить оптимизацию на потом. Мы хотим как можно скорее покинуть гибридное состояние!

Избавьтесь от AngularJS и оптимизируйте!

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

Вот как вы можете улучшить свое приложение:

  • С помощью Typescript: создавайте интерфейсы и используйте их. Если все в вашем приложении имеет определения типов, вам в полной мере понравится Typescript. Также не стесняйтесь использовать функции ES2015 и ES2016. В любом случае его просто конвертируют в ES5 :)
  • С RxJS: вам абсолютно необходимо использовать всю мощь реактивного программирования! Может быть, не везде в вашем приложении, но, по крайней мере, там, где есть какое-либо взаимодействие с пользователем. Это делает ваш код намного чище и эффективнее. Узнайте больше о RxJS здесь, и если вы не можете понять, как работают Observables, ознакомьтесь с этим постом Андре Стальца.
  • С AoT и Tree Shaking: каждый раз, когда компонент используется, он должен сначала пройти через компилятор Angular для преобразования вашего шаблона и кода. Это делается на стороне клиента (компиляция Just in Time) и требует драгоценного времени. Опережая время, компиляция или AoT - это тот же процесс, но как этап сборки. Если вы можете, вам следует использовать AoT вместе с встряхиванием дерева, поскольку это значительно ускорит ваше приложение и уменьшит его размер. Я говорю если сможешь, потому что на сегодняшний день, если ваше приложение слишком велико, шаг сборки может завершиться ошибкой при попытке компиляции с использованием AoT. Это задокументированная проблема, и я надеюсь, что она скоро будет исправлена.

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

Продолжайте кодировать!