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

DIY - Do it yourself. Отличный способ что либо изучить - сделать это своими руками. В этом уроке мы разработаем свою async pipe и разберем по шагам что и для чего там есть.
Async pipe не только подписывается на Observable, но также:
- отписывается при удалении
- может принимать null вместо Observable и не сломаться
- может принимать другой Observable, при этом произойдет отписка от прошлого
- поддерживает ChangeDetectionStrategy.OnPush
Все эти пункты мы реализуем в этом видео и станем умнее и грамотнее
==============================
Код готового урока:
github.com/MaksymGrom/angular...
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист: • Как работает WEB. Мест...
Вариант 2:
github.com/MaksymGrom/angular...
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================
Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code: • VS Code extensions для...
WebStorm: • WebStorm работа с angu...
Архитектурные елементы Angular • Angular архитектурные ...
Основы RxJS • RxJs Теория: Observabl...
Подробнее об OnPush • ngOnChanges vs ngDoChe...
Немного старого видео об иммутабельности • Immutable. Неизменяемо...
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: • Что такое SQL? Как раб...
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
5) Можно стать участником моего канала на платной основе / @grommaks
#pipe #angular #grommax
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:25 - Создание пайпы appAsync
02:17 - OnDestroy и отписка
03:04 - Проверка работы пайпы
04:39 - Поддержка ChangeDetectionStrategy.OnPush
06:00 - Поддержка смены Observable на лету
08:56 - Поддержка null value
10:13 - Краткий гайд

[@ReginaScer]

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

[@grommaks]

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

[@EtoBARAKUDAvasa]

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

[@grommaks]

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

[@DzhavidR]

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

[@fidgetmania]

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

[@GGSoft2009]

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

[@tuku_mann]

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

[@js2626]

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

[@user-zx7os2ox3e]

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

[@andriifentisov4179]

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

[@GGSoft2009]

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

[@nazar9796]

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

[@taras7844]

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

[@grommaks]

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

[@thankfulperson3309]

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

[@dimansunny7862]

Лайк

[@firstnofate]

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

[@user-wq4jl9io4s]

Cool!

[@wolftv4191]

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

[@grommaks]

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

[@wolftv4191]

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

[@Brinzovik]

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

[@antonzolotukhin5349]

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

[@grommaks]

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

[@MrKrepysh00]

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

[@biovawan]

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

[@grommaks]

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

[@user-ox8ni9oz2p]

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

[@bwaligarus]

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

[@grommaks]

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

[@bwaligarus]

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

[@grommaks]

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

[@GGSoft2009]

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

[@developerabdulaev4768]

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

[@grommaks]

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

[@ilnurryazhapov9377]

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

[@musoverda3786]

Максим - а уже Angular 14 скоро на подходе? А там много фишек интересных ) По ним будет обзор у Вас?

[@grommaks]

Угу 14 уже релизнулся, пока нет возможности снимать видео, так что увы, пока не будет новых видео

[@musoverda3786]

@@grommaks хорошо - буду ждать

[@danylogudz]

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

[@grommaks]

Возможно 🤔

[@grommaks]

Возможно 🤔

[@mrshk_vv]

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

[@grommaks]

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

[@ihoryanovchyk]

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

[@grommaks]

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

[@ilnurryazhapov9377]

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

[@grommaks]

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

[@NoName-ie5bg]

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

[@grommaks]

Жив здоров

[@NoName-ie5bg]

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

[@GGSoft2009]

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