RxJs - Stream Analogs in Real Life (2021)

RxJs isn't easy for beginners and definitely requires some shift in the way you think about your data and how this data flows in your application, it is also known as "think reactively". Things like: Why I should always unsubscribe from a stream, why I should keep my data in a stream as much as possible, etc are not always obvious especially when you started with RxJs not so long time ago. Those questions were bothering me for some time until I started looking for stream analogs in real life... and I found it! After that, many things became obvious to me and I started to understand better things I build with RxJs. I hope you will also find it useful. Thank you for watching!
🔥 -15% OFF For All My Courses 🔥
🔥 Use coupon: KZbin_DISCOUNT during the purchase 🔥
⭐ Successful Interview "Angular Interview Hacking" course
courses.decodedfrontend.io/co...
⭐ Become a Pro in Angular Material Theming
bit.ly/angular-material-themi...
⭐ Blazing fast GraphQL Backend just in 1 Day with Hasura Engine
bit.ly/complete-hasura-course
🕒 Time Codes:
00:00:00 - Intro;
00:02:15 - Main Part;
00:11:06 - Outro;
#rxjs #angular #webdevelopment

[@DecodedFrontend]

If you have Angular interview anytime soon, the best way to prepare for it is Mock-Interview! In my new course "Angular Interview Hacking" you can get an option to have a mock interview with Google Developer Expert in Angular and get access to a constantly growing database of the most popular Angular interview questions and detailed answers! Check this out here: courses.decodedfrontend.io/courses/angular-interview-hacking

[@denisbielishev]

In my opinion it is the best way to explain how it works. I always try to do the same with my colleagues.

[@a.c.vermillion]

Discovered this analogy a year or so ago and since then everything made sense with RxJs, can't look back. Great video!

[@patrickcameron2950]

Great video and great analogy with the pipes. Thank you!

[@b1onic98]

Keep up the good work, I love the visualization, it helps a lot in learning and i get it now. Thank you so much.

[@omkarbandkar6065]

Your content is always awesome and above average. Keep the content coming ❤️

[@critory1049]

This is a very good explanation! Thank you!

[@Nabulio85]

very nice analogy, you are talented

[@markusingvarsson2146]

Great video! Thank you!

[@sanketjain7788]

Really grateful to you! Thank you!

[@alsaeedfayed2658]

This is extremely awesome !!

[@vinodsharma-ok1mv]

Love your unique way to teach...

[@kenanareda2923]

I wish that I knew this amazing video before! Big thank for this richful explanation!

[@anjalitanpure6310]

You have explained in a best possible way using real life example. Watched your most of the videos, you explained everthing really good and in easy manner. Thank you.

[@krishnachaitanya102]

WOW... What an analogy. Really appreciated for analogy😀

[@narainsankar]

Wow.. it was the best explanation I ever heard. Thanks for this beautiful content.

[@romaknocks7986]

Thanks a lot for your work man!

[@AmarSingh-uw1db]

Yes, this helped me so much for understanding rxjs. Gratitude Sir🙌🙌

[@RaviKumar-im7kg]

Awesome way of explanation 🙂 with real time situation 🔥 keep rocking

[@dmitryaronov8197]

It was really nice explanation! Дуже гарно пояснив)

[@Valdemar268]

Cool and useful explanation, thank you!

[@ahmedsokar2909]

keep going with this important topic plz.. thanks a lot

[@vasylsidelnyk2776]

Best explanation ever seen before.

[@titokris5162]

Great methodology and visualization. To me you nailed and passed the different use cases and above all it's understanding!!! Thanks

[@DecodedFrontend]

You're very welcome!

[@nickkulmann]

Супер. Этот образ с водой и краном именно так как я сам себе представлял Observables, но Вы конечно все максимально наглядно на схемах нарисовали. Спасибо большое.

[@ugochukwuumerie6378]

Wow amazing stuff. I can literally now visualise the concepts whilst working with rxjs. Thanks for this wonderful video

[@DecodedFrontend]

You're very welcome!

[@awabalbaalbaky3508]

You are really amazing, keep going 👍

[@dealswithtechtuber2400]

Yes definitely. Helpful.

[@andrewarosario]

Amazing examples! Great work!

[@DecodedFrontend]

Thank you! 😃

[@oleksandrvoron_ko580]

Very well explanation, which ever had seen and also thanks for the today's meeting about Reactive Form)

[@DecodedFrontend]

Hi Oleksandr! Thank you for you feedback:) glad you liked the today’s talk 😉

[@rezaerabby1097]

wow, thanks , this is probably the best explanation ever

[@DecodedFrontend]

Glad you like it 😉

[@elisaschnabel1811]

Great video and great visualization! I will recommend this video to my apprentices!

[@DecodedFrontend]

Thanks a lot, Elisa!

[@krisnarusdiono1304]

the way you represent rxjs stream is BRILLIANT! ... anyone should know your channel buds especially for people who's learning Angular

[@DecodedFrontend]

Thank you! :)

[@balajeebala7810]

You are the best 🔥♥️

[@RamKumar-es3mp]

Really great content .Please do more examples.

[@mohamadborzouei4711]

Good job. I think this is the simplest way to explain streams.

[@rougeassasign]

yes !!! More of these please. Streams are still not clear for me.

[@malenalucero6473]

I found it really useful! Rxjs is still very difficult for me to understand because I tend to see data as something static that should not be mutated and when I use observables y want them to RETURN something I can work with when the request is finished but that's not how observables work and I know it but I still don't feel comfortable with the concept of streams, so this was great and I hope you can make more videos with real usage examples of Rxjs in Angular. Thank you!

[@DecodedFrontend]

Thank you for your feedback! :) I am glad to hear that you liked this idea. If audience finds this way of rxjs explanation also useful I will do more videos about some specific rxjs operators using analogs from real life :)

[@Manuel-fp6ni]

great job! thank you from Perú!!!

[@bukanaka]

Отличный пример. До этого визуализировал себе поток как массив с данными, но с водопроводной трубой всё стало ещё глубже к пониманию.

[@DecodedFrontend]

Рад слышать :) массив данных тоже хороший пример на самом деле.

[@krunalkamble1833]

Excellent

[@Rajesh_Me]

Crazy and realistic example of water connection in house building. Always loved your content. const stream$ = of('water') 😀

[@otmanm4095]

Greeaaaat video !

[@Moewie]

insanely good example

[@RAJU9622]

Excellent explanation

[@DecodedFrontend]

Glad you liked it

[@ariMuayad]

Thank you, always with the best content. You're spoiling your viewers. Can you create deep dipe videos into rxjs.

[@DecodedFrontend]

Haha :) Hope not so much... Regarding rxjs deep dive not sure so far but let's see ;)

[@halynaua]

wow:) thank you

[@user-yr9mz4lg8z]

nice explanation, can you explain in detail about ag-grid

[@amar-iby]

The best !

[@aleksandrm3466]

Thank you very much, super topic. It would be very interesting to see more examples with operators. For example, you can start with simple examples of processing events and sending data... Preferably real examples from projects.

[@DecodedFrontend]

Next vid will be exactly about that, so stay tuned ;)

[@swapnasaritnayak2569]

Awesome .

[@SheriffZmroka]

Amazing video. But I would love to see it in the form of an article. Well, more deeply about mental models.

[@georgimollov]

I have always imagine streams like electricity flow through power lines but struggled with operators. Watching your video kinda make me think for operators like electrical elements that transfor the electricity. But realized maybe pipes and water is more helpful. Good video as always

[@DecodedFrontend]

Yeah.. electricity is also fine but agree that it is harder :) In order to explain operators there, you need some knowledge about transistors, resistors, etc which might act as operators but I am not good in this area, so I might be wrong 😀

[@innocentmazando3808]

This is one perfect description of streams, if only I learnt this earlier I would have suffered less :) Thanks @Decoded Froontend

[@DecodedFrontend]

Thanks for feedback:) Glad that it was helpful!

[@mrthefankyy]

Need a course about RxJs with your explanation ;)

[@DecodedFrontend]

got you :)

[@pranavsarang]

Please make video on how actually shadow dom works generally in angular and how it is different from real dom and virtual dom

[@syedfamily1]

thanks x 100

[@alexshubin1]

Funny! And I was imagine marble diagrams like there is a gun that shots with portion of data )))

[@DecodedFrontend]

How do you imagine streams? Do you also use analogs from real life or for you marble diagrams are just enough? :)

[@p.s29]

Yeah. I use lake as a reference. Hehe. :)

[@DecodedFrontend]

yeeeah! Good one as well ;)

[@user-ny4yt1kf9v]

I think about potato, when write in rxjs, is it fine?

[@DecodedFrontend]

@@user-ny4yt1kf9v absolutely 😄

[@Moelgaard85]

The one that did if for me back in the days was thinking of it as subscribing to a newsletter. They well keep arriving for example once a week as long as I am subscribed. When i unsubscribe they stop arrive. And if nobody is subscribed to the newsletter, nothing is sent out / nothing happens.

[@filipslezak5152]

I was just implementing debounced search in react with rxjs. What is this magical timing :d

[@DecodedFrontend]

It was also one of the first things I have implemented with rxjs 😄

[@manuff11]

Love u bro

[@vimhub]

I miss your content sir..

[@F.C.Poet_]

it helps )

[@yapayzeka]

7:15 I think release air effects stream. not good example. maybe you measure the water temperature and log it. that would be a very proper "tap" case.

[@AnamikaSingh-qf8su]

When do one use Promise vs Observables

[@denns0r]

That was actually great for understanding RXJS! But I somewhat disagree with the Promise addition. Most of the time I simply want to get or post data to an api. I do not need a stream for that, because it's a one-time thing. Unless I want to be able to cancel the ongoing request of course (which is also possible with promises, but kind of ugly). In my applications, there is not much data actually that is "streaming" into my application. It's more "get-data, show data, change data, send data" scenarios. So I end up in using Promises, Promise.all() and using async/await which makes my code way more synchronously readable than using streams. But that's maybe only my perspective 🤷‍♂️

[@p.s29]

Yeah, I also agree with using async/await when you know the observable will emit single data (httpClient, etc). It makes the code more readable and the control is returned to the main function after the sub function is executed..

[@GrupoSSMC]

The video is very interesting, but how can I apply this if I have an endpoint made with webflux that returns a content-type of text/event-stream?

[@JmonteroArg]

I really like this mental model for understanding RxJS. However it becomes very difficult to visualise some of the advanced operators using the water pipe analogy. Maybe for that kind of scenarios is better o think about it as a factory conveyor belt with parts (parts being the water and the conveyor belt being the pipe) that require special threatments and have time constraints, etc.

[@DecodedFrontend]

Hi Joseph! You are absolutely right, some other models describe better other parts of rxjs. I also use many others like “the road and cars” or the one you described as well :) the model from the video was just the fist one I recognized and which helped me the most and after that things got easier:)

[@rahultej8352]

❤❤❤

[@zzing]

I think using the $ on waterPipes$ would be out of convention given it isn't actually an observable.

[@Rob34570]

I suspect he added .subscribe later on and didn’t remove the $, as now it would be returning the subscription object as you pointed out.

[@bukanaka]

Не оставляйте краник открытым)

[@DecodedFrontend]

:D

[@SergeyLevandovski]

Promise = grab bucket and get water from well )

[@bukanaka]

Граф Ке Ле 😂😂

[@DecodedFrontend]

Можно уже нарезку делать из переводов 😂

[@LeiferMendez]