RxJS Быстрый курс - Реактивное программирование на JavaScript [2020]

Поділитися
Вставка
  • Опубліковано 25 чер 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

КОМЕНТАРІ • 311

  • @andmak4795
    @andmak4795 4 роки тому +17

    Я вот так подумал - я лайкаю все, что смотрю. Подписка есть. Колокольчик тоже)) Курсы смотрел, купил. Главное, что бы Влад не выдохся и не забил на канал. Вдохновения, мотивации, больше практических курсов(можно даже платных), ну и побольше кеша, после проделаной работы, тебе. ))

    • @VladilenMinin
      @VladilenMinin  4 роки тому +1

      Благодарю за отзыв :)
      Канал не заброшу, слишком много идей и мыслей по контенту!
      Скоро будет практический курс бесплатно тут)
      По кешу да, если есть такой посыл, то буду рад любым донатам в ВК или на патреоне

  • @VladilenMinin
    @VladilenMinin  3 роки тому +6

    В описании к ролику вы найдете ссылку на плейлист с практикой и реальным применением RxJS
    Приятного просмотра)

    • @musheghzakaryan6616
      @musheghzakaryan6616 2 роки тому

      Спасибо за уроки. У вас нету уроков для NgRX?

  • @rinatvaliullov3247
    @rinatvaliullov3247 4 роки тому

    ОГОНЬ!!! Жду курса с нетерпением.

  • @volodymyrhovorun760
    @volodymyrhovorun760 4 роки тому +6

    Просто пушка, а не контент. Спасибо огромное!)

  • @sainmorton
    @sainmorton 3 роки тому +2

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

  • @YuretsUA
    @YuretsUA 3 роки тому +12

    Огромное спасибо за видос, очень помог в прохождении тестового задания. Видео открыл после того, как увидел технологию в интересующей вакансии, думаю "А что такое rxjs", через несколько часов прилетело тестовое задание "Обязательно используйте rxjs и Observables" Подумал, ну все, ласты, хз как его сделать. Но после ознакомления по видео, и десятка статей и решений в интернете к вечеру задание уже выполнил, и спокойно себе выбирал стили для кнопочек и отступы. Образование через youtube имеет свои плоды. Спасибо за ваш труд!

    • @arthurcode4225
      @arthurcode4225 3 роки тому +1

      Аналогичная ситуация! Пришел ответ от компании с тз где нужно юзать rxjs, сижу, зубрю)

    • @nikitatudakov4239
      @nikitatudakov4239 3 роки тому +1

      @@YuretsUA подскажите как вы реализовали остановку?)

  • @hasst9261
    @hasst9261 4 роки тому +10

    Я тащусь, Ваш труд бесценен!

  • @eugeniuszjarocki109
    @eugeniuszjarocki109 4 роки тому +2

    Спасибо за качественное видео! Все основные моменты RxJS описаны очень доходчиво и с понятными примерами!

  • @user-te7nc6db8u
    @user-te7nc6db8u 4 роки тому +5

    Отличный урок! Максимум информации про RxJS всего за 1 час. Очень продуктивное видео, как всегда Владилен на высоте. Спасибо, было очень ценно для меня!

  • @user-wm1pw7oz9b
    @user-wm1pw7oz9b 4 роки тому +2

    Все как всегда по делу и без воды. Благодарю

  • @iquz_intellectual_games
    @iquz_intellectual_games 4 роки тому

    Владилен, спасибо вам за труд, делайте еще, будем смотреть)

  • @user-el9mw8kv5x
    @user-el9mw8kv5x 4 роки тому +2

    Супер, как всегда) большое спасибо!)

  • @dianabohomoliuk9191
    @dianabohomoliuk9191 4 роки тому

    Браво! Много уроков смотрела и читала статьи, но только тут всё понятно стало)

  • @VladilenMinin
    @VladilenMinin  4 роки тому +16

    Посмотри на RxJS в практике в полном курсе по Angular 8:
    clc.to/angular

    • @user-iu4jv2dw1o
      @user-iu4jv2dw1o 4 роки тому +2

      полный курс не содержит секции про тестирование

    • @VladilenMinin
      @VladilenMinin  4 роки тому +4

      Дима Танасийчук к концу месяца добавлю большую секцию

  • @dmitry_orlov
    @dmitry_orlov 4 роки тому +2

    Спасибо за видео. Вы сохранили моё время и нервы

  • @Nafiganado
    @Nafiganado 3 роки тому

    Лаконично и по существу. Браво!

  • @user-bp3vk3uj8h
    @user-bp3vk3uj8h 2 роки тому +2

    Спасибо, как всегда отличное видео!
    Было бы здорово увидеть rx на живых примерах.

  • @StOksana
    @StOksana 4 роки тому +1

    Максимально ясно и доступно. Спасибо!

  • @alexgrinberg1888
    @alexgrinberg1888 3 роки тому

    Great course. Please do more such valuable courses in the future. Thanks, Vladilen!

  • @motionrus3828
    @motionrus3828 4 роки тому

    Спасибо огромное, я очень рад что нашел твой канал) Очень классно объясняешь!

  • @user-il1dr9wi8h
    @user-il1dr9wi8h Рік тому

    Спасибо за контент, помог сформировать понимание концепции rxjs и выполнить первую связанную с этим задачу)

  • @Jetixxxxxxxxxx
    @Jetixxxxxxxxxx Рік тому +10

    На самом деле, это одно из лучших видео с объяснением RxJS, парни, кому не понятно, не расстраивайтесь, тема сложная я сюда с официальной доки и хабра-статей пришёл и только более-менее стало понятно, что к чему. Нужно переварить просто, повторить ручками.

  • @user-zs7kr6yp2s
    @user-zs7kr6yp2s 4 роки тому +2

    Спасибо за титанический труд !

  • @ladutska
    @ladutska 4 роки тому +6

    Изучил RxJs за 38 минут на скорости 1.5 :D Спасибо!

  • @_Black_Mirror_
    @_Black_Mirror_ 4 роки тому +1

    Спасибо за видос! Как всегда круто

  • @spoonjeee4785
    @spoonjeee4785 4 роки тому +1

    спасибо, от тебя всегда узнаю о годных темах

  • @GreenComet
    @GreenComet 4 роки тому +1

    Отличное видео, до того как его посмотрел RxJS всегда был какой-то магией

  • @ragimabagirova6228
    @ragimabagirova6228 Рік тому

    Спасибо за урок. Самый лучший урок)))

  • @federsrorat8694
    @federsrorat8694 4 роки тому +1

    Thanks a lot! When I was watching this video, I got a much relaxed. Great job!

  • @irinasamokhina6632
    @irinasamokhina6632 4 роки тому +3

    Очень интересно слушать, спасибо! Хотелось бы увидеть материал по оптимизации Angular приложений.

  • @Sergey-mr6be
    @Sergey-mr6be 4 роки тому +1

    Отличный урок. Спасибо!

  • @pipman9007
    @pipman9007 4 роки тому +1

    Супер понятно все рассказал , спасибо !

  • @eduardgrigoryan6052
    @eduardgrigoryan6052 3 місяці тому +1

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

  • @denisejov8632
    @denisejov8632 2 роки тому +1

    Отличное видео, спасибо!

  • @sova_nn
    @sova_nn 4 роки тому

    огромное спасибо за урок! Очень классное видео.

  • @user-si8xh6hk4i
    @user-si8xh6hk4i 4 роки тому +1

    Очень крутое видео, спасибо !

  • @Abdul-hy4cy
    @Abdul-hy4cy Рік тому

    Спасибо за видео Владилен

  • @johnjohhoun1716
    @johnjohhoun1716 Рік тому +6

    Более подробные таймкоды:
    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

  • @ale0x314
    @ale0x314 4 роки тому +1

    Привет, отличный материал по Rx, спасибо

  • @user-vh5kq6pm7e
    @user-vh5kq6pm7e 4 роки тому +2

    Большое спасибо!

  • @TheAzovStar
    @TheAzovStar 4 роки тому +2

    Спасибо за хороший курс.

  • @saveekglushchenko6903
    @saveekglushchenko6903 Рік тому +1

    Спасибо, было интересно и полезно

  • @tartarus2921
    @tartarus2921 4 роки тому

    Спасибо за интересный контент)

  • @sergeykahnwald6640
    @sergeykahnwald6640 3 роки тому

    Спасибо за труд!

  • @user-oz4ef6rf1z
    @user-oz4ef6rf1z 2 роки тому

    Круто подали инфу, спасибо!

  • @vikmac9083
    @vikmac9083 7 місяців тому

    Спасибо, очень хорошее изложение материала.

  • @user-vd9yw5ez3e
    @user-vd9yw5ez3e 4 роки тому

    Супер курсы. Я доволен.

  • @serdardurdyev4963
    @serdardurdyev4963 4 роки тому

    Годно!Молодец!

  • @pandaskeptic2937
    @pandaskeptic2937 4 роки тому +1

    Спасибо за полезное видео. 👍 👍 👍

  • @nodir_latipov
    @nodir_latipov 4 роки тому +1

    Спасибо Владилен

  • @user-ne7fu5lr3z
    @user-ne7fu5lr3z 3 роки тому

    Красавчик !

  • @ismalit
    @ismalit 4 роки тому

    Спасибо, хорошее видео!

  • @user-xg3er7dw8y
    @user-xg3er7dw8y 4 роки тому +1

    Крууутатенюшка ;)

  • @AtlantZ
    @AtlantZ 2 роки тому

    Крутой туториал!

  • @larissasavchenko4101
    @larissasavchenko4101 Рік тому

    Спасибо за курс

  • @018live7
    @018live7 4 роки тому +13

    Ждём видос по NgRx)

    • @user-kq2yo3my9l
      @user-kq2yo3my9l 4 роки тому +1

      небольшой курс по NgRx есть от Владилена. Курсу 3 года, но дает отличное понимание что это за технология) Можешь поискать на coursehunter

    • @018live7
      @018live7 4 роки тому

      @@user-kq2yo3my9l Спасибо

  • @ragnarl.3780
    @ragnarl.3780 4 роки тому +2

    Странно, смотря видео так и не понял что такое pipe оператор. Открыл официальную документацию, прочитал. И, о чудо! сразу все стало понятно!

  • @018live7
    @018live7 4 роки тому +4

    Лучший канал на русском языке, прохожу сейчас твой курс на Udemy по Angular - доступно и понятно, спасибо!

  • @wolrdedit5693
    @wolrdedit5693 2 роки тому

    Спасибо друг!

  • @dobrinyanicitich7514
    @dobrinyanicitich7514 Місяць тому

    Спасибо за видео!

  • @Brometey
    @Brometey 10 місяців тому

    спасибо, очень полезное видео

  • @uaplatformacomua
    @uaplatformacomua 3 роки тому +2

    Спасибо большое! Благодаря Вам и Вашим курсам я ушла с верстки джуном на Ангуляр на хорошую зарплату с большой перспективой. Удачи Вам во всем и спасибо. У Вас самые лучшие уроки по Ангуляру и JS.

    • @user-zj4tk1mh4m
      @user-zj4tk1mh4m 3 роки тому

      Сколько времени заняло освоение Ангуляра? )

    • @uaplatformacomua
      @uaplatformacomua 3 роки тому

      @@user-zj4tk1mh4m я его ещё не освоила. В процессе

    • @user-zj4tk1mh4m
      @user-zj4tk1mh4m 3 роки тому

      @@uaplatformacomua я имею ввиду сколько времени потребовалось чтобы устроиться джуном? От начала изучения Ангуляра до самого трудоустройства )

    • @uaplatformacomua
      @uaplatformacomua 3 роки тому

      @@dnevnikdevstvennika_ на первую работу откликнулась на вакансию в интернете, на вторую попала по предложению в линкедине

    • @olegpristashkin9078
      @olegpristashkin9078 3 роки тому

      у нас есть второй интервал? А зачем два интервала?

  • @user-nb8mi4im8g
    @user-nb8mi4im8g 3 роки тому

    Спасибо! Сразу понятно все стало после просмотра! Ещё state manager надо бы где-то посмотреть

  • @user-zx1bx7qf5e
    @user-zx1bx7qf5e Рік тому

    Очень полезная информация

  • @ihoryanovchyk
    @ihoryanovchyk 4 роки тому

    разобрался, спасибо!

  • @user-zl6gp6lh7h
    @user-zl6gp6lh7h 3 роки тому

    Respect😉

  • @4maxnechaev
    @4maxnechaev 4 роки тому +1

    Хороший урок, спасибо. Хоть каждый день пользуюсь rxjs, но лишний раз послушать разбирающегося человека приятно. Я бы еще добавил takeUntil - очень важная штука для unsubscribe. И чаще используется, чем take, насколько я могу судить

    • @VladilenMinin
      @VladilenMinin  4 роки тому

      Посмотри плейлист на канале с практикой. Там все разобрал

  • @romankorolov3344
    @romankorolov3344 Рік тому

    Спасибо!

  • @vitahvitah5823
    @vitahvitah5823 Рік тому +1

    Спасибо большое...

  • @roman--s
    @roman--s 4 роки тому +5

    Как то мало теории. Просто примеры. Они крутые, но теория как это работает под капотом тоже важно для понимания. В любом случае материал качественный. Спасибо🙂

  • @user-pt6kz3fi1q
    @user-pt6kz3fi1q 4 роки тому +2

    Зачётненько, но с примерами асинхронных запросов, конечно, было бы совсем огонь :)
    Владилен, волшебник ϟ%)

    • @VladilenMinin
      @VladilenMinin  4 роки тому +1

      Велкам! На канале есть плейлист по практике RxJS для разных сценариев. В том числе и асинхронный код

  • @davidbaghdasaryan2486
    @davidbaghdasaryan2486 4 роки тому +12

    Отлично все понятно и четко.
    Больше тем про Angular , кто согласен ?

  • @IngvarLosev
    @IngvarLosev 4 роки тому

    Спасибо !!!

  • @iNikelas
    @iNikelas Рік тому

    Thank you!

  • @user-rg5wh3fx2q
    @user-rg5wh3fx2q 4 роки тому +1

    Спасибо
    Просто комент, чтобы помочь попасть в тренды x)

  • @sergeykriukov9533
    @sergeykriukov9533 3 роки тому

    Владилен, в уроке (23:20) вы говорите, что после обработки ошибки в subscribe() программа выполняется дальше. Но "Value: After 3000 ms" не выводится, т.е. после observer.error('Something went wrong') поток останавливается ?

  • @user-li7ce3fc3z
    @user-li7ce3fc3z 3 роки тому +8

    Типо учить ещё одну библиотеку что бы делать тоже самое

  • @romangrushko6070
    @romangrushko6070 3 роки тому

    Про 3 функции в subscribe повторился😀

  • @__alexfox__
    @__alexfox__ 4 роки тому

    Три месяца назад, я первый раз посмотрел этот видос и нифига не понял. Теперь, когда разобрался и применил rx в паре проектов, не понимаю как жил до него, это очень удобная штука! Спасибо Владилен, ты прокачал мой скилл)))

    • @nexgenua
      @nexgenua 4 роки тому +3

      Самое главное в rxjs не пихать его бездумно в любой проект) Высока вероятность, что в 80% где его применяют - он там не нужен. При написании кода нужно помнить, что код мы пишем для других людей, а не для себя, написать на 3 строчки кода может дать намного больше для понимания, чем запутанная колбаса из обсерверов.

    • @__alexfox__
      @__alexfox__ 4 роки тому

      @@nexgenua Согласен. Но даже в малых проектах, rx позволяет стандартизировать подход для решения типовых задач. Так код становится ещё проще и решения более ожидаемые. Колбасы из обсерверов решаем рефакторингом.

    • @Arctic1987
      @Arctic1987 3 роки тому

      @@nexgenua я бы сказал, что так нужно обращаться со всеми технологиями

    • @yakut54
      @yakut54 2 роки тому

      Дружище, объясни на пальцах, где эту хереобору применять? Где без неё не обойтись?

  • @Renarus
    @Renarus 3 роки тому +5

    Когда я это смотрел в первый раз, мало что понял. Спустя примерно пол года пересмотрел, понимаю, на сколько же код написанный с помощью RxJS элегантный и понятный в сравнению с нативным js. А самое главное, это помогает исключать callback-hell в проектах.

    • @konstantinsurnin855
      @konstantinsurnin855 3 роки тому +3

      промисы в нативе для этого же придумали

    • @user-bp3vk3uj8h
      @user-bp3vk3uj8h 2 роки тому +1

      помимо promise есть даже сахар в виде async await(читабельней некуда), какой колбэк хэл?

  • @user-dd9uy7cy6j
    @user-dd9uy7cy6j 3 роки тому +20

    чет я так и недопонял какую проблему он решает=(

    • @IvanFedulov
      @IvanFedulov 3 роки тому +1

      ловкая манипуляция потоками значений, декомпозиция и переиспользование кода. по сути любую задачу и без rx можно решить - но порой не так лаконично и красиво.

    • @yurizappa268
      @yurizappa268 3 роки тому +1

      Проблема появляется в большом проекте, когда есть куча событий и их обработчиков в разных файлах, а код быстро превращается в спагетти, которое трудно поддерживать. Тут и приходит на выручку правильная архитектура приложения и RxJS как инструмент, позволяющий разделить "спагетти" на автономные модули.

  • @dmitrykarpenko6983
    @dmitrykarpenko6983 4 роки тому +1

    спасибо

  • @SmashLight
    @SmashLight 4 роки тому +31

    Таймкоды:
    1. Применение (0:38)
    2. Создание стримов (14:15)
    3. О 'Subject'ax (34:11)
    4. Об операторах (40:49)

    • @user-rn3et9eh5x
      @user-rn3et9eh5x 2 роки тому +1

      Таймкоды:
      00:00 - Введение
      00:38 - Применение
      14:15 - Создание стримов
      34:11 - Subject
      40:49 - Операторы

  • @user-fg4bu2mw4y
    @user-fg4bu2mw4y 4 роки тому +2

    Владилен, запиши пожалуйста обновленный курс по ngrx. Спасибо.

  • @NikitaJe_
    @NikitaJe_ 2 роки тому

    Thank you Sir

  • @sergey_molchanovsky
    @sergey_molchanovsky 4 роки тому

    Неплохо бы было про Throttle рассказать, штука полезная.

  • @SergeyMenshov
    @SergeyMenshov 3 роки тому +6

    Владилен, огромное вам спасибо! Очень классное погружение в RxJS для тех кто его в глаза никогда не видел.

    • @Maryna768
      @Maryna768 3 роки тому

      поддерживаю

  • @alexgrinberg1888
    @alexgrinberg1888 3 роки тому +2

    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!

  • @syimykamatov8955
    @syimykamatov8955 4 роки тому +1

    Рахмат

  • @fliikc
    @fliikc 2 роки тому +1

    Пасибо

  • @McRay8
    @McRay8 4 роки тому

    Спасибо

  • @andrejkozik9436
    @andrejkozik9436 4 роки тому +1

    Хороший темп.

  • @bekzhan9401
    @bekzhan9401 4 роки тому +1

    можно пользоваться вторым терминалом нажав на плюс слева сверху терминала

  • @user-wf8bu6mt2i
    @user-wf8bu6mt2i 3 роки тому +3

    Круто, зрозуміло, якісно.

  • @SlavaCh
    @SlavaCh 4 роки тому +1

    Владилен, у меня заказ: расскажите про библиотеку lodash, так как вы умеете за час и осветите основные функции и их применение на практике, а то я все ленюсь этим заняться и пишу велосипеда, а затем узнаю что такое есть в lodash)

    • @musicits_fun
      @musicits_fun 4 роки тому +1

      underscorejs.ru/ - заходишь и 80% документации совпадает с lodash, только на русском и там же хорошие примеры. Просто читай сверху вниз и всё.

  • @olegpristashkin9078
    @olegpristashkin9078 3 роки тому +1

    Привет Влад. Что ты понимаешь под stream? Что это понятие из себя представляет?

    • @mihaiciobanu2665
      @mihaiciobanu2665 2 роки тому +1

      Переведи stream на русское слово "поток" и начинай понимать что из себя он представляет.

  • @andmak4795
    @andmak4795 4 роки тому +1

    Влад, есть к тебе вопрос, нужно запилить приложение для телефона( ничего сложного - обновление отчетов по заказам, регистрация, уведомления). Что бы ты выбрал Ionic 4 + Ang VS React Native? Зарание спасибо.

    • @VladilenMinin
      @VladilenMinin  4 роки тому

      Я склоняюсь в сторону React Native
      Скоро по нему как раз буду делать материалы

  • @yakut54
    @yakut54 3 роки тому +3

    нихрена не понял, но очень интересно. чёт хрень какая то за уши притянутая
    .
    на первый взгляд такое мнение складывается... на всякий случай лайк ))

  • @user-jn4sd1dq8x
    @user-jn4sd1dq8x 4 роки тому +6

    Кому интересна концепция стрима, посмотрите видео про "JavaScript Паттерны", а конкретно про паттерн Observer ua-cam.com/video/YJVj4XNASDk/v-deo.html. Там Владилен объясняет как написать свой простенький стрим.

  • @Shkur777
    @Shkur777 4 роки тому

    Владилне, очень хотелось бы увидеть уроки по google apps scripts в Вашем исполнении. Мне нравится что делает labnol но прям в какой-то момент не возможно его смотреть становится.