RxJS Быстрый курс - Реактивное программирование на JavaScript [2020]
HTML-код
- Опубликовано: 8 июн 2024
- Получить профессию Frontend разработчика -
bit.ly/3HVJEDa
Подробнее узнать об обучении в Result School -
bit.ly/3QSVi5K
Бесплатный курс HTML & CSS - bit.ly/3bzbBVm
Сделать 5 проектов на JavaScript - bit.ly/3ylsSKC
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Исходный код начала урока:
github.com/vladilenm/rxjs-you...
Финальный код:
github.com/vladilenm/rxjs-you...
Документация по RxJS:
rxjs-dev.firebaseapp.com/api
Таймкоды:
00:00 - Введение
00:38 - Применение
14:15 - Создание стримов
34:11 - Subject
40:49 - Операторы
RxJS уроки тут:
• RxJS
Я вот так подумал - я лайкаю все, что смотрю. Подписка есть. Колокольчик тоже)) Курсы смотрел, купил. Главное, что бы Влад не выдохся и не забил на канал. Вдохновения, мотивации, больше практических курсов(можно даже платных), ну и побольше кеша, после проделаной работы, тебе. ))
Благодарю за отзыв :)
Канал не заброшу, слишком много идей и мыслей по контенту!
Скоро будет практический курс бесплатно тут)
По кешу да, если есть такой посыл, то буду рад любым донатам в ВК или на патреоне
В описании к ролику вы найдете ссылку на плейлист с практикой и реальным применением RxJS
Приятного просмотра)
Спасибо за уроки. У вас нету уроков для NgRX?
Огромное спасибо за видос, очень помог в прохождении тестового задания. Видео открыл после того, как увидел технологию в интересующей вакансии, думаю "А что такое rxjs", через несколько часов прилетело тестовое задание "Обязательно используйте rxjs и Observables" Подумал, ну все, ласты, хз как его сделать. Но после ознакомления по видео, и десятка статей и решений в интернете к вечеру задание уже выполнил, и спокойно себе выбирал стили для кнопочек и отступы. Образование через youtube имеет свои плоды. Спасибо за ваш труд!
Аналогичная ситуация! Пришел ответ от компании с тз где нужно юзать rxjs, сижу, зубрю)
@@YuretsUA подскажите как вы реализовали остановку?)
Отличный урок! Максимум информации про RxJS всего за 1 час. Очень продуктивное видео, как всегда Владилен на высоте. Спасибо, было очень ценно для меня!
Посмотри на RxJS в практике в полном курсе по Angular 8:
clc.to/angular
полный курс не содержит секции про тестирование
Дима Танасийчук к концу месяца добавлю большую секцию
Я тащусь, Ваш труд бесценен!
Просто пушка, а не контент. Спасибо огромное!)
Очень понятно, без лишней воды, спасибо за видеоурок
Спасибо за качественное видео! Все основные моменты RxJS описаны очень доходчиво и с понятными примерами!
ОГОНЬ!!! Жду курса с нетерпением.
Все как всегда по делу и без воды. Благодарю
На самом деле, это одно из лучших видео с объяснением RxJS, парни, кому не понятно, не расстраивайтесь, тема сложная я сюда с официальной доки и хабра-статей пришёл и только более-менее стало понятно, что к чему. Нужно переварить просто, повторить ручками.
Браво! Много уроков смотрела и читала статьи, но только тут всё понятно стало)
Супер, как всегда) большое спасибо!)
Владилен, спасибо вам за труд, делайте еще, будем смотреть)
Изучил RxJs за 38 минут на скорости 1.5 :D Спасибо!
Спасибо, как всегда отличное видео!
Было бы здорово увидеть rx на живых примерах.
Спасибо огромное, я очень рад что нашел твой канал) Очень классно объясняешь!
Очень интересно слушать, спасибо! Хотелось бы увидеть материал по оптимизации Angular приложений.
Great course. Please do more such valuable courses in the future. Thanks, Vladilen!
Спасибо за видео. Вы сохранили моё время и нервы
Спасибо за контент, помог сформировать понимание концепции rxjs и выполнить первую связанную с этим задачу)
Максимально ясно и доступно. Спасибо!
Спасибо за титанический труд !
спасибо, от тебя всегда узнаю о годных темах
Лаконично и по существу. Браво!
Спасибо за видос! Как всегда круто
Отличное видео, до того как его посмотрел RxJS всегда был какой-то магией
Thanks a lot! When I was watching this video, I got a much relaxed. Great job!
Отличный урок. Спасибо!
Супер понятно все рассказал , спасибо !
Более подробные таймкоды:
00:00 - Введение
00:38 - Применение
07:23 interval, pipe, !!! после pipe - subscribe!!!((res) => res)
08:30 операторы, filter((y) => ), map((res) => )
10:39 take - берет нужное количество элементов стрима/
11:00 scan((acc, item) => acc.concat(item)) -некий аналог reduce
14:15 - Создание стримов
15:07 - of - создает стримы, subscribe - подписка на стримы
17:10 from() - создает стримы из массивов
19:05 Observable!!!
22:00 - error вместо next
22:30 - обработка ошибок -
26:20 fromEvent - создание стрима из событий мыши.
31:15 range, timer, interval - для формирования стримов
34:11 - Subject
39:10 ReplaySubject
40:49 - Операторы
42:24 pipe
42:45 map
44:00 filter
45:55 tap
46:05 take
takeLast
takeWhile
49:05 scan
50:00 reduce - складывает все, но после завершения стрима, а scan - каждый event
51:15 переключение стримов
53:14 switchMap
Спасибо за урок. Самый лучший урок)))
чет я так и недопонял какую проблему он решает=(
ловкая манипуляция потоками значений, декомпозиция и переиспользование кода. по сути любую задачу и без rx можно решить - но порой не так лаконично и красиво.
Проблема появляется в большом проекте, когда есть куча событий и их обработчиков в разных файлах, а код быстро превращается в спагетти, которое трудно поддерживать. Тут и приходит на выручку правильная архитектура приложения и RxJS как инструмент, позволяющий разделить "спагетти" на автономные модули.
Отличное видео, спасибо!
огромное спасибо за урок! Очень классное видео.
Ждём видос по NgRx)
небольшой курс по NgRx есть от Владилена. Курсу 3 года, но дает отличное понимание что это за технология) Можешь поискать на coursehunter
@@user-kq2yo3my9l Спасибо
Очень крутое видео, спасибо !
Спасибо за хороший курс.
то что надо, спс большое
я уже несколько лет обучаюсь по твоим видео, и смог самостоятельно получить позицию джуна в ЕПАМ, теперь меняют проект, перехожу на ангуляр.. готовлюсь к интервью. СПС за невероятный труд
Спасибо, было интересно и полезно
Спасибо за видео Владилен
Владилен, в уроке (23:20) вы говорите, что после обработки ошибки в subscribe() программа выполняется дальше. Но "Value: After 3000 ms" не выводится, т.е. после observer.error('Something went wrong') поток останавливается ?
Спасибо, очень хорошее изложение материала.
Как то мало теории. Просто примеры. Они крутые, но теория как это работает под капотом тоже важно для понимания. В любом случае материал качественный. Спасибо🙂
Большое спасибо!
Спасибо за труд!
Привет, отличный материал по Rx, спасибо
Спасибо за интересный контент)
Круто подали инфу, спасибо!
Спасибо за видео!
Не получил ответа в видео, зачем использовать в реальных проектах. Как я понял, основная концепция - подписываемся на события и генерирую эти события.
Чем обычный js не устраивает, не совсем понятно. Вижу оверхед дополнительный для приложения, но не решения какой-либо проблемы.
нашел ответ в другом видео. rxjs полезен тем, что позволяет потоки данных модифицировать, производитель различные манипуляции с ними в реактивном стиле программирования. это очень полезно с обработчиками событий, когда надо различные манипуляции с ними сделать. а также полезно может быть с веб-сокетами и promise.
@@ko22012 что за видео?
Ответ одного из авторов Rx на вопрос "когда?"
- Если некое действие вызывает несколько событий - используйте RxJS;
- Если имеется множество асинхронных операций и вы пытаетесь наладить их совместную работу - тут тоже пригодится RxJS;
- Если вы обрабатываете огромные наборы данных в массивах и вам нужно организовать пошаговую обработку этих данных, вы можете использовать операторы RxJS как нечто вроде трансдьюсеров, когда они обрабатывают эти наборы данных без создания промежуточных массивов, которые потом придётся уничтожать с помощью сборщика мусора.
Так же был хороший пример с драгэнддропом. Если без либы пришлось бы вешать несколько слушателей и это все разрастается в портянку. А с Rx все приводится к лакончиному виду.
Статья есть на хабре(с сылкой ютуб может комент снести)
Вообще у них в доке написано что нужно относиться к Rx как к lodash(с асинхронными плюшками)
Я увидел в операторе interval что он может принимать в себя график срабатывания( есть подозрение что можно наконец то делать ровные интервалы а не как движок решит) ). Надо попробовать.
Первое что мне на ум приходит юзать напрмер когда глубоко вложенный(ебну-ый) объект приходит с бэка и нужно например структуру поменять(на вменяемую) и изменять его с учетом данных полученных от дополнительных запросов. Или просто много запросов зачейнить(типо promiseRace).
@@ko22012а разве все это не было понятно из этого урока? Можно было немного фантазии включить и подумать с чем можно observable использовать
Странно, смотря видео так и не понял что такое pipe оператор. Открыл официальную документацию, прочитал. И, о чудо! сразу все стало понятно!
Спасибо за полезное видео. 👍 👍 👍
Владилен, запиши пожалуйста обновленный курс по ngrx. Спасибо.
Спасибо! Сразу понятно все стало после просмотра! Ещё state manager надо бы где-то посмотреть
а что такое стрим?
Типо учить ещё одну библиотеку что бы делать тоже самое
Спасибо, хорошее видео!
Супер курсы. Я доволен.
Лучший канал на русском языке, прохожу сейчас твой курс на Udemy по Angular - доступно и понятно, спасибо!
Спасибо за курс
Годно!Молодец!
Спасибо Владилен
Отлично все понятно и четко.
Больше тем про Angular , кто согласен ?
Таймкоды:
1. Применение (0:38)
2. Создание стримов (14:15)
3. О 'Subject'ax (34:11)
4. Об операторах (40:49)
Таймкоды:
00:00 - Введение
00:38 - Применение
14:15 - Создание стримов
34:11 - Subject
40:49 - Операторы
Влад, есть к тебе вопрос, нужно запилить приложение для телефона( ничего сложного - обновление отчетов по заказам, регистрация, уведомления). Что бы ты выбрал Ionic 4 + Ang VS React Native? Зарание спасибо.
Я склоняюсь в сторону React Native
Скоро по нему как раз буду делать материалы
Крутой туториал!
спасибо, очень полезное видео
Тебе просто памятник надо поставить!
Очень полезная информация
Зачётненько, но с примерами асинхронных запросов, конечно, было бы совсем огонь :)
Владилен, волшебник ϟ%)
Велкам! На канале есть плейлист по практике RxJS для разных сценариев. В том числе и асинхронный код
Красавчик !
Спасибо друг!
можно пользоваться вторым терминалом нажав на плюс слева сверху терминала
разобрался, спасибо!
Привет Влад. Что ты понимаешь под stream? Что это понятие из себя представляет?
Переведи stream на русское слово "поток" и начинай понимать что из себя он представляет.
Спасибо большое...
Крууутатенюшка ;)
Владилен, огромное вам спасибо! Очень классное погружение в RxJS для тех кто его в глаза никогда не видел.
поддерживаю
Хороший урок, спасибо. Хоть каждый день пользуюсь rxjs, но лишний раз послушать разбирающегося человека приятно. Я бы еще добавил takeUntil - очень важная штука для unsubscribe. И чаще используется, чем take, насколько я могу судить
Посмотри плейлист на канале с практикой. Там все разобрал
Когда я это смотрел в первый раз, мало что понял. Спустя примерно пол года пересмотрел, понимаю, на сколько же код написанный с помощью RxJS элегантный и понятный в сравнению с нативным js. А самое главное, это помогает исключать callback-hell в проектах.
промисы в нативе для этого же придумали
помимо promise есть даже сахар в виде async await(читабельней некуда), какой колбэк хэл?
Спасибо большое! Благодаря Вам и Вашим курсам я ушла с верстки джуном на Ангуляр на хорошую зарплату с большой перспективой. Удачи Вам во всем и спасибо. У Вас самые лучшие уроки по Ангуляру и JS.
Сколько времени заняло освоение Ангуляра? )
@@user-zj4tk1mh4m я его ещё не освоила. В процессе
@@uaplatformacomua я имею ввиду сколько времени потребовалось чтобы устроиться джуном? От начала изучения Ангуляра до самого трудоустройства )
@@dnevnikdevstvennika_ на первую работу откликнулась на вакансию в интернете, на вторую попала по предложению в линкедине
у нас есть второй интервал? А зачем два интервала?
Very good course. Vladilen, please create more advance RxJS courses for professional developers. Not every developer fully understands how RxJS works. So such a course would be so helpful for the community. Thanks a lot!
Спасибо!
Спасибо
Просто комент, чтобы помочь попасть в тренды x)
В тренды :D
Где реальное применение ?
Сделай пожалуйста урок по ngrx. На русском почти нету информации.
Thank you!
Неплохо бы было про Throttle рассказать, штука полезная.
Спасибо !!!
Подскажите, а для чего на кнопку Clear необходимо было добавлять стрим?
Не было необходимости, как и во всех остальных случаях. Это как с джквери, если у тебя большая часть написана на ней, то и нужно писать на ней, либо вообще не писать на ней. Стрим не представляет из себя что то особенное, обычная более удобная обёртка
Про 3 функции в subscribe повторился😀
У меня есть вопросик по событиям.
Как вешать например события клик на еще не созданные элементы? В нативном мы вешаем событие к примеру на родителя который создан изначально, или на весь документ, а потом в колбеке проверяем таргет или по названию элемента или содержит ли он нужный класс и запускаем соответствующий колбек - а как в rxjs правильнее это сделать? Первый вариант это также навешать событие на родителя, а в subscribe проверять таргет - и запускать соответствующую функцию, второй вариант - это вешать на родителя несколько раз клик и в пайпе фильтровать - но это как то вроде костыльно (или нет?). А может можно вообще в пайпе и фильтровать и колбек назначать в зависимости от того на какой элемент кликнули? И получается что нам и sybscribe не нужен - но тогда зачем вообще в целом стрим?
Чет запутался совсем )))
Вешать события в момент создания элемента
Три месяца назад, я первый раз посмотрел этот видос и нифига не понял. Теперь, когда разобрался и применил rx в паре проектов, не понимаю как жил до него, это очень удобная штука! Спасибо Владилен, ты прокачал мой скилл)))
Самое главное в rxjs не пихать его бездумно в любой проект) Высока вероятность, что в 80% где его применяют - он там не нужен. При написании кода нужно помнить, что код мы пишем для других людей, а не для себя, написать на 3 строчки кода может дать намного больше для понимания, чем запутанная колбаса из обсерверов.
@@nexgenua Согласен. Но даже в малых проектах, rx позволяет стандартизировать подход для решения типовых задач. Так код становится ещё проще и решения более ожидаемые. Колбасы из обсерверов решаем рефакторингом.
@@nexgenua я бы сказал, что так нужно обращаться со всеми технологиями
Дружище, объясни на пальцах, где эту хереобору применять? Где без неё не обойтись?
Владилне, очень хотелось бы увидеть уроки по google apps scripts в Вашем исполнении. Мне нравится что делает labnol но прям в какой-то момент не возможно его смотреть становится.
Поч ты не рассказал, что это за библиотека, и зачем она нужна, а просто начал код писать?
Примеры будут позже
Это видео не для джунов. RxJS это библиотека реактивного программирования, в которой используются принципы функционального программирования. Поэтому для начала необходимо изучить его.
По коду понятно для чего она и зачем) ну и Гугл знает всея если его спросить)
Это реально правильный вопрос
@@VladilenMinin прошло 2 года, примеров так и не было...
спасибо за хороший туториал, но почему ни слова было не сказано про изначальное значения value. Типа оно ноль и как будто это само собой разумеется
Respect😉
Thank you Sir
Владилен , скажи пожалуйста что у тебя за плагин для ВС кода , для доп инфы ( показывает где колбек , где ерор хендлер и тд )
это не вс код, он использует Webstorm
В настройках vscode тоже одной галкой настраивается