Делать угловое заявление недостаточно. Сохранение кода простым и ухоженным не менее важно. Для этого вам нужно придерживаться некоторых лучших практик Angular. Это не только помогает сделать приложение более чистым, но и повышает его производительность.
Angular может войти в список 10 лучших фреймворков для веб-разработки в 2018 годув качестве ведущего фреймворка. Хотя Angular является одной из ведущих платформ веб-приложений, его также можно использовать для создания собственных мобильных и настольных приложений.
Учитывая популярность и важность Angular, сейчас самое подходящее время для изучения Angular, если вы еще этого не сделали. В любом случае, если вы уже разрабатываете приложения с использованием Angular, вы должны знать, как сделать это лучше, чтобы оставаться конкурентоспособными в быстро меняющейся области программирования.
Таким образом, мы здесь, чтобы поделиться с вами некоторыми из лучших угловых практик, предложенных экспертами. Чтобы извлечь максимальную пользу из этой статьи, вам необходимо иметь хотя бы базовое понимание Angular. Учитывая, что у вас есть это, давайте перейдем к списку из 12 лучших практик для разработки на Angular.
Angular Best Practices
1. Добавить механизмы кэширования
Просто наличие механизма кэширования позволяет избежать нежелательных вызовов API. Ответы на некоторые вызовы API не меняются вообще. В таких сценариях добавление механизма кэширования позволяет сохранять определенное значение из API.
Добавление механизмов кэширования гарантирует, что одна и та же информация не загружается снова и снова. Более того, выполнение вызовов API только при необходимости и избежание дублирования приводит к повышению скорости работы приложения. Это потому, что нет необходимости ждать сети.
2. Выгода от ленивой загрузки
Ленивая загрузка загружает что-то только тогда, когда это требуется. По возможности старайтесь лениво загружать модули в приложение. Преимущество двоякое. Во-первых, это уменьшает размер приложения, а во-вторых, поскольку загружается только необходимый модуль, а не ненужные, время загрузки приложения улучшается.
3. Разверните правильный лестный оператор
Вместо использования множества операторов, когда достаточно одного оператора, уменьшается размер кода. Поскольку различные типы операторов обрабатывают наблюдаемые по-разному, развертывание неправильного оператора может привести к нежелательному поведению приложения.
Поэтому важно использовать правильный лестный оператор, такой как concatMap и mergeMap, при работе с наблюдаемыми.
4. Не забудьте использовать угловой CLI
Настоятельно рекомендуется использовать Angular CLI при разработке проекта Angular. Для этого есть несколько причин, в том числе повышение производительности. Angular CLI представляет огромный набор команд для выполнения ряда задач.
Не только Angular CLI создает компоненты быстрее, но также автоматически ссылается на них в свои собственные модули. Более того, он обеспечивает соответствие соглашению об именах, так что вам не придется беспокоиться об этом самостоятельно.
5. Не упустите шанс использовать крючки жизненного цикла
По возможности используйте крючки жизненного цикла. Любой компонент имеет жизненный цикл, которым управляет Angular. Angular создает, отображает, создает дочерние элементы и отображает дочерние компоненты. Кроме того, он проверяет, когда изменяются свойства компонента, связанные с данными, и предпоследним образом уничтожает его, прежде чем окончательно удалить его из DOM.
Хуки жизненного цикла обеспечивают обзор таких ключевых жизненных моментов, а также возможность действовать, когда они происходят. Некоторые из крючков жизненного цикла и их желательное использование включают в себя:
- ngOnChanges () - используется для выполнения логики внутри дочерних компонентов, вызванной изменением параметров декоратора
- ngOnDestroy () - используется для необходимости очистки ресурсов при уничтожении компонента
- ngOnInit () - используется, когда необходимо извлечь некоторые данные из базы данных, как только создается экземпляр компонента
6. Убедитесь, что используете правила Lint
Чтобы избежать каких-либо действий, которые потенциально могут привести к возникновению некоторых проблем позже, в Angular есть правила lint. Когда действует правило пуха, и вы делаете что-то не так, быстро выскочит ошибка, и вы сохраните день для вас. Вы можете легко настроить различные правила lint в файле tslint.json .
Использование правил кода в коде обеспечивает согласованность в приложении, а также повышает удобочитаемость. Некоторые из правил lint даже снабжены исправлениями для решения тех самых проблем, которым они соответствуют. Кроме того, вы можете написать свои собственные правила lint, используя TSQuery .
7. Изолировать хаки API
Некоторые API Angular страдают от ошибок и, следовательно, требуют исправлений. Тем не менее, лучше изолировать хаки API в одном месте, чем добавлять их в компоненты, где они требуются. Хаки API можно изолировать в службе и использовать из компонента.
Но зачем тебе это делать? Потому что при этом хаки остаются ближе к API. В дополнение к наличию всех хаков в одном месте, что делает их исправление проще и удобнее, действие уменьшает общий код, который имеет дело с не взломанным кодом.
8. Держите ваше заявление сухим (не повторяйте себя)
Убедитесь, что один и тот же код не скопирован в нескольких разделах полной базы кода. В некоторых случаях может потребоваться изменить некоторую логику в определенном разделе кода. Однако наличие идентичного кода, отмеченного в нескольких местах, означает, что изменения необходимо вносить в каждый раздел.
Помимо того, что это избыточное задание, это может привести к возникновению потенциальных ошибок. Наличие определенного кода только в одном месте не только облегчает процесс тестирования, но также повышает скорость и производительность приложения.
9. Переключитесь на HttpClient из HttpModule
В версии Angular 4.3 появился лучший способ обработки HTTP-запросов через библиотеку HttpClient . Хотя библиотека HttpModule подходит для обработки HTTP-запросов, настоятельно рекомендуется переключиться на HttpClient.
Это связано с тем, что помимо всей функциональности использование HttpClient приносит ряд преимуществ. Например, HttpErrorResponse класс в библиотеке HttpClient облегчает обработку ошибок. Кроме того, HttpClient предоставляет доступ к перехватчикам, которые позволяют перехватывать HTTP-запросы, и предлагает возможность прослушивать события прогресса.
10. Отписаться от Observables
При подписке на наблюдаемые, убедитесь, что также сделаны соответствующие отписки от них. Поскольку наблюдаемый поток остается открытым, например, после того, как компонент уничтожен или пользователь перешел на другую страницу, отказ от подписки на наблюдаемые может привести к нежелательным утечкам памяти.
Итак, как отписаться от наблюдаемых? Просто с помощью таких операторов, как take и takeUntil. Настоятельно рекомендуется сформулировать правило lint для обнаружения наблюдаемых, которые не отписаны.
11. Используйте функцию trackBy
Использование функции trackBy с директивой ngFor для циклического перемещения по массиву в шаблонах возвращает уникальный идентификатор для каждого элемента в массиве. При изменении массива Angular повторно отображает полное дерево DOM. Однако это не тот случай, когда используется функция trackBy.
Функция trackBy позволяет Angular знать те конкретные элементы, которые изменились. Следовательно, он будет вносить изменения DOM только для этого конкретного элемента или набора элементов.
12. При использовании операторов RxJs, используйте Pipeable Operators
Это позволяет извлечь выгоду из возможности потрясти дерево операторов, способных к потряске. Это означает, что при импорте этих операторов вместо всего кода будет включен только тот код, который необходим для выполнения. Более того, еще одним преимуществом является то, что это облегчает идентификацию неиспользуемых операторов в файлах.
Давайте завернем это!
Разработка приложений - это ремесло, и всегда есть место для улучшения. Придерживаясь вышеупомянутых лучших практик Angular, вы упростите жизнь в разработке приложений на Angular. Чем меньше ошибок в вашем приложении Angular, тем выше шансы на повышение производительности и производительности.
Официальное руководство по стилю Angular очень важно для любого веб-разработчика, который хочет стать лидером в разработке Angular. Если вы еще не прошли через это, сейчас самое время сделать это. Проверьте это здесь !
Комментариев нет:
Отправить комментарий