Home▸Computer Science▸MVVM Data-Binding Glitch: Diamond Dependency Propagation

MVVM Data-Binding Glitch: Diamond Dependency Propagation

Interactive 3D simulator of a reactive data-binding graph (Model → ViewModel → View). Toggle naive push propagation against topological-order evaluation and watch the classic diamond-dependency glitch appear and disappear live.

Computer Science3DModerate60 FPS📱 Mobile-adapted⇄ 2D version

Mobile app architectures like MVVM and Clean Architecture route state through an observer graph: Model changes push through derived ViewModel properties into View bindings. This simulator renders that dependency graph in 3D — a Model node feeding two independent derived properties that a single View binding reads from — and lets you switch the propagation algorithm between naive arrival-order push and topological-sort evaluation. Drag the model slider (or fire a random change) and watch pulses travel the graph in real time: naive push visibly re-renders the View twice, briefly showing a mathematically wrong "glitch" value, while topological ordering settles it once, correctly, every time. Live counters track evaluations and glitches per update cycle so the difference is measured, not just watched.

⚙ Under the hood

An interactive 3D reactive dependency graph (Model → ViewModel → View) that shows the classic diamond-dependency glitch: naive push propagation briefly renders a wrong intermediate value, while topological-order evaluation settles it once, correctly.

mvvmdata-bindingreactive-programmingdependency-graphmobile-architecturealgorithms

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install