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

MVVM Data-Binding Glitch: Diamond Dependency Propagation (2D)

Interactive 2D reactive dependency graph (Model → ViewModel → View). Toggle naive push propagation against topological-order evaluation and watch the classic diamond-dependency glitch appear and disappear live, with measured recompute counts per node.

Computer Science2DModerate60 FPS📱 Mobile-adapted⇄ 3D 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 2D companion renders that dependency graph as a flat, always-legible node-and-edge diagram 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 edges in real time: naive push visibly recomputes the shared sink twice per diamond — briefly flashing a mathematically wrong "glitch" value — while topological ordering settles every node exactly once, correctly, every time. A live per-node table tracks cumulative recomputes under each mode side by side, and "Extend graph" lets you chain additional diamonds onto the sink to watch the naive/topo gap compound on a bigger dependency graph.

⚙ Under the hood

An interactive 2D 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

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install