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

Поделиться
HTML-код
  • Опубликовано: 18 дек 2024

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

  • @ReginaScer
    @ReginaScer 11 месяцев назад +1

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

  • @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 года назад

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

  • @tuku_mann
    @tuku_mann 2 года назад +7

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

  • @andriifentisov4179
    @andriifentisov4179 2 года назад +1

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

  • @ДэннисАлтаев-з8и
    @ДэннисАлтаев-з8и 2 года назад +1

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

  • @nazar9796
    @nazar9796 2 года назад +1

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

  • @js2626
    @js2626 2 года назад +3

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

  • @Brinzovik
    @Brinzovik 2 года назад +1

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

  • @thankfulperson3309
    @thankfulperson3309 2 года назад +2

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

  • @firstnofate
    @firstnofate Год назад

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

  • @biovawan
    @biovawan 2 года назад +2

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

    • @grommaks
      @grommaks  2 года назад +2

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

  • @antonzolotukhin5349
    @antonzolotukhin5349 2 года назад +2

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

    • @grommaks
      @grommaks  2 года назад +4

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

  • @GGSoft2009
    @GGSoft2009 2 года назад +1

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

  • @wolftv4191
    @wolftv4191 Год назад +2

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

    • @grommaks
      @grommaks  Год назад

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

    • @wolftv4191
      @wolftv4191 Год назад

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

  • @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

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

  • @MrKrepysh00
    @MrKrepysh00 2 года назад +1

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

  • @taras7844
    @taras7844 2 года назад +4

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

    • @grommaks
      @grommaks  2 года назад +2

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

  • @ДмитрийКорсак-ы5ь
    @ДмитрийКорсак-ы5ь 2 года назад

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

  • @danylogudz
    @danylogudz 2 года назад +1

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

    • @grommaks
      @grommaks  2 года назад

      Возможно 🤔

    • @grommaks
      @grommaks  2 года назад

      Возможно 🤔

  • @dimansunny7862
    @dimansunny7862 2 года назад +2

    Лайк

  • @ilnurryazhapov
    @ilnurryazhapov Год назад

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

  • @YuriiD-y1b
    @YuriiD-y1b 2 года назад +1

    Cool!

  • @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 Ты Украинец? Прослезился. Дай бог тебе здоровья и дольгих лет