Creating Awesome UX with Observables
summary
Shows concrete demos and tradeoffs rather than theory: uses observables to implement a GitHub image type‑ahead with switchMap and debouncing and a live loading state, builds an xkcd numeric search that ends up implemented with Hooks instead of extra libraries, recreates a password verifier where submit state sometimes gets stuck, and a drag‑and‑drop dragon done in under 40 lines using the HTML drag and drop API — mostly working but debounce and submit edge cases require care.
AI-written summary · about
chapters (35)
- 0:00Intro
- 0:39GOALS TODAY
- 1:23FLIP IT GOOD
- 1:44MOTIVATION
- 2:27OBSERVABLES IN THE WILD
- 3:24DIAGRAM
- 4:10LIKE MOVIES
- 4:43COLLECTION?
- 5:18AWESOME USER EXPERIENCES
- 5:36DESIGN GOATS GOALS
- 5:48METHOD
- 6:12ANTICIPATORY DESIGN
- 6:38FUN FACT
- 6:59STREAM TYPES
- 7:33STREAM LIBRARIES
- 7:59STREAMING DATA
- 8:35STREAMING EVENTS
- 8:52MANY IMPLEMENTATIONS
- 9:28SMOOTH OPERATORS
- 9:58TYPEAHEAD SEARCH
- 10:24TYPEAHEAD REQUIREMENTS
- 10:57JUST JAVASCRIPT...?
- 11:19MIGHT GET COMPLICATED
- 13:04STREAM PATTERN
- 13:29WHAT ABOUT HOOKS...?
- 14:01DEMO TIME AGAIN
- 15:01THE OBSERVER
- 15:46PASSWORD CHECKER
- 17:16JUST HOOKS
- 17:41THE TESTS
- 17:51THE GOTCHA
- 18:39DROPPIN' DRAGONS
- 19:05SIMPLEST VERSION
- 19:35MINIMAL - DEMO ONLY
- 19:53CONCLUSIONS
related talks
26mReactive Programming Future Proof Your Code
54mReactive Angular 2
01h 45mRxJs from Scratch
34mObservables for Handling Asynchrony Elegantly
34mOperate Heavily Dynamic UIs with RxJS
37mReactive Programming with RxJS
41mRefactoring from Callback Hell to Observables – Live Coding in TS
59mMobX and the unique symbiosis of predictability and speed