О чем этот пост?
- Некоторые предложения по написанию не только лучшего кода Angular, но и кода Javascript.
- Краткие, но простые советы по производительности с хорошо зарекомендовавшими себя примерами.
- Тизер по некоторым темам, связанным с Angular и Javascript.
Так как Typescript - это строгий надмножество Javascript. Я использую Javascript как ключевое слово в контексте, когда это возможно. Все применимо к машинописному тексту.
Введение 🖼
Я стараюсь не использовать стоковые фотографии, когда пишу статью или документацию, но в этом случае за этим стоит своя история. Останься со мной.
Я считаю, что то, что делает это произведение искусства завораживающе красивым, - это детали. Художник убедил вас, что фата достаточно детализирована.
Как кто-то сказал (наверное, Леонардо да Винчи - никаких доказательств 😕)
«Детали создают совершенство, а совершенство - это не деталь».
Независимо от того, над чем вы работаете, если вы заботитесь о деталях, вы на пути к совершенству, независимо от того, достигнете вы этого или нет.
В этом конкретном аспекте программная инженерия не сильно отличается от искусства. Чистое, хорошо продуманное и производительное программное обеспечение - вот что мы ищем после @ codehake.
Я подготовил для вас несколько советов / предложений по Angular. Хватит болтовни. Давайте погрузимся в содержание.
1. Условия шаблона
Если вы даже столкнетесь с кодовой базой Angular, вы увидите, что условия шаблона являются основой шаблона. Этот совет не предназначен для повышения производительности или функциональности. Все дело в опыте разработчиков.
Вы можете сразу увидеть разницу. Сначала это может показаться тривиальным, но когда условия усложняются, лучше инкапсулировать их в переменную с осмысленным именованием. Иногда у вас нет другого выбора, кроме как определить в шаблоне (циклы), в этом случае будет достаточно написания значимых комментариев. Вы уловили идею 🚀
2. Возможности ESNext
Написание лучшего кода Javascript - необходимое условие для создания лучших приложений Angular. Возможности ESNext - это отдельная тема, но я собираюсь упомянуть функции, которые я использую каждый день. Это то, что вам нужно, чтобы быть в курсе, потому что это периодически меняется. Это лишь верхушка айсберга. Я настоятельно рекомендую вам узнать больше о функциях ESNext.
Оператор распространения
Оператор распространения - одна из самых универсальных функций Javascript. Вы можете добиться многого. Вот некоторые.
Последний пример из жизни. Обычно, если hobbies присутствует, назначьте hobbies, если hobbies является ложным, даже не задано как hobbies: null, оставьте это свойство пустым.
Синтаксис спорен. Его можно упростить или добиться того же результата с помощью альтернативных методов. Уверяю вас, будет сложнее.
В результате оператор распространения - мощный и хороший инструмент, который стоит иметь в вашем арсенале.
"Для дополнительной информации"
Стрелочные функции
Если вам когда-нибудь приходилось писать такой код var self = this;. Это для тебя.
Стрелочная функция - это краткая, упрощенная версия традиционной функции. Есть вещи, которые можно и нельзя. Например, стрелочная функция не имеет отдельной области видимости, поэтому она разделяет родительскую область видимости, в отличие от традиционной. Получение данных и Observables намного проще с функциями стрелок.
"Для дополнительной информации"
3. Короткое замыкание в Javascript
По моему опыту, это одна из самых недооцененных особенностей языка. Не каждый язык поддерживает это, но, к счастью, JS поддерживает.
Чтобы присвоить значение result , механизм ищет ярлык. Если условие выполняется до достижения конца, оно замыкается и переходит на следующую строку.
В этом примере достаточно только проверки условия переменной «e», если вы делаете заказ правильно. Используя эту функцию, вы можете предотвратить состояния загрузки / ненужные вызовы API и даже уменьшить задержки начальной загрузки.
Прочтите эту статью, чтобы узнать, насколько важно короткое замыкание 😛
4. ngFor с trackBy 🔮
В большинстве случаев вы можете предвидеть будущее жизненного цикла приложения. Вы можете предполагать определенные изменения в своем шаблоне или просто не хотите, чтобы шаблон реагировал на каждое небольшое изменение. Было бы неплохо, если бы Angular рендерил только тогда, когда мы этого хотели? Вот где в игру вступает trackBy. trackBy - это просто функция для сравнения данных с предыдущим состоянием. Если это другой повторный рендеринг, если это не бездействие.
Давайте быстро рассмотрим этот пример. Есть две версии: одна с trackBy, а другая без.
Если нет trackBy, каждый раз, когда данные изменяются, каждый элемент внутри этого цикла будет перерисовываться 😒
Если мы отслеживаем изменения, которые нам небезразличны, движок Angular не будет выполнять повторную визуализацию без необходимости.
Для этой статьи я записал только DOM, чтобы мы могли увидеть разницу. В обоих случаях я постоянно нажимаю одну и ту же кнопку. Simple ngFor выполняет рендеринг каждый раз при нажатии кнопки. Однако во втором trackBy функция ищет изменение и отображает только в том случае, если после нажатия кнопки есть разница. Только будьте осторожны, это не серебряная пуля. Иногда вам не нужно trackBy. (Если вы хотите отобразить каждую мелочь 🤔)
5. Виртуальная прокрутка с помощью Angular CDK
Я не могу не подчеркнуть, насколько это важно. Особенно, если вам нужно разработать страницу со слишком большой прокруткой. Как и предыдущий совет, это тоже касается производительности. Примеров Angular CDK более чем достаточно, чтобы оправдать потребности этой функции.
Документация по материалам Angular также упрощает процесс в одном предложении.
Виртуальная прокрутка позволяет эффективно моделировать все визуализируемые элементы, делая высоту элемента контейнера такой же, как высота общего количества элементов, которые должны отображаться, а затем визуализировать только те элементы, которые находятся в поле зрения.
Вот список наиболее очевидных аспектов виртуальной прокрутки.
- Он не отображает сразу все возможности. Он отображает только те, которые видны пользователю.
- Он использует кеширование и по возможности использует тот же шаблон. Проще говоря, он перерабатывает шаблон, поэтому циклы становятся более производительными. 💪
Загляните здесь для получения дополнительной информации. Я также хочу посоветовать вам поиграть с примерами и увидеть разницу в DOM.
6. Трубы в Angular
Иногда мы, разработчики интерфейса, забываем о том, что Angular заботится о многих вещах за нас. Иногда это подавляюще, в большинстве случаев это круто
Это круто. 🚀
Когда вы импортируете общий модуль, с ним идет не только ngIf. Некоторые сверхполезные трубы встроены. Я собираюсь сосредоточиться на двух наиболее полезных.
CurrencyPipe
В какой-то момент моей карьеры мне приходилось работать с десятками валют, и почти к каждой из них были разные требования. Слишком много запятых, нулей было непосильно. Валютная трубка оказалась удобной, и я сделал еще один шаг и расширил CurrencyPipe, что оказалось довольно легко.
DatePipe
То же самое и с DatePipe. Не воспринимайте эти трубы как должное и используйте их как можно чаще
Полезны не только собственные каналы Angular, но есть и фантастические. Вот один
7. Не забывайте отказываться от подписки на потоки.
Очень просто подписаться на поток. Вы тоже относитесь к отказу от подписки? Если вам повезет, вы можете даже не осознавать, что вам нужно отказаться от подписки. Это так тонко.
Если я попытаюсь объяснить каждую часть этой концепции, мне нужно будет написать еще одну статью. Давайте сделаем это просто. Если вы не хотите утечек памяти и проблем с производительностью, вам нужно отказаться от подписки на потоки (наблюдаемые, события и т. Д.).
Есть несколько способов отказаться от подписки, вот некоторые из них.
- Используйте канал async. Angular позаботится об отказе от подписки при уничтожении шаблона.
- Вы можете отказаться от подписки на источник с помощью перехвата ngOnDestroy. Однако вы должны быть осторожны с этим. Возможно, вы по-прежнему хотите, чтобы эта Подписка существовала.
- Если вы хотите получить получить указанное количество
valueиз источника. Вы можете рассмотреть такие операторы RxJS, как take, takeLast, takeUntil, first. Эти операторы не требуют отмены подписки.
8. Операторы RxJS
Хороший переход а
Экосистема Angular очень богата, когда дело касается реактивного программирования. NgRx и Акита - это только верхняя часть моей головы. Я даже не говорю о том, как HttpClient работает в Angular.
Забавно то, что если вы инвестируете в себя, чтобы изучить RxJS, все эти концепции применимы практически к любому другому языку. Касса RxSwift и RxJava.
Вот мой взгляд на это. Инвестируйте в изучение RxJS. Вы не пожалеете.
Если это уже никто не сказал.
Кодовые базы, языки меняются, шаблоны дизайна - нет.
Вот несколько отличных ресурсов, которые помогут вам повысить уровень вашего понимания.
9. Невероятные компоненты
Название может показаться недостаточно деликатным. По сути, идея такая. У вас есть умный и несколько глупых для этой конкретной функции / страницы. Интеллектуальный компонент заботится о более «логических» вещах и передает достаточно данных для представления немым компонентам.
Например, если компонент боковой панели генерирует событие, и это событие должно запускать другой компонент - как вы угадали, - об этом позаботится интеллектуальный компонент.
Впервые я узнал об этом понятии от Дана Абрамова. Несмотря на то, что он как бы изменил свое мнение об этой концепции, особенно для разработки React, я все же считаю, что разделять компоненты таким образом - это хорошая практика.
10. Использование Augury
Augury - это своего рода эквивалент инструментов разработки React / Vue. Я не получил особой выгоды, пока разрабатываю приложения Angular, но если вы хотите увидеть обзор своего приложения с более широкой точки зрения, это весьма полезно. Особенно, если вы работаете над относительно большим проектом.
11. [скрыто] против ngIf
Разница между ‘hidden’ и ‘ngIf’ довольно тонкая, но очень важная, когда придет время. Представьте, что у вас есть компонент с огромным шаблоном. Однако изначально пользователь не хочет видеть эту функцию.
Я меньше выступлений. 🤔
Если вы выберете скрытый, компонент не будет отображаться в DOM, но если вы проверите, то увидите, что все загружено, но отмечено скрытым.
С другой стороны, если вы выберете ngIf, он закомментирует данные, если выражение ложно. Это снизит начальную нагрузку, но компоненты нуждаются в повторной загрузке.
По сути, это компромисс.
Вот быстрый пример, вы можете увидеть те же результаты.
12. Абсолютный путь с tsconfig.json
Это золото ✨
Я уверен, что вы сталкиваетесь с такими операторами импорта. Это просто не выглядит приятным и не обслуживаемым.
import {GrazieModule} from './../../app/shared/component/grazie.module
🤮
К счастью, Typescript позаботится об этом беспорядке, если вы сделаете достаточно корректировок. В вашем tsconfig.jsonfile вы можете создавать абсолютные пути. Только строки, которые имеют значение, от строки 17 до строки 32. Вы как бы создаете ярлык для этого пути. Теперь вы можете перефразировать это следующим образом.
import {GrazieModule} from '@shared/component/grazie.module'
❄️ VSCode действительно поможет, если вы сделаете эти настройки. Он предлагает вам использовать ярлыки вместо относительного импорта.
13. Привязка атрибута / класса / стиля
Использование переплета может оказаться не по зубам. Иногда может возникнуть соблазн использовать ngIf вместо добавления привязки класса. Однако в целом он более производительный и лучший DX.
👾 Приятно использовать привязку атрибутов с БЭМ.
Давайте посмотрим на это сравнение.
Это может показаться тривиальным, но разница слишком велика, чтобы ее игнорировать 🤷♂️
Yaaay! 🎉
Надеюсь, вы узнали что-то новое. Мы только поцарапали поверхность. Есть множество вещей, о которых я не упомянул, потому что это введение. Прочтите эту замечательную статью и ознакомьтесь с разделом лучших практик в Angular docs.
Если у вас есть вопросы или замечания, не стесняйтесь обращаться ко мне ✌️
Доброе утро, а если не увидимся: Добрый день, добрый вечер и спокойной ночи! 👋
Ресурсы
- Https://262.ecma-international.org/11.0/#sec-intro
- Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
- Https://www.javascripttutorial.net/es6/javascript-arrow-function/
- Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- Https://web.dev/why-speed-matters/
- Https://material.angular.io /
- Https://datorama.github.io/akita/
- Https://ngrx.io/
- Https://angular.io/
- Www.rxjs-fruits.com
- Reactivex.io
- Https://www.learnrxjs.io/
- Https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
- Https://augury.rangle.io/
- Https://medium.com/angular-in-depth/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf
