Get Reactive with RxJS
summary
Explains practical RxJS use with live demos: an observable that emits primes up to 10,000 (subscriber calls next, complete and error terminate the data stream), converting DOM keyup events into a stream, using fromEvent → map → filter, and turning a cold observable hot with a subject/share so multiple subscribers see the same session. Shows backpressure control with debounceTime 500ms and unsubscribe when prime > 5,000. Mentions Angular HTTP using RxJS; all examples run in the browser as shown.
AI-written summary · about
chapters (17)
- 0:00Start
- 5:56Responsiveness
- 9:57Data Flow Computing
- 10:50Streams of Data
- 11:35How Is Reactive Programming Observable Different from the Observable Model
- 12:08Observable Model
- 14:10Exception Handling
- 17:28Rxjs
- 23:38Subscribe Method
- 38:22And Then of Course in this Case It Takes a Break and and Repeat after a Little Time Up Well that's a Good Start Let's See How this Is Going To Work So I Go Back Here to the Subscribe and Call this Method To Subscribe and of Course You Can See that It's It's Counting the Primes and Displaying It along the Way but the Question Is What's Going To Happen if I Click on the Subscribe on the Second One Right Now Well before We Click on It Let's Quickly Take a Look at What the Code Is Actually Doing When You Call Subscribe the Right One It's Going To Call with the Display Two as the Element To Display into
- 40:37Maybe You'Re in Pursuit of the Same Data for Example if You Are Observing the Streets and Maybe There's a Car That's Driving through the Tollbooth and You Trigger a Little Event Maybe this Person Did Not Pay for It and Trying To Escape through and You Want To Start Monitoring this Car Well Clearly You Are Interested in the Same Data at the Same Time You Don't Want a Different Set of Data at that Point So How Do You Deal with but before We Talk about How To Deal with It I Want To Talk about One Thing That's Pretty Darn Cool and that Is You Have an Observable on this End You Got a Subscriber
- 48:12And You Can Imagine if You Want To Monitor Somebody's Mouth Movement You Could Subscribe It as a Stream So Whenever They Move the Mouse Then You Get a Notification as a Subscriber and Depending on How Fast They Move the Mouse and Depending on How Much Coffee They Have Had They Move the Mouse in a Very Different Pace so the Point Really Is You Can Start Mesh You Know Monitoring these Events as Streams and that Kind of Bends the Way You Think about It Which Is Exactly What I'M Going To Do Here but in this Case Using Rxjs so What Can I Do in Rxjs for that So I'M Going To Say Get Keyboard
- 51:28Well Let's See if that Works Actually So Let's Get Back Here and Do Click on the Subscribe Function and of Course It Says Type Something and I Say Abc and You Can See that Whatever I Type Here It Is Displaying Right There So Here's the Subscribe Abcd and You Can See that Being Displayed Right There so We Turn that into a Little Event through the Observable but My Goal Was To Show You about Error Handling How Do We Handle the Error Well To Understand How We Can Handle the Error Let's Get Back to this Little Example and Play with It Again
- 51:54How Do We Handle the Error Well To Understand How We Can Handle the Error Let's Get Back to this Little Example and Play with It Again So I Go Back Over Here and I Say Well if the First of all I Have a Key on My Hand So Let's Say Left Key Equals Event Dot Let's Say Key and Then I'M Going To Return the Key Given to Me so no Difference Just a Little Refactoring up the Code Right There Just a Little Change to It so Abc Again You Can See that It Works but I'M Going To Then Say F
- 53:44It's Not Going To Respond at this Point because Error Came through the Error Channel That Data Channel Shuts Up There's Nothing Coming Through after that so that Is an Example of How We Can Deal with Errors As Well Very Nicely but I Did Mention that a Beautiful Transformation in Shoes from Here so a Little Circuit Breaker Concept You Saw but I Want To Talk about the Filter and the Map Functions Very Nicely this Is One of the Beautiful Characters Up Here I'M Going To Remove that Error Handling for a Minute Let's Come Back to this Code but the Beauty Is I Can Do a Dark Filter and I Can Say Given a Key Tell Me that the Key Is Not Equal to the Letter Z
- 55:22And in this Case I Said I Want To Start Filtering the Data along the Way and I'M Also Going To Start Really Doing Processing along the Way Where I Can Transform the Data and We Can Do some Really Wonderful Things with It That Again Comes into a Very Powerful Scenario Well the Last Thing I Want To Talk about Here Is One Other Concern Which Is Back Pressure Well the Reality Is that You Are Going To Have Emitter That's Emitting the Data the Observable You Have Observers That Are Processing It but the Reality Though Is There Are Times When You Are Maybe Not As Fast in Processing as the Data Is Being Emitted Well What Do You Do in that Case Well You CanNot Obviously Be Forced To Work any Faster
- 56:40You Can Vary Your Processing There Are Other Solutions like for Example the Bounds and Throttle Which Will Allow You To Decide How Many Requests and Responses You Want To Process and the Bound Says I Don't Want To Send any More than a Certain Request in a Given Amount of Time and if There's a Response That's Happening Right Now and I'Ll Let the Time Pass and So I Send the Next Request Throttle on the Other Hand Says within a Given Time You Can Only Do this Much Amount of Work and if You'Ve Done More than that Then Wait until the Time Elapses To Do the Next Piece of Work You Can Decide Based on What You'Re Trying To Do What You Are Interested in Handling
related talks
50mReactive Programming with RxJS, introduction to CycleJS
36mIntroduction to RxJS
42mMake Your Frontend Reactive with RxJs
32mMastering Reactive Programming with RxJS
26mReactive Programming Future Proof Your Code
42mReactive JavaScript with RxJS
37mFrom Zero to Hero with the Reactive Extensions for JavaScript
25mRxJS all things!