persistent data structures - good for ui (presented at rubyfuza 2014)
DESCRIPTION
Persistent data structures are being imported from the FP world. What makes persistent data structures particularly interesting is that they cannot be modified in the traditional sense. These structures can model a timeline of changes quite naturally since every "change" creates a new "copy". "Functional Reactive Programming" is another old/new idea. FRP has a time centric viewpoint. Having persistent data structures on the Javascript/UI side of the world unlocks a lot of the magic that FRP has to offer. In this talk Danie will explain why persistent data structures are good and specifically why they are good for (the) UI.TRANSCRIPT
@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