Объясняю RxJS
ฝัง
- เผยแพร่เมื่อ 7 พ.ย. 2022
- #rxjs #angular
В этом видео расскажу о понимании RxJS, посмотрим чем функционал библиотеки отличается от Promise. Отвечу на основные вопросы которые задают новички.
Исходный код показываемых примеров:
github.com/AlexanderZhelnin/r...
Исходный код RxJS:
github.com/ReactiveX/rxjs
Полезная документация по RxJS:
www.learnrxjs.io/
![จังหวะนี้ - เม้ก อภิสิทธิ์ [ Official MV ] จอนนี่มิวสิค](http://i.ytimg.com/vi/4gQRZCkRyiU/mqdefault.jpg)
Благодарю! Мне, как начинающему, это видео очень помогло осознать некоторые описанные вами тонкости работы с библиотекой RxJS. Подписался на канал)
Рад что полезно
Круто, еще больше видео по RxJs и Angular!😀
Сегодня будет по angular
Круто объясняете! Прям на одном дыхании смотрится. Спасибо!
рад что нравится 🤗
Thank you for content, definitely wanna see more videos about Angular. Thank you
Отличная лекция, спасибо!
Всегда пожалуйста 🤗
Спасибо за ваше время и контент!
Всегда пожалуйста 😊
Дуже добре, коли програміст з досвідом роботи і робочими кейсами, уміє усе зрозуміло і просто пояснити новачкам!
Спасибо Вам огромное, видео просто ТОП!!!
всегда пожалуйста
Очень классно, снимаю шляпу! :)
спасибо!
Спасибо, очень понятное объяснение 👍
пожалуйста 😉
Спасибо, очень подробно и наглядно.
Пожалуйста 😉
Спасибо за вашу работу 👍
Всегда пожалуйста. Как же долго я этот ролик записывал, несколько раз начинал заново.
@@Kulibins1 Особенно понравились объяснения pipe т.к. все в них путаются, и если есть возможность сделайте видео про особенности pipe переключения на обзёрвеблы т.к. там множество вариантов.
Я как раз в конце сказал что будет ещё по этой теме ролики 😉
Красота какая, спасибо 👍
Всегда пожалуйста
Видео очень крутое и полезное!
Спасибо за ваш труд...
Можете сделать выпуск по настройкам и плагинам VsCode
которые установлены у вас?
Сделаю.
Спасибо больше за разъяснение, очень интересную тему вы затронули, так как бывало пару моментов на работе, когда коллега доказывал, что лучше использовать промисы, чтобы не усложнять код, а местами было сложно ответить почему этого не стоит делать, а теперь понимаю их основные отличия
Еще раз спасибо!
Всегда пожалуйста
Промисы поддерживаются на уровне языка через async\await, а эти сабскрайберы нет. в итоге вернулись туда с чего начали - к колбекам. Я не спорю что сама библиотека имеет право на жизнь при обработке некоторых типов данных, которые можно представить как последовательности. Но лепить ее везде, как это сделали в ангуляре и представлять как серебряную пулю это полная ерунда. А в сочетании с тайп скриптом эта хрень получается ооочень многословная. В итоге что бы написать простенького клиента на ангуляре программисту нужно +знать еще один язык, +rxjs ну и ануляр само собой. Я использовал старый ануляр, не было проблем, год назад нужно было написать несложный клиент - я пошел смотреть в сторону нового ангуляра, 3 дня его покрутил - плюнул, взял vue (который ничего не навязывает) и за 2 недели написал. Сейчас вот учувствую в проекте где команда год писала клиента на ангуляре 2 и сервер на .Net. Заказчик решил нанять еще людей так как типа успехи скромные. Я смотрю на эту писанину - да скромные, но объем кода поражает на любой пшик куча кода как на стороне клиента так и на стороне сервера, с какими-то контролерами хандлерами и т.д. явный оверинженеринг. В итоге смотрю видео по этой хуете и тайп скрипту, и не понимаю как эта хрень поможет нам ускориться (чуваки с тайп-скриптом ловко подменили понятие скорости разработки, (основная фишка джаваскрипт) на "безопасность" во время подготовки проекта)
@@vadymsushchenko1680 Расти тебе ещё в понимании разработки и расти
Хорош мужик, выручил. Сейчас посмотрю
Хорошее видео, спасибо!
Всегда пожалуйста
Спасибо. А видео по работе с объединением потоков и вообще манипуляцией с потоком данных будет?
Да там есть особенности про который хотел рассказать. Сейчас сделаю еще одно маленькое виде почему нужен RxJS (из заданных вопросов), то что не сказал в этом виде, а следующее по RxJS уже было бы работа с группами потоков.
Спасибо за видео! Был ли у Вас опыт использования микрофронтендов с использованием Angular?
В принципе только так и делаем в наших проектах. Всё разбито на библиотеки, в которых реализуются отдельные части приложения, библиотеки максимально независимы друг от друга.
@@Kulibins1 т.е. все модули хостятся на разных серверах и динамически загружаются в оболочку главного приложения? Как я понимаю, в таком случае нужно использовать ModuleFederation?
@@denisviktorovich7958 если мы говорим про Хосты, то используется web components. Так же Про то что я написал, то имел ввиду что само приложение разбито на независимые блоки, блоки грузятся отдельно, стандартная ленивая загрузка роутингов.
@@Kulibins1 понял, спасибо за разъяснение!
28:45 - Александр, так, ведь, эти функции, это же обычные функции Functional Programming, которые являются Immutable. Спасибо, кстати за объяснения. Я пришёл с Джавы и Реакта, смотрю курс сейчас одного горе-ментора.... вот, приходится смотреть дополнительно, чтобы разобраться.) Так что лайк и спасибо тебе.
Очень тяжело сделать хороший курс, что бы понять необходимо несколько просмотреть и всё сомому попробовать. Я бы если чесно не смог бы в какое-то разумное время курс сделать, очень это не тривиальная задача, статью на хабр по Инъекциям зависимостей неделю писал, несколько раз переделывал, т.к всё не нравилось.
Спасибо Алексей! Супер объяснение.
Всегда пожалуйста
Круто вообще. Спасибо, что поделись знаниями. Очень доступно разъясняете!
Всегда пожалуйста
Супер! Спасибо! Лайк
За лайк спасибо 😊
Использовал rxcpp для разработки приложухи на бортовой контроллер машины, которая собирала информацию с кучи датчиков, сохраняла в сиквелайт, отправляла данные из БД по сетке из очередей с двумя приоритетами, выводила метрики и другую важную инфу на UI, принимала ввод от водителя, мониторила изменения конфигов и т.п. И все это на rx. А еще мог для тестов/демо подменить данные реальных датчиков на генерируемые также через rx + ranges. Сознательно ушел от слотов/сигналов кьюта, иначе не получилось бы также классно, я думаю) К сожалению, поддержка версии для крестов полуживая.
для плюсов вероятно слишком высокоуровнево 🤣 я только для c# и для ts rx использовал в продакшене. Может еще с go и rust буду использовать.
@Kulibins1 А можно увидеть все Extension для VSCode? Возможно JSON?
Давайте я свой набор скину в группу телеги.
@@Kulibins1 можете кинуть линк та телегу?
@@Kulibins1 телегу нашёл, скиньте когда получится) Спасибо
@@maksmaryanchuk710 t.me/zhelnin_au (чуть позже сегодня/завтра скину)
Добрый день, скажите пожалуйста а как на 21:33 в 201 строке: где `${_}` - сюда попадает значение 1? Я просто такого синтаксиса ранее не видел, и не могу понять, никакой переменной в ${ } нету? O_o
_ это тоже переменная. Там она получается в стрелочной функции, часто так пишут, когда нужно проигнорировать значение, c# это стандартный синтаксис, а в ts я так делаю для неизвестных переменных, а тут демонстрация вот так и обозначил.
супер!
Спасибо
подпишусь, пожалуй
Это радует 😉
На всякий случай:
На жс промис из коробки можно много раз подписаться
Подписаться можно но результат будет получен одним. Тут можно посмотреть что Максим Гром написал. Сама функция then возвращает новый промис и мы тоже на него можем подписаться, но ведь это уже другой промис.
@@Kulibins1
const promise = Promise.resolve(1);
console.log(await promise);
console.log(await promise);
console.log(await promise);
@@Kulibins1 не одним:
const promise = Promise.resolve(1);
promise.then((result) => { console.log(`первая подписка ${result}`) })
promise.then((result) => { console.log(`вторая подписка ${result}`) })
promise.then((result) => { console.log(`третья подписка ${result}`) })
возник вопрос, касаемый обновления данных с помощью rxjs, с сервера я получаю массив продуктов (к примеру), в потоке я добавляю их в форму и вижу в консольке, что они добавляются по 1 штуке и вопрос в том, что у нас каждый раз идет перерисовка интерфейса или ошибаюсь?
вероятно вы выводите компоненты для каждого продукта, и в каком-то месте сделали вывод в консоль. но ngfor создаёт все компоненты разом, или обновляет (как у вас он сделан)
@@Kulibins1 понял спасибо за ответ! у меня в ngOnInit был вывод в консоль, получал от сервиса данные, добавлял в форму и смотрю, что каждый раз консолька пишет сообщение
Александр добрый день! Подскажите пожалуйста, почему всё-таки на 21:30 (минуте) log ( 220 строка) у вас отрабатывает в конце функции а не самым первым, я пробовал различные эксперименты и получаю другой результат, спасибо.
220 это же ошибка, её вообще нет, она не отрабатывает ни где. Может 228?
@@Kulibins1 да точно 228 (забавное сочетание цифр ахах)
@@Kulibins1 вообще раньше думал что подписка на observable как и then (promise) попадет в стопку микрозадач, но наверное это не совсем так, судя по вашему уроку
@@dmitryoleynichenko7610 если под задачу создался отдельный observable, на подобии httpclient, то можно не отписываться, а вот если общий observable, то обязательно
@@Kulibins1 вы скорее всего немного не поняли мой вопрос, я не очень понял почему код в функции (228 строка) выполнился после подписок а не первее
получается, что при получении списка данных из Observable, мы каждый раз в цикле гоняем элементы? типо получили of(1_000_000 elems...), далее в пайпе мы миллион раз пробегаемся мапом и потом фильтром? скорее всего это все комбинировать можно, но выглядит как кучу раз повтор одного и того же?
Не понял в чём повторения, но да сначала луше filter, потом map.
@@Kulibins1 повторение в том, что к примеру, если мы бежим по 1_000_000 элементам и у каждого есть айдишка и элементы не отсортированы по айди (а айди пускай будет число) и задача удалить айди с номером 825_139, то мне в худшем случае придется пробежаться сначала в filter 1 млн раз и потом в мапе уже 999_999, и так каждый раз, когда я что то добавляю в пайп итерационное?
@@ooshkapooshkin8048 это поток и работаем мы с ним как с потоком, т.е. нет на самом деле нескольких циклов, один оператор создаёт новый поток в который помещаются значения из первого и т.д. т.е. когда в исходном будет первый элемент он передастся во второй observable, там он пройдёт функцию оператора, после чего поместится в свой observable и т.д. т.е. нет такого, что все ваши элементы сначала попадают в один, потом в другой. Обработка идёт последовательно
афигеть! спасибо
Всегда пожалуйста 😉
Интересный курс, для новичков, но я такое люблю)
18:30 при создании нового промиса, он сразу же отрабатывает. То есть then ни как не влияет на промис. Then можно написать несколько раз на один и тот же промис, просто он вернет один результат для всех (как горячий обсервабл*)
В свою очередь подписка на Observable активирует его именно для конкретной подписки. То есть Observable это условный конструктор, а не сам объект...а вот Subscription это именно тот объект который делает всю работу
Утверждение как бы то правильное, но есть огромный оттенок опыта использования RxJS вместо чистого JS, что для новичка может быть не понятно, почему это then должен на что-то влиять
То есть вышло что пояснил ангуларщиком чем RxJS круче, а не JS разработчикам)
P.S. спасибо за продвижение RxJS, может качество кода повысится в командах)
Этот материал начинал записывать несколько раз и всякий раз меня либо отвлекали либо сам понимал что видео получится часа на 3, в примерах подготовил и создание своих PromiseLike и что они с async тоже работают, и как создаются свои операторы для pipe, но как бы хочется рассказать все, но ведь не будут смотреть и так на 1 час получилось. И да на чистом Js я гораздо меньше кода написал чем на TS, и RxJS гораздо чаще использую чем Promise (но тоже использую, уж большой async await хорош)
Кстати когда можно несколько раз писать then это только потому что сам then возвращает Promise и он новый и не обязательно вернёт то же самое, как раз в примере с PromiseLike это рассматривал, но что-то сомневаюсь что это поймут. И виде записал потому что "мои" новички не понимают, вот что бы не повторятся будут видео смотреть 🤣
@@Kulibins1 я не про этот случай говорил
А про такой
const responseAsync = fetch(‘json.json’)
responseAsync.then(res => console.log(res));
responseAsync.then(res => alert(res));
То есть дважды подписались на один и тот же промис, а не цепочка. По аналогии как мы subscribe делаем и он дважды делает запрос
Запись такого длинного видео это очень сложно, часто все получается смазано, но это видео получилось хорошо, я решил такой хронометраж не делать у себя на канале)
@@grommaks я это понял мы тут на самом деле не на один и тоже подписываемся а then возвращает новый Promise 🤣 и с этой точки зрения на один промис можно подписаться один раз
@@Kulibins1 а мне кажется видео на 3 часа было бы самое оно. Потому что посмотрев это видео многое осталось не понятным, так как код был уже написан, и часть кода мы не видим из других файлов. И вообще, новечку нужно больше времени что бы понять детали, т.к. вы объясняете саму суть, но чтоб ее понять, нужно понимать и всё вокруг. Или это только у меня так работает, не знаю.
В любом случае спасибо за видео!
Первый раз вижу next: в subscribe, обычно пишут .subscribe(value => {}) и всё
.subscribe({next:_=>{}}) эквивалентно .subscribe(_=>{}) причем последний вариант внутри rxjs преобразуется к первому.
На промис может подписаться сколько угодно наблюдателей через then
Не совсем так как раз с Максом обсуждали. Каждый then это новый промис, и вход будет результат поредыдущего. Если что мне промисы нравятя, и в своих проектах я их активно использую async/await. Очень часто их достаточно, кроме того есть лёгкое преобразование туда и обратно.
@@Kulibins1 технически да, но с точки зрения использования, если есть промис const p = new Promise(...), сколько угодно потребителей могут сделать p.then(..,) и ждать, пока он разрезолвится, не обязательно делать это цепочкой p.then().then().then(), а так же промис может быть косвенно использован в нескольких Promise.all([..., p]) как одна из составляющих. Я тоже не ради холи вара, просто утверждение что у одного промиса всегда один подписчик может сбить с толку новичков.
Спасибо объяснения, очень полезно, но разберитесь со звуком пожалуйста. Вы иногда пропадаете и вас плохо слышно.
Вроде в новых роликах должно нормально со звуком быть
он "пропадал" , когда не говорил
Хотелось бы видео про ngrx с сложной архитектурой, получением данных и тд
Есть хорошие видео по ngrx на канале "Максим Гром" или требуется что-то более сложное?
@@Kulibins1 спасибо большое за Ваш труд, да хотелось бы что-то посложнее, с более сложной архитектурой, ведь пишут что ngrx имеет смысл только в этом случае.
@@dmitryoleynichenko7610 Я просто не люблю rxjs 😁 вот и не снимал видео
@@Kulibins1 да там тема объемная, эффекты, редюсер, получение данных, как бы вы построили сложную архитектуру с этим всем из ngrx
где таймкоды?
Если есть желание можешь сделать - добавлю
18:33
Стиль написания на rxjs отличается от классического похода, и Как показывает практика, разработчики херово его понимают, и говнокода ещё больше получается, лучше уж async/await, и сентетического сахара типа debounce()
Смотря кто разработчики, как то не было особых проблем с rxjs, хотя любой код могут испортить 🤣 И с помощью RxJS можно сделать то, что не сделаешь на промисах.
RxJS вроде на верхнем уровне понятен, но когда пытаешься разобраться с mergeMap/concatMap/switchMap и разницей между ними - мозг ломается.
И после этого у тебя возникает ощущение, что ты вообще не правильно все понял...
есть 3 варианта разобраться. В документации есть схема работы этих операторов, есть пример который запускается и смотрим результат, и можно исходники посмотреть этих операторов (я смотрел исходники, когда разбирался, теперь конечно мне сразу понятны все варианты объяснения, но может быть вам подойдёт один из вариатов или все сразу что бы разобраться)
Минус rxjs что он весит 5 мб
В проекте никогда не используется 100% функционала, и срабатывает тришейкинг, и в итрговую сборку попадает довольно мало
Хз почему так задизлайкано. Наверное потому, что понять видео не почитав про Rxjs хотя бы основы - будет не особо реально. Тем не менее, неплохой видос, когда уже есть что-то в голове, но понять суть - еще не понимаешь. Как вторая передача у авто. Приемлемо крч) Мне помогло. Спасибо
Вода и тошно
вам кажется что вода? я как раз конкретные вещи попытался объяснить.