Adding Reactivity to your Web Apps using RxJS
summary
Adds a timed auto-refresh and a working drag down to refresh to an Angular app using RxJS. Builds a TouchDragToLoad component that wires touchstart/touchmove/touchend via fromEvent, derives positions, uses behavior subject + timer to trigger reloads, uses defer, concat, takeWhile, repeat and an animation tween observable to spin and animate home, shares HTTP observables to avoid duplicate requests, fits the feature into roughly 50 lines of reactive code, and the demo works end-to-end.
AI-written summary · about
chapters (7)
- 0:00Introduction to RxJS
- 11:53Analyzing the base application
- 15:15Implementing auto-refresh
- 20:30Building the UI component
- 27:34Adding touch interaction
- 35:45Completing the feature
- 42:41Conclusion and Q&A
related talks
28mReactive Programming Demystified Drink the Kool-Aid
27mPractice Makes Perfect: RxJS
36mRxJS: A Better Way to Write Frontend Applications
43mAdvanced patterns in RxJS - Operating heavily dynamic UI’s with RxJS
45mRxJS 5 In Modern Web Applications
42mMake Your Frontend Reactive with RxJs
30mRxJS in React, RxJS in Angular and Why We Should All Be Friends
36mFunctional reactive UI with JavaScript