Тёмный

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

Максим Гром
Подписаться 8 тыс.
Просмотров 3 тыс.
50% 1

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 - Краткий гайд

Опубликовано:

 

22 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 53   
@ReginaScer
@ReginaScer 7 месяцев назад
классно, действительно полезно знать как что работает 👍
@grommaks
@grommaks 2 года назад
Привет всем, сложно, но последнее видео плейлиста готово Приятного просмотра P.S. Использование cdr.detectChanges() сделало Палау рабочей для нового движка (IVY), но теперь перерисовка запускается мгновенно, а значит если сработают несколько Пайпса одновременно, или Observable отдать несколько значений подряд, то столько перерисовок будет запущено Оригинальная пайпа использует метод markForCheck(), если используется старый движок (zone.js) Более продвинутая версия пайпы, это ngrxPush из библиотеки ngrx Там реализована оптимизация отрисовки так, что лишних перерисовок не запускается
@EtoBARAKUDAvasa
@EtoBARAKUDAvasa 2 года назад
Ngrx ждать стоит?
@grommaks
@grommaks 2 года назад
@@EtoBARAKUDAvasa ngrx есть на канале, новые будут не скоро
@DzhavidR
@DzhavidR 8 месяцев назад
привет. запиши пожалуйста про ngrxPush и ngrxLet
@fidgetmania
@fidgetmania 2 года назад
Твой канал -- прям находка года) спасибо за труд!
@GGSoft2009
@GGSoft2009 2 года назад
Вот именно!!!
@tuku_mann
@tuku_mann 2 года назад
Спасибо большое! Отличные уроки, продвинутые и понятные
@js2626
@js2626 2 года назад
Отличный разбор 👍
@thankfulperson3309
@thankfulperson3309 2 года назад
Класно що не кинув на півдорозі, топ плейлист вийшов
@user-zx7os2ox3e
@user-zx7os2ox3e 2 года назад
Максим, спасибо большое за интересные уроки!!!
@andriifentisov4179
@andriifentisov4179 Год назад
Отличные видео. Ждем директивы, интерсепторы, роутинги и много всего интересного и полезного)
@nazar9796
@nazar9796 Год назад
Огромное спасибо за урок, жду новые видосы)
@taras7844
@taras7844 2 года назад
Дякую за чудові укроки! Є доречі крутий пайп який широко поширений withLoadind який містить інтерфейс { data: any, error: null | any, loading:boolean } який по ідея для простих запитів заміняє стейт.
@grommaks
@grommaks 2 года назад
Дякую, прочитав статтю про це, як я бачу це кастомне рішення, але це рішення мені подобається :)
@GGSoft2009
@GGSoft2009 2 года назад
Просто супер!!!!
@user-wq4jl9io4s
@user-wq4jl9io4s 2 года назад
Cool!
@firstnofate
@firstnofate Год назад
В конце видео, там где автор делает переменную в классе тестового компонента ` user$?: Observable ` у меня все ни как не получалось скомпилировать проект, так как компилятор ругался на инструкцию в шаблоне: `` пока я не поменял объявление функции transform в pipe с `transform(observable: Observable): T | null {` на: `transform(observable: Observable | null): T | null {`
@dimansunny7862
@dimansunny7862 2 года назад
Лайк
@Brinzovik
@Brinzovik Год назад
Спасибо!! ангуляр пайп пайпа асинк под копотом пишем сами async pipe angular onPush changeDetection detectChanges js
@MrKrepysh00
@MrKrepysh00 Год назад
Про DDD и NX было б интересно посмотреть видео. С списке искал не нешел.
@antonzolotukhin5349
@antonzolotukhin5349 2 года назад
Спасибо Максим✊ очень интересный материал 🙂 Скажите пожалуйста, есть ли в планах разобрать декораторы и какие то кастомные примеры с ними?
@grommaks
@grommaks 2 года назад
Спасибо за отзыв) Декораторы рассматривал в плейлисте по TS, пока новых примеров нет в планах Ещё много тем которые нужны каждому разработчику на angular
@bwaligarus
@bwaligarus 2 года назад
Хороший канал и много полезной информации, но не нашёл информации про деплой на сервер и сборку под прод, можно такое видео?) с настройками и т.д.
@grommaks
@grommaks 2 года назад
Такое видео не практичное, настройки у всех разные, деплоят техлиды или вообще фреймворк встроен в уже готовый набор микросервисов Если по быстрому, то npm run build и папка dist содержит все файлы проекта, открыв index.html на вашем сайте все будет работать
@bwaligarus
@bwaligarus 2 года назад
@@grommaks вот потому и хотелось об этом видео))) стандартный деплой ет понятно, а вот разные варианты обзор такой, я бы посмотрел)
@grommaks
@grommaks 2 года назад
@@bwaligarus пока не планируется такое видео, на ближайший период есть список тем
@GGSoft2009
@GGSoft2009 2 года назад
@@grommaks То что хотел
@biovawan
@biovawan 2 года назад
Благодарю! Будет вариант асинхронной трубы для zone-less приложений?
@grommaks
@grommaks 2 года назад
Данная реализация, за счёт cdr.detectChanges() работает без зоны, но в некоторых случаях делает много лишних перерисовок. Пока новых видео в этом плейлисте не будет, как соберу материал по этой теме, то дополню плейлист
@wolftv4191
@wolftv4191 Год назад
markForCheck указывает Angular на то, что компонент и его дерево компонентов могут потенциально быть изменены и требуют перерисовки. Однако, сама перерисовка не происходит мгновенно. Вместо этого, Angular помечает компонент и его родительские компоненты как "грязные" и добавляет его в очередь на проверку изменений. При следующем цикле обнаружения изменений, Angular проверит помеченные компоненты и выполнит их перерисовку. detectChanges немедленно запускает цикл обнаружения изменений для компонента и его дерева компонентов, приводя к немедленной перерисовке. Это может потенциально привести к более частым и дорогостоящим операциям перерисовки. Тут не совсем правильное утверждение насчет markForCheck и из за этого не верный выбор метода. Теперь каждый самописный асинк пайп будет сжигать уйму памяти на немедленную перерисовку. Так что тут все же думаю надо использовать markForCheck .
@grommaks
@grommaks Год назад
Полностью согласен. В большинстве случаев предпочтительно использовать markForCheck В свою очередь в тестах используют только detectChanges, если другого не требует логика теста P.S. Реализацию async пайпы я брал из исходников ангулар, возможно напутал или они так сделали, надо будет перепроверить по возможности
@wolftv4191
@wolftv4191 Год назад
@@grommaks переборол лень и посмотрел исходники - там марка (10.07.2023)
@user-ox8ni9oz2p
@user-ox8ni9oz2p 2 года назад
Максим , а как на счет урока по Angular PWA ?) плиз )
@ilnurryazhapov9377
@ilnurryazhapov9377 Год назад
когда новые видео?)
@developerabdulaev4768
@developerabdulaev4768 Год назад
Привет, Максим. Новые курсы по Ангуляр не ожидаются? Нет ли у тебя каких-то пет проектов, где пригодится разработчик, который готов поработать за хороше кодревью))?
@grommaks
@grommaks Год назад
Привет, все время загружено, пытаюсь найти время для новых видео Проектов нет(
@mrshk_vv
@mrshk_vv 2 года назад
Смотрел видео, сразу вопрос про промис появился. Ты прямо с языка взял. Почему про промис не добавил? Там же код был бы проще чем с обсервеблами
@grommaks
@grommaks 2 года назад
Кода было бы больше, главное понять принципы на сложном варианте и не усугубить :)
@musoverda3786
@musoverda3786 2 года назад
Максим - а уже Angular 14 скоро на подходе? А там много фишек интересных ) По ним будет обзор у Вас?
@grommaks
@grommaks 2 года назад
Угу 14 уже релизнулся, пока нет возможности снимать видео, так что увы, пока не будет новых видео
@musoverda3786
@musoverda3786 2 года назад
@@grommaks хорошо - буду ждать
@danylogudz
@danylogudz Год назад
а не кажется что из-за detectChanges было запущено два раза перерендеринг? один в общем флоу приложения и второй раз ручным вызовом detectChanges ?
@grommaks
@grommaks Год назад
Возможно 🤔
@grommaks
@grommaks Год назад
Возможно 🤔
@ihoryanovchyk
@ihoryanovchyk 2 года назад
Почему undefined, а не null?
@grommaks
@grommaks 2 года назад
TypeScript в строгом режиме требует либо явно указать, что поле может быть null либо использовать undefined.
@ilnurryazhapov9377
@ilnurryazhapov9377 2 года назад
что со звуком?)
@grommaks
@grommaks 2 года назад
Все просто, записывал на гарнитуру, а микрофон остался в Харькове под обстрелами
@NoName-ie5bg
@NoName-ie5bg 2 года назад
Друг, ты там как?
@grommaks
@grommaks 2 года назад
Жив здоров
@NoName-ie5bg
@NoName-ie5bg 2 года назад
@@grommaks рад слышать :) Мирного неба тебе над головой и спасибо за твой труд
@GGSoft2009
@GGSoft2009 2 года назад
@@grommaks Ты Украинец? Прослезился. Дай бог тебе здоровья и дольгих лет
Далее
No one will play with him( #standoff #meme #grenade
00:12
БАССЕЙНЫ ПО ЦВЕТАМ ЧЕЛЛЕНДЖ !
38:20
Ranking The Most Painful Crashes
00:19
Просмотров 2,8 млн
Чего ожидать от HTTP/3 + Go
51:07
Просмотров 3,3 тыс.
Async Pipe Is Broken in Angular
9:08
Просмотров 10 тыс.
How To Make Angular Code More Reusable
19:14
Просмотров 27 тыс.
No one will play with him( #standoff #meme #grenade
00:12