Knowing What You See - Let's Talk About Front-end Consistency
summary
Argues a concrete query-based model that treats the front end as a database, maps visualization anomalies to read/write conflicts, and applies transaction techniques like locking, multiversion snapshots, CRDT-style merges and declarative interaction constraints. Cites D3 RxJS React and Facebook Relay as compatible tools. Shows a DSL and shim-layer prototype with a live demo that detects reordering, varying delays, unclear selection and overwritten marks and applies policies to prevent or communicate inconsistency; prototype works but remains under heavy development.
AI-written summary · about
chapters (27)
- 0:00Intro
- 2:48Time Diagram
- 4:05should i wait or refresh?
- 4:17Anomalies So Far
- 6:46Functionality vs Performance
- 6:56Why not just ask the backend engineers to make things fast?
- 9:53Real Time Interaction Updates Before Interaction
- 10:34Incremental Visualization
- 12:13Consistency Definition?
- 15:17Mission Critical
- 16:51Spinners, Multiple Zoom Levels
- 18:06Labeling
- 19:24Unaccounted for Anomalies
- 19:34Design Space
- 22:57Dealing with Inconsistency
- 24:14A Relational Model
- 25:48Interaction as a Transaction
- 26:45Data Flow
- 27:19Conflict Example
- 28:13Defining Conflict: Write-Write
- 28:33Defining Conflict: Read-Write
- 29:08Defining Conflict: Write-Read
- 30:15Seen Technique: Blocking
- 31:00Interaction Constraints
- 31:21Merge Functions
- 32:40Visualization Snapshots Example: Cross Filter
- 35:35Related Work
related talks
38mThe Front End Architecture Revolution
44mHow to Approach Modern Web Applications
40mReactive Programming: A Better Way To Write Frontend Applications
20mA framework for building data driven interactive front ends
58mFrontin' like a Back-er
25mEnemy of the State
56mThe Web, Its Frameworks and Its Standards: Deconstruct to (Re?)Construct
19mReactivity in Frontend JavaScript Frameworks