Топ-10 Angular-приемов, выбранных сообществом
- четверг, 13 августа 2020 г. в 00:29:38
https://habr.com/ru/company/tinkoff/blog/514928/
В течение июня Саша Инкин и я, Рома Седов, запилили в Твиттере челлендж. Каждый день мы публиковали по совету, хитрости или просто какой-нибудь полезной штуке из нашего опыта работы с Angular. Это движение было тепло встречено и поддержано комьюнити разработчиков.
Я решил написать статью о десяти приемах, которые набрали больше всего лайков, а также объяснить показанные в них концепции более подробно.
Давайте начнем!
Самый популярный твит рассказывает о DI-токенах глобальных объектов.
Во фронтенде мы привыкли к тому, что в глобальном окружении есть множество объектов. Мы используем объекты вроде window, document, fetch-метод, location и никогда не ожидаем, что их может и не быть.
Но, к примеру, в Angular Universal или тестовом окружении в Jest нет ни браузера, ни window-объекта, ни DOM. А передавая эти сущности по приложению через токены, у вас никогда не будет проблем с их использованием, заменой или тестированием вашего кода.
Я знаю многих разработчиков, которые создают хорошие сервисы в своих приложениях. Эти сервисы делают одно дело хорошо. И, поскольку в Angular экосистеме мы используем RxJS, такие сервисы могут содержать только одно поле с Observable или Subject внутри себя для преобразования данных.
Такие ситуации можно упростить, наследуя сервисы от Observable или Subject:
Могут быть ситуации, когда необходимо подписаться на valueChanges реактивного контрола, начав стрим с его текущего значения. Теперь можно не изобретать велосипед, а просто добавить к себе такую обертку:
Известно ли вам, что вы можете легко отслеживать юзеров с High DPI экранами?
Более того, вы можете даже предоставлять для таких мониторов медиаэлементы подходящего разрешения с помощью нативного media-тега и без дополнительных усилий:
Пайпы — отличный инструмент для работы в стиле фреймворка Angular. Они позволяют нам оставаться в рамках декларативного подхода внутри шаблонов наших компонентов. Печально, что некоторые разработчики на Angular избегают создания своих собственных пайпов: с ними можно аккуратно преобразовать данные почти в любой ситуации.
А вот пример универсального пайпа для преобразования данных:
У этой Angular-фичи много названий: banana-in-a-box, two-way binding или просто input-output. Обычно этот подход встречают в формах, работая с [(ngModel)]. Но знаете ли вы, как реализовать это для своих собственных компонентов?
Я всегда стараюсь проверять все параметры и перегрузки у RxJS-операторов, которые использую. Причина: во многих из них есть скрытые опции, узнав которые можно писать некоторые стримы быстрее и проще.
Кроме того, бывают еще и непопулярные операторы. Они редко попадаются, но могут решить некоторые конкретные проблемы в одну строчку кода вместо огромного и хитрого стрима.
Например, одним из таких открытий для меня стала функция сравнения в distinctUntilChanged-операторе:
А был еще такой популярный твит о RxJS. Маленькая хитрость, чтобы сделать свои компоненты капельку проще расширяемыми:
Или оператор defaultIfEmpty, который позволяет заложить полезную логику в стрим в рамках одной строчки кода:
И последнее: в Angular есть специальный синтаксис для селекторов директив наподобие for … of … С его помощью можно создать собственный ngFor под любую вашу задачу.
Например, можно сделать быстрый ngFor для перебора объекта Map. Или вот такой, простой for для итерации индекса от одного числа до другого:
Angular большой, и в нем еще множество фишек. У меня есть ряд идей для новых приемов и хитростей из наших лучших практик, которыми я планирую поделиться с сообществом. Если вам интересны подобные новые твиты, подписывайтесь на меня в Твиттере. И хорошего вам дня!
- Блог компании Tinkoff
- JavaScript
- Angular
- TypeScript
- Социальные сети и сообщества
В течение июня Саша Инкин и я, Рома Седов, запилили в Твиттере челлендж. Каждый день мы публиковали по совету, хитрости или просто какой-нибудь полезной штуке из нашего опыта работы с Angular. Это движение было тепло встречено и поддержано комьюнити разработчиков.
Я решил написать статью о десяти приемах, которые набрали больше всего лайков, а также объяснить показанные в них концепции более подробно.
Давайте начнем!
Токенизируй глобальные объекты!
Самый популярный твит рассказывает о DI-токенах глобальных объектов.
Во фронтенде мы привыкли к тому, что в глобальном окружении есть множество объектов. Мы используем объекты вроде window, document, fetch-метод, location и никогда не ожидаем, что их может и не быть.
Но, к примеру, в Angular Universal или тестовом окружении в Jest нет ни браузера, ни window-объекта, ни DOM. А передавая эти сущности по приложению через токены, у вас никогда не будет проблем с их использованием, заменой или тестированием вашего кода.
Наследование от Observable или Subject
Я знаю многих разработчиков, которые создают хорошие сервисы в своих приложениях. Эти сервисы делают одно дело хорошо. И, поскольку в Angular экосистеме мы используем RxJS, такие сервисы могут содержать только одно поле с Observable или Subject внутри себя для преобразования данных.
Такие ситуации можно упростить, наследуя сервисы от Observable или Subject:
Control value как ReplaySubject
Могут быть ситуации, когда необходимо подписаться на valueChanges реактивного контрола, начав стрим с его текущего значения. Теперь можно не изобретать велосипед, а просто добавить к себе такую обертку:
Делаем приложение лучше для High DPI дисплеев
Известно ли вам, что вы можете легко отслеживать юзеров с High DPI экранами?
Более того, вы можете даже предоставлять для таких мониторов медиаэлементы подходящего разрешения с помощью нативного media-тега и без дополнительных усилий:
Не забывайте о пайпах
Пайпы — отличный инструмент для работы в стиле фреймворка Angular. Они позволяют нам оставаться в рамках декларативного подхода внутри шаблонов наших компонентов. Печально, что некоторые разработчики на Angular избегают создания своих собственных пайпов: с ними можно аккуратно преобразовать данные почти в любой ситуации.
А вот пример универсального пайпа для преобразования данных:
Сделайте свой ящик с бананом
У этой Angular-фичи много названий: banana-in-a-box, two-way binding или просто input-output. Обычно этот подход встречают в формах, работая с [(ngModel)]. Но знаете ли вы, как реализовать это для своих собственных компонентов?
RxJS — неизведанный мир
Я всегда стараюсь проверять все параметры и перегрузки у RxJS-операторов, которые использую. Причина: во многих из них есть скрытые опции, узнав которые можно писать некоторые стримы быстрее и проще.
Кроме того, бывают еще и непопулярные операторы. Они редко попадаются, но могут решить некоторые конкретные проблемы в одну строчку кода вместо огромного и хитрого стрима.
Например, одним из таких открытий для меня стала функция сравнения в distinctUntilChanged-операторе:
А был еще такой популярный твит о RxJS. Маленькая хитрость, чтобы сделать свои компоненты капельку проще расширяемыми:
Или оператор defaultIfEmpty, который позволяет заложить полезную логику в стрим в рамках одной строчки кода:
Можно даже написать собственную альтернативу ngFor
И последнее: в Angular есть специальный синтаксис для селекторов директив наподобие for … of … С его помощью можно создать собственный ngFor под любую вашу задачу.
Например, можно сделать быстрый ngFor для перебора объекта Map. Или вот такой, простой for для итерации индекса от одного числа до другого:
Заключение
Angular большой, и в нем еще множество фишек. У меня есть ряд идей для новых приемов и хитростей из наших лучших практик, которыми я планирую поделиться с сообществом. Если вам интересны подобные новые твиты, подписывайтесь на меня в Твиттере. И хорошего вам дня!