Complex Features Made Easy With RxJS

on YouTube ↗36m

" summary

Angular + RxJS code adds an automatic polling reload via timer and a pull down to update UI that coordinates touchstart/touchmove/touchend events, HTTP (shared get()), animations (tween on animation frames) and state. Implementation uses BehaviorSubject to trigger loads, switchMap/exhaustMap to manage requests, concat/repeat to replay flow, and takeUntil/endWith to stop spinners — the full feature composes reactively in about 50 lines of code instead of a brittle imperative mess.

AI-written summary · about

" chapters (14)

1. 0:00Intro
2. 1:15Observables
3. 11:12App Structure
4. 13:29Update Interval
5. 17:27Pulldown to Reload
6. 21:20Transform Positions
7. 22:58Touch Drag
8. 24:53Animation
9. 27:40Refresh
10. 29:02Position
11. 30:37Repeat
12. 31:24Rotation
13. 32:06Spinning
14. 33:34Summary

" related talks

• 45mReactive Frontends with RxJS and AngularSergi Almar · Voxxed Days Singapore 2018
• 36mRxJS: A Better Way to Write Frontend ApplicationsHannah Howard · JSConf US 2018
• 54mReactive Angular 2Rob Wormald · Jazoon TechDays Spring 2016 Bern
• 27mPractice Makes Perfect: RxJSJan Niklas Wortmann · AngularNL 2020
• 36mRxJS RecipesDominic Elm, Kwinten Pisman · Uphill Conf 2019
• 58mAngular and The Case for RxJSSandi Barr · NDC London 2020
• 44m7 recipes with Angular and RxJSLamis Chebbi · JSWorld Conference 2021
• 37mReactive Programming with RxJSShmuela Jacobs · ReactiveConf 2017