Angular async pipe своими руками (DIY). Глубокий разбор реализации async pipe

Поділитися
Вставка
  • Опубліковано 18 січ 2025

КОМЕНТАРІ • 50

  • @grommaks
    @grommaks  2 роки тому +11

    Привет всем, сложно, но последнее видео плейлиста готово
    Приятного просмотра
    P.S. Использование cdr.detectChanges() сделало Палау рабочей для нового движка (IVY), но теперь перерисовка запускается мгновенно, а значит если сработают несколько Пайпса одновременно, или Observable отдать несколько значений подряд, то столько перерисовок будет запущено
    Оригинальная пайпа использует метод markForCheck(), если используется старый движок (zone.js)
    Более продвинутая версия пайпы, это ngrxPush из библиотеки ngrx
    Там реализована оптимизация отрисовки так, что лишних перерисовок не запускается

    • @EtoBARAKUDAvasa
      @EtoBARAKUDAvasa 2 роки тому +1

      Ngrx ждать стоит?

    • @grommaks
      @grommaks  2 роки тому +3

      @@EtoBARAKUDAvasa ngrx есть на канале, новые будут не скоро

    • @DzhavidR
      @DzhavidR Рік тому

      привет. запиши пожалуйста про ngrxPush и ngrxLet

  • @fidgetmania
    @fidgetmania 2 роки тому +5

    Твой канал -- прям находка года) спасибо за труд!

    • @GGSoft2009
      @GGSoft2009 2 роки тому

      Вот именно!!!

  • @ReginaDilevka
    @ReginaDilevka Рік тому +1

    классно, действительно полезно знать как что работает 👍

  • @tuku_mann
    @tuku_mann 2 роки тому +7

    Спасибо большое! Отличные уроки, продвинутые и понятные

  • @andriifentisov4179
    @andriifentisov4179 2 роки тому +1

    Отличные видео. Ждем директивы, интерсепторы, роутинги и много всего интересного и полезного)

  • @js2626
    @js2626 2 роки тому +3

    Отличный разбор 👍

  • @ДэннисАлтаев-з8и
    @ДэннисАлтаев-з8и 2 роки тому +1

    Максим, спасибо большое за интересные уроки!!!

  • @nazar9796
    @nazar9796 2 роки тому +1

    Огромное спасибо за урок, жду новые видосы)

  • @GGSoft2009
    @GGSoft2009 2 роки тому +1

    Просто супер!!!!

  • @thankfulperson3309
    @thankfulperson3309 2 роки тому +2

    Класно що не кинув на півдорозі, топ плейлист вийшов

  • @dimansunny7862
    @dimansunny7862 2 роки тому +2

    Лайк

  • @biovawan
    @biovawan 2 роки тому +2

    Благодарю! Будет вариант асинхронной трубы для zone-less приложений?

    • @grommaks
      @grommaks  2 роки тому +2

      Данная реализация, за счёт cdr.detectChanges() работает без зоны, но в некоторых случаях делает много лишних перерисовок.
      Пока новых видео в этом плейлисте не будет, как соберу материал по этой теме, то дополню плейлист

  • @YuriiD-y1b
    @YuriiD-y1b 2 роки тому +1

    Cool!

  • @antonzolotukhin5349
    @antonzolotukhin5349 2 роки тому +2

    Спасибо Максим✊ очень интересный материал 🙂
    Скажите пожалуйста, есть ли в планах разобрать декораторы и какие то кастомные примеры с ними?

    • @grommaks
      @grommaks  2 роки тому +4

      Спасибо за отзыв)
      Декораторы рассматривал в плейлисте по TS, пока новых примеров нет в планах
      Ещё много тем которые нужны каждому разработчику на angular

  • @bwaligarus
    @bwaligarus 2 роки тому +2

    Хороший канал и много полезной информации, но не нашёл информации про деплой на сервер и сборку под прод, можно такое видео?) с настройками и т.д.

    • @grommaks
      @grommaks  2 роки тому +1

      Такое видео не практичное, настройки у всех разные, деплоят техлиды или вообще фреймворк встроен в уже готовый набор микросервисов
      Если по быстрому, то
      npm run build и папка dist содержит все файлы проекта, открыв index.html на вашем сайте все будет работать

    • @bwaligarus
      @bwaligarus 2 роки тому

      @@grommaks вот потому и хотелось об этом видео))) стандартный деплой ет понятно, а вот разные варианты обзор такой, я бы посмотрел)

    • @grommaks
      @grommaks  2 роки тому +1

      @@bwaligarus пока не планируется такое видео, на ближайший период есть список тем

    • @GGSoft2009
      @GGSoft2009 2 роки тому

      @@grommaks То что хотел

  • @developerabdulaev4768
    @developerabdulaev4768 2 роки тому +1

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

    • @grommaks
      @grommaks  2 роки тому +1

      Привет, все время загружено, пытаюсь найти время для новых видео
      Проектов нет(

  • @Brinzovik
    @Brinzovik 2 роки тому +1

    Спасибо!!
    ангуляр пайп пайпа асинк под копотом пишем сами async pipe angular onPush changeDetection detectChanges js

  • @wolftv4191
    @wolftv4191 Рік тому +2

    markForCheck указывает Angular на то, что компонент и его дерево компонентов могут потенциально быть изменены и требуют перерисовки. Однако, сама перерисовка не происходит мгновенно. Вместо этого, Angular помечает компонент и его родительские компоненты как "грязные" и добавляет его в очередь на проверку изменений. При следующем цикле обнаружения изменений, Angular проверит помеченные компоненты и выполнит их перерисовку.
    detectChanges немедленно запускает цикл обнаружения изменений для компонента и его дерева компонентов, приводя к немедленной перерисовке. Это может потенциально привести к более частым и дорогостоящим операциям перерисовки.
    Тут не совсем правильное утверждение насчет markForCheck и из за этого не верный выбор метода. Теперь каждый самописный асинк пайп будет сжигать уйму памяти на немедленную перерисовку. Так что тут все же думаю надо использовать markForCheck .

    • @grommaks
      @grommaks  Рік тому

      Полностью согласен. В большинстве случаев предпочтительно использовать markForCheck
      В свою очередь в тестах используют только detectChanges, если другого не требует логика теста
      P.S. Реализацию async пайпы я брал из исходников ангулар, возможно напутал или они так сделали, надо будет перепроверить по возможности

    • @wolftv4191
      @wolftv4191 Рік тому

      @@grommaks переборол лень и посмотрел исходники - там марка (10.07.2023)

  • @firstnofate
    @firstnofate Рік тому

    В конце видео, там где автор делает переменную в классе тестового компонента
    ` user$?: Observable `
    у меня все ни как не получалось скомпилировать проект,
    так как компилятор ругался на инструкцию в шаблоне:
    ``
    пока я не поменял объявление функции transform в pipe с
    `transform(observable: Observable): T | null {`
    на:
    `transform(observable: Observable | null): T | null {`

  • @ilnurryazhapov
    @ilnurryazhapov Рік тому

    когда новые видео?)

  • @SerhiiDerkach007
    @SerhiiDerkach007 2 роки тому +1

    Про DDD и NX было б интересно посмотреть видео. С списке искал не нешел.

  • @ДмитрийКорсак-ы5ь
    @ДмитрийКорсак-ы5ь 2 роки тому

    Максим , а как на счет урока по Angular PWA ?) плиз )

  • @danylogudz
    @danylogudz 2 роки тому +1

    а не кажется что из-за detectChanges было запущено два раза перерендеринг? один в общем флоу приложения и второй раз ручным вызовом detectChanges ?

    • @grommaks
      @grommaks  2 роки тому

      Возможно 🤔

    • @grommaks
      @grommaks  2 роки тому

      Возможно 🤔

  • @taras7844
    @taras7844 2 роки тому +4

    Дякую за чудові укроки! Є доречі крутий пайп який широко поширений withLoadind який містить інтерфейс { data: any, error: null | any, loading:boolean } який по ідея для простих запитів заміняє стейт.

    • @grommaks
      @grommaks  2 роки тому +2

      Дякую, прочитав статтю про це, як я бачу це кастомне рішення, але це рішення мені подобається :)

  • @mrshk_vv
    @mrshk_vv 2 роки тому +1

    Смотрел видео, сразу вопрос про промис появился. Ты прямо с языка взял. Почему про промис не добавил? Там же код был бы проще чем с обсервеблами

    • @grommaks
      @grommaks  2 роки тому +2

      Кода было бы больше, главное понять принципы на сложном варианте и не усугубить :)

  • @ihoryanovchyk
    @ihoryanovchyk 2 роки тому +1

    Почему undefined, а не null?

    • @grommaks
      @grommaks  2 роки тому +2

      TypeScript в строгом режиме требует либо явно указать, что поле может быть null либо использовать undefined.

  • @ilnurryazhapov
    @ilnurryazhapov 2 роки тому

    что со звуком?)

    • @grommaks
      @grommaks  2 роки тому

      Все просто, записывал на гарнитуру, а микрофон остался в Харькове под обстрелами

  • @NoName-ie5bg
    @NoName-ie5bg 2 роки тому +1

    Друг, ты там как?

    • @grommaks
      @grommaks  2 роки тому +4

      Жив здоров

    • @NoName-ie5bg
      @NoName-ie5bg 2 роки тому +4

      @@grommaks рад слышать :)
      Мирного неба тебе над головой и спасибо за твой труд

    • @GGSoft2009
      @GGSoft2009 2 роки тому +1

      @@grommaks Ты Украинец? Прослезился. Дай бог тебе здоровья и дольгих лет