Optimizing with persistent data structures (LLVM Cauldron 2016)
Persistent data structures - good for UI (presented at Rubyfuza 2014)
-
Upload
danieroux -
Category
Technology
-
view
3.564 -
download
3
description
Transcript of Persistent data structures - good for UI (presented at Rubyfuza 2014)
@danieroux
Persistent data structures, good for UI
@danieroux
Persistent data structures, good for UI
… You & I (sorry)
Modelling Chess
e2-e4
e2-e4
e2-e4 d7-d6
e2-e4 d7-d6
e2-e4 d7-d6 d2-d4
e2-e4 d7-d6 d2-d4
LIE
The conceptual model does not match reality
Reality
e2-e4
d7-d6
d2-d4
… but what if we keep a move list
1. e2-e4 2. d7-d6 3. d2-d4
1. e2-e4 2. d7-d6 3. d2-d4
Get back here
Move list is not reversible …
Keep all the states
Full History
Partial History
react.js
DeveloperMachine
react.js
DeveloperMachine(person)
react.js
DeveloperMachine(person)
react.js
Virtual DOM
DeveloperMachine(person)
DOM
react.js
Virtual DOM
DeveloperMachine(person)
DOMContinuously
react.js
Virtual DOM
DeveloperMachine(person)
DOMContinuously
Draws newreact.js
Virtual DOM
DeveloperMachine(person)
DOMContinuously
requestAnimationFrame
Draws newreact.js
Virtual DOM
DeveloperMachine(person)
DOMContinuously
requestAnimationFrame
Draws newreact.js
Virtual DOM
DeveloperMachine(person)
DOM
MAGIC
Continuously
requestAnimationFrame
Draws newreact.js
Magic = Tree Diffing
And persistent/immutable data structures make that cheaper
Separating concerns
Rendering
State
Rendering
State
World
Rendering
State
World Logic
Rendering
State
World Logic
TIME
Updates
Rendering
State
World Logic
TIME
Updates
Rendering
State
World Logic
Uses
TIME
Updates
RenderingValue
State
World Logic
Uses
TIME
Snapshots
Updates
RenderingValue
State
World Logic
Uses
TIME
Renders
Snapshots
Updates
RenderingValue
State
World Logic
Uses
TIME
@danieroux … let’s have coffee
?
http://facebook.github.io/react https://github.com/swannodette/om
https://github.com/danieroux/rubyfuza2014
Thank you to: http://designindevelopment.com/css/css3-chess-board