RXJS Real Examples - 1. How to Use Observables to Manage User Data

Today I’m taking an in-depth look at how I’ve used RXJS to manage user login in my Angular project, powered by Firebase. The focus of this video is how to use RXJS in a real-life example. No knowledge of Angular or Firebase is required.
VIEW THE CODE IN THIS VIDEO:
github.com/bnockles/neverbenb...
(Checkout the Standalone files folder)
INTRODUCTION TO OBSERVABLES
How are observables different from promises?
How to read the RXJS Documentation
• How are Observables Di...
PART 2:
RXJS Operators Explained with Examples: switchMap, map, + More
• RXJS Operators Explain...
CONTENTS:
0:00 - Introduction
1:09 - What are the Vocabulary Words for Observables and RXJS?
2:17 - What needs to happen to manage user login?
3:10 - RXJS Table of Contents
4:34 - What is the Share Operator? What is Share Important?
6:19 - Real life example of RXJS
7:34 - Overview of Class Constructor
9:37 - Anatomy of a Subscription
11:21 - What are RXJS Operators? In-Depth Look at the Pipe
11:26 - What is the RXJS switchMap Operator?
14:06 - What is the RXJS catchError Operator?
14:56 - What is the Difference between an Observable and a Pipe?
18:30 - What is the RXJS retry Operator?
19:23 - What is the RXJS share Operator?
20:02 - What is the purpose of RXJS share?
22:04 - Conclusion
Interested in what I’m developing? Check out theperfectboardgame.com or watch • Find the PERFECT boar...
OFFICIAL DOCUMENTATION
rxjs-dev.firebaseapp.com
MY GEAR
Sony ZV 1
amzn.to/2DXxrRV
Fifine Condenser Recording Microphone (which was unplugged about halfway through this video: sorry!)
amzn.to/2E7bboc

[@marcialabrahantes3369]

where did this guy go?! his content is going to the moon and back

[@lettuceturnipthebeets790]

ikr! it's just awesome how he explains the tough topic, I need more TwT

[@badlegend9443]

Best Rxjs explanation with a relevant use case example, hands-down! Suggestion for the next video: Explaining best practice how to use the user id across other pages while also explaining the trade-off to storing the value in local/session storage VS using activated route VS subscribing and listening to firebase AUTH changes. Bonus would be explaining how subscribing/listening affect the Subscription Metrics in the Firebase Console, Usage tab, Snapshot listeners and Active Connections. No one ever convers this. Still, great work. Much appreciated, keep it up!

[@neverbenbetter8225]

Thank you so much for the suggestions!

[@ahmedouyahya]

I searched in google for real world rxjs example and you got me covered. Really Amazing. Thank you so much.

[@freedom13245]

Thank you so much, amazing explanation on RxJS! So much confusing crash courses and docs on the internet and then, there's this video :D

[@lgiorgos1]

Thanks Ben! I've been waiting for ages for a good video/explanation about rxjs!

[@neverbenbetter8225]

You are very welcome. I have a project that I have been working on since I first learned RxJS. I often get to look back on my old code and some of it is so bad, it looks like I was just guessing. I remember how much time I spent reading and researching, trying to understand what the heck was going on. We would say, “I spent today in RxJS hell again.” And when I watched videos, it seemed like others would just fly through their examples. I had no doubt in my mind that RxJS could be easy, but I had no idea how long it would take to get to that point!

[@warriorfb2010]

Came back to this video again. Telling you, you're instruction is extremely valuable and I really appreciate your help!

[@DeepakSingh-hl3er]

Its amazing skill to explain a seemingly complex topic in such an easy language.

[@Kate-qd5lr]

You should definitely create more videos on RxJS. Explanations are very good and helped me a lot.

[@utsavagrawal2995]

awesome explanation.. Would love to see such type of real life example videos.. it clears lots of concepts.. thank you !

[@warriorfb2010]

Excellent explanations! You're very good at instructing.

[@SuperToughnut]

Thank you so much for your very thorough videos. I would like so much to see a video from you on an explanation of all operators. There are so many.

[@rafiktaamma9959]

Thank you sir , finally i understood how really to use them . please keep this good work.

[@pugbread2873]

Thank you, this is exactly what I was looking for, awesome job!

[@GustavoFernandes0]

How have I not seen your videos before??? What a great explanation, visuals, oratory... I feel like I'm in a classroom environment again. Of course, with the best teacher and subject 😄 I will subscribe and watch your videos. Thanks for sharing. Greetings from Portugal!

[@user-co6zt2yc3v]

Everyone should explain concepts in this manner - my 9 year old now knows Observables! Awesome job!

[@neverbenbetter8225]

Thank you so much!

[@Riya-gk6yk]

I really loved you explanation using real life examples. Please make an angular series where you use firebase service like. Authentication, firestore , storage etc)

[@Manifibell]

I have been struggeling all day with trying to subscribe to a constant Subject, each time an input changes. And what ever I did, I could not get the observable to hit next/complete after the first emission. I think the trick to what I want is share! Also, these videos on rxjs you have made are amazing! It is so clear to me now! :D

[@ashwanikumar183]

This is really amazing explanation. waiting for your new videos to get uploaded.

[@nesho9358]

Great video, would love more content like this :)

[@ricko13]

The only man in the whole internet/youtube making a real world example, not like the others making the f#cking "counter example" one. #MEGALIKE to this video.

[@leonndeveloper2000]

And that's it bro, I was trying to think how I can use observables, and its perfect explanation If you really want to take the best you have to use realtime database, there is no another option. But its stupid because its the only way that really matters, using observables for a backen http calls it doesnt have sense

[@raulalvarado7025]

Best RxJs video!!

[@supergamerfr]

Keep it up much needed

[@riccardomassafaidatech]

Thank you, great explanation!

[@jorgen180]

Great tutorial, thnx!

[@OlehBiblyi]

Thank you, please, do more videos about RxJs.

[@Stevercakes]

Thank you for sharing this, broke down RxJS to me. Also thank you for sharing the code used in the example so it's easier to process. Hard to find actual examples as you've stated. Were you still planning on making more RXJS example videos?

[@toddzmijewski6002]

I find it surprising you never mentioned streams. All docs for RxJS reference the data emitted/progressing through the pipeline as a stream. I would also consider it cleaner to use a iif operator for conditionals. That being said I applaud the success explaining rxjs. You did a great job. The analogy you used was clever. I even learned something. I learned about the share operator. Never used that operator.

[@neverbenbetter8225]

I really appreciate the feedback. To tell the truth, I am not an RxJS expert by any means, but I do have been teaching for a long time.

[@toddzmijewski6002]

@@neverbenbetter8225 No one is a RxJS expert. I wrote code a few months ago I can barely follow now. There is only a small subset of operations I use on a daily basis. Others I go forever without using. One of those lately seems to be iif. Using iif just looks so much more elegant than a standard conditional. Stringing together a bunch of reactive operators is just so much fun when it works.

[@Amarprem1000]

Thnks sir, seriously it's very helpful 😇

[@neverbenbetter8225]

You are very welcome!

[@Asaloy]

Nice to see an other board game addicted :D

[@kavehkarami6135]

Very useful video

[@FranklyTerrible]

At 13:40 you shouldn't use 'of(null)'. Generally speaking, using null as part of your logic is code-smell. If you wish to return an observable to skip or get out of a process, there is the EMPTY Observable. But otherwise, this has been a very entertaining and overall great video.

[@neverbenbetter8225]

Thank you!

[@RickyBanerjee]

Thanks for the video. Very helpful. Can you do a video on Behaviour subject, observable and async pipe ?

[@neverbenbetter8225]

Thank you for the very specific request. Yes. I will put something together.

[@matheussoares1138]

Wow thanks a lot!!

[@nerdiloo9863]

Very cool. Could you demo how to display an error message (in the catchError) to the web page (vs console log), from a service or interceptor? Good stuff.

[@neverbenbetter8225]

Thank you for the suggestion. I will try putting something together.

[@hansschenker]

It is a little bit strange to see if else inside an operator! Since RxJs is a Functional Reactive Library - you should also write your code in a functional style. If does not exist in a pure functional programming language. If is replaced with filter! Anyways thank's a lot for having choosen a real life sample and well presented in public. (I would replace the soldier metaphor with just a box with a ingoing arrow at the left side and an outgoing arrow at the right side - this box stands for a function with an input and an output, both beeing an observable. you can treat operators like being a function)

[@neverbenbetter8225]

Thank you for the tips. I don’t have a functional programming background, so the style is not familiar to me.

[@wiliam334]

That was very good. Ta

[@kjmoses8546]

I like literally everything u do .. And what microphone and camera name u use .. Just so i would one day have one..and i need ur suggestion .. Can i use them for short action movies

[@theoriginite7440]

Please make video on angular core topics such as services and also state management in angular( using auth) please please please please please please 🙏🙏🙏🙏🙏🙏🙏

[@fabioscognamiglio9281]

Hi and congratulations for the video, well done. One thing is not clear to me (not only one but it's ok for now ;) in the catchError() who consumes the throws in case of new errors?

[@neverbenbetter8225]

The retry will catch it. In fact, it’s the only reason I put it there. The retry was actually more important while I was debugging. It isn’t really necessary anymore. IF it retries and STILL throws an error, it won’t be caught and the subscription will terminate on error.

[@MichaelScharf]

Why are you not handling the catch of the createUser promise?

[@irundil8253]

top

[@rnilu86]

What browser are you using?

[@neverbenbetter8225]

In this video I was using Safari on my Mac.

[@JBuchmann]

Ugh... it seems like as of now you cannot "pipe" onto this.auth.user. Any block of code inside the pipe will have red underline in VS Code with crazy "typing-related" errors which I can't overcome.

[@MichaelSalo]

Why is observing an observable called 'subscribe' instead of 'observe'?

[@goosemoose1213]

why do ppl use subscribe on apiServices, when most of those api just returns a value and thats it? wouldn't it make more sense to use observables on a listener from the backend like web sockets, and just use simple promises on most apis?

[@neverbenbetter8225]

I understand your question because it’s something I couldn’t understand myself initially. Subscriptions are useful for changing values. They keep your frontend up to date with the latest information. Think about a Twitter feed or your messaging app. Those updates are prompted by the server, not the client. In the example for this video, the user can log in and log out to change the authentication. That IS initiated by the client, so it might not be the best example, but if I want every element to be updated when that change is made, I can use a subscription to do it with greater ease.

[@toddzmijewski6002]

Promises are resolved and done. Observables can emit a stream of values. Observables in the context of RxJS can be used with operators to change the stream without a bunch of nested callbacks. Observables facilitate async programming that can more easily be manipulated, transformed, changed. There are more advantages to thinking in terms of communications between who functions in terms of async programming than synchronous. Synchronous operations must always return a value in the same cycle. Async operations can return values anytime while the program is running. Reactive programming is responding to action that can occur at any time. That is far more powerful than responding to values that need to be returned immediately. Especially when it comes to front-end development in the client which is naturally an async environment.

[@reefhound9902]

@@toddzmijewski6002 Promises are async. Observable vs Promise is not about async vs sync.

[@mayankk2800]

Where are you

[@raulrothschild5876]

Wtf is that ?. operator?

[@iulicush86]

It's pretty sad seeing someone teaching rxjs, but subscribes to observables in a service. Dont know how useful is the operators' explanation, i stopped as soon as i saw that subscribe there

[@neverbenbetter8225]

Would you please explain why that is problematic?