Главная » Статьи » Лучшие практики Angular – а вы их знаете?

Лучшие практики Angular – а вы их знаете?

Лучшие практики Angular – а вы их знаете?

От автора: как улучшить производительность моего приложения Angular? Как сделать стиль программирования моей команды Angular более последовательным? Есть ли какие-то рекомендации по разработке на Angular, которым может следовать моя команда?

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

1. Используйте шаблон Smart-Dumb components

Разделите компоненты /страницы на более мелкие. Smart-компоненты используются для управления данными, выполнения вызовов API, очистки извлекаемых данных, управления состоянием данных и т. д. Dumb-компоненты используются исключительно с целью отображения и должны использоваться в качестве дочерних компонентов Smart-компонентов на странице.

2. Обнаружение изменений OnPush

Это подводит меня к продолжению моего 1-го пункта: измените стратегию changeDetection ваших dumb–компонентов на OnPush вместо использования Default.

Лучшие практики Angular – а вы их знаете?

Установите changeDetection на OnPush вместо использования default

Вставьте ChangeDetectorRef в конструктор smart-компонента и вызовите метод markForCheck(), чтобы заставить етот компонент и дочерние компоненты проверять наличие изменений и соответствующим образом обновлять пользовательский интерфейс.

Лучшие практики Angular – а вы их знаете?

Внедрение changeDetectorRef в ваш smart-компонент

Это повысит производительность вашего приложения, поскольку dumb-компоненты не будут обнаруживать изменения, пока вы не скажете им об этом.

3. Предотвращение утечек памяти в Angular Observable

Утечки памяти — одна из наиболее частых проблем, обнаруживаемых в любом приложении. Typescript также не избежал этого. Наблюдатели (оbservables) в Angular очень полезны и удобны, поскольку они помогают поддерживать открытый канал связи между вашим пользовательским интерфейсом и данными, которые отправляются с сервера. Однако это может вызвать некоторые проблемы, если с наблюдаемыми объектами не обращаться должным образом.

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

Я рекомендую вам решить проблему с работающим краном двумя способами.

1. Использование async pipe, чтобы автоматически отказаться от подписки на observable, если вам не нужны данные или манипуляция ими в вашем коде Typescript.

Лучшие практики Angular – а вы их знаете?

Объявите наблюдаемую переменную в вашем typescript

Лучшие практики Angular – а вы их знаете?

Используйте асинхронный канал Angular для подписки на данные и отображения в пользовательском интерфейсе

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

2. Если вам нужны данные от наблюдателя для некоторых манипуляций с вашей логикой и т. д., вы все равно можете подписаться на них в файле typescript, но не забудьте отписаться от них, когда вы покидаете компонент (хук жизненного цикла ngOnDestory). RxJs предоставляет нам класс Subscription для решения этой проблемы.

Лучшие практики Angular – а вы их знаете?

Шаблон подписки и отказа от подписки для предотвращения утечки памяти

Лучшие практики Angular – а вы их знаете?

Отображение данных с использованием переменной массива

4. *ngFor оптимизация с помощью trackBy

Директива ngFor помогает нам перебирать наш массив в шаблонах Angular. Однако каждый раз, когда массив обновляется или изменяется, все дерево DOM перерисовывается, и это может быть потенциальной потерей производительности. Чтобы Angular знал, что вам нужен только конкретный DOM для повторного рендеринга вместо всего дерева DOM, используемого ngFor, мы можем использовать trackBy для оптимизации производительности нашего цикла ngFor.

Лучшие практики Angular – а вы их знаете?

Типичный trackByFunction для петель ngFor

Лучшие практики Angular – а вы их знаете?

Добавьте метод trackBy рядом с массивом с разделителем точка с запятой

5. Используйте строгие типы вместо any

Не позволяйте Angular угадывать, к какому типу относится ваш объект или переменная. Использование типа «any» разрушает цель использования Typescript вместо Javascript. Переменные строгого типа помогают нам избежать ошибок и частого неправильного назначения переменных разных типов. Код VS или другие популярные редакторы помогают нам выделить эти проблемы.

Лучшие практики Angular – а вы их знаете?

Проблема с выделением кода VS при неправильном вводе переменной

Лучшие практики Angular – а вы их знаете?

Тип возвращаемого значения не соответствует типу возвращаемого значения функции

Лучшие практики Angular – а вы их знаете?

При использовании any ошибки не будет отображаться, поскольку переменная типизирована слабо

Тип «any» заставит переменную принимать все возможные типы и, следовательно, код VS или любой редактор кода не сможет выявить потенциальную проблему или несоответствие типа переменной и типа возвращаемого значения функции. Я рекомендую всем разработчикам Angular строго вводить все переменные и возвращаемый тип функции, это сократит время отладки и улучшит читаемость кода.

Заключение

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

Сообщите мне в комментариях ниже, если у вас есть другие методы, обеспечивающие производительность и чистоту приложения Angular.

Автор: DevJo

Источник: medium.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен