company_banner

Топ-10 Angular-приемов, выбранных сообществом

    В течение июня Саша Инкин и я, Рома Седов, запилили в Твиттере челлендж.

    Каждый день мы публиковали по совету, хитрости или просто какой-нибудь полезной штуке из нашего опыта работы с 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 большой, и в нем еще множество фишек. У меня есть ряд идей для новых приемов и хитростей из наших лучших практик, которыми я планирую поделиться с сообществом. Если вам интересны подобные новые твиты, подписывайтесь на меня в Твиттере. И хорошего вам дня!
    Tinkoff
    it’s Tinkoff — просто о сложном

    Похожие публикации

    Комментарии 9

      +1
      Спасибо за подборку. У вас после слов «А был еще такой популярный твит о RxJS.» идут два одинаковых твита. Если точнее, то неверный твит в примере про defaultIfEmpty.
        0
        Поправил, спасибо большое за внимательность!
        0
        Спасибо, кроме твиттера телеграм канал не ведете?
          0
          Нет, телеграм не веду. Но знаю, что у товарища лиса (thekiba / twitter.com/thekiba_io) есть классный канал по Angular:
          t.me/angular_fox
            +1

            Спасибо)
            Тогда Ждём ещё статей)

          0

          Спасибо за статью. Балдежь, где таких специалистов, как вы найти. Мое окружение к сожалению вообще не интересуется тем, как ангуляр работает под капотом. А ведь это так интересно :(. Постоянно, что-то новое узнаю. Наследование от Observable или Subject удивило, действительно необычный подход. Кстати, не наблюдаю в вашем коде наличия takeUntil или оберток над ним. У вас тут везде утечки памяти присутствуют. Надеюсь это код не для прода:)


          Псс. у вас там часто используют ангуляр? Если, да, то я бы сходил к вам на собес. из любопытства, а то почти везде один React, да Vue нынче (

            0

            Можно еще и стандартные классы Ангуляра наследовать. FormGroup например. И делать его Injectable, например для передачи всем потомкам без лишних инпутов.

              0

              Ага, знаю. Есть одна очень классная библиотека для валидации с этой механикой — rxweb, рекомендую

              0
              Привет! Спасибо за добрые слова :)
              Обертка для destroy у нас своя собственная есть, вот тут Саша Инкин про нее постил

              Да, у нас очень много ангуляр разработчиков и проектов на ангуляр, пингани меня, пожалуйста, в удобном тебе мессенджере / соц. сети, расскажу подробнее

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое