Exploiting Unidirectional Data Flow to the Fullest
summary
Adds column resize handles to a Quasar QTable by treating DOM mutations as side effects of a single reactive state, using Vue refs, querySelector-based helpers, window resize and mouse events, and localStorage for persistence. The claim: switching to unidirectional data flow yields a single impure render function that is idempotent, testable with jsdom, and far easier to debug. Outcome: redo takes two days instead of two weeks plus fixes, fixes scaling across displays, and users stop voting to remove the feature.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:51What is a CRM system
- 3:21Missing column resizing
- 4:48Naive implementation
- 9:21Bugs and scaling issues
- 13:22Decision to rewrite
- 15:54Unidirectional data flow
- 17:01Applying unidirectional flow
- 22:23Code walkthrough
- 23:47Live demo of fix
- 25:10Results and benefits
- 27:38When to use this approach
- 32:35Q&A
related talks
34mFunctional UIs and Unidirectional Dataflow
31mApplying Unidirectional Data Flow Beyond the ReactJS Ecosystem
44mData Management in Vue
45mHow to Manage Your UI State: Virtual DOM and RxJS
13mHow we learned the hard why following a flux pattern matters
31mAmazing threesome, rrr... React. Redux. Real world
30mReact: Rethinking best practices
29mNew Trends in Front-End Development (and What We Can Learn from them)