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

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

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

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

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

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

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Получить курс

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

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

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

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

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

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

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

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

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

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Получить курс

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

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

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

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

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

Заключение

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

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

Автор: DevJo

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