Functional Layout
updating the DOM at 60 FPS
@dmvaldman
David Valdman
What updates at 60FPS?
<div class="bookEntry">
<h1>{{title}}</h1>
<h2>By {{author.name}}</h2>
<div class="body">{{body}}</div>
</div>- Animation
- Scrolling
- Dragging
- Gestures
- Resizing
Layout
｝
What updates at 60FPS?
(size, positions, orientations, etc)
It's not content that changes at 60fps
It's presentation
Layout
Flow
block / inline elements
Modify flow
top/left/position/flex
transform/float/etc
Interactivity
STATIC
BINARY
CONTINUOUS
samsaraJS
http://samsaraJS.org
github.com/dmvaldman/samsara
License : MIT
Core Principles
① User Input is a Stream
document.addEventListener("mousemove",
function(event){
...
}
);
You just can't pipe them anywhere :-(
They were streams all along!
myWidget.subscribe(mouseInput);gestureRecognizer.subscribe(touchInput);velocityCalculator.subscribe(scrollInput);pinchToZoom.subscribe(twoFingerInput);What if...?
②
DEMO
Layout is a Stream
How?
What browsers do when you're not looking...
Webkit:
Gecko:
[2]
[1]
(x, y, w, h)
We can take this part out of the browser, and into the hands of the developer
- Create a "Render Tree" in JavaScript
{position: absolute}in CSS
<div>(c){translate : [100, 200, 0]}(d)<div>|
|
|
(a)(b)<div style="transform:translate(
150px,
225px
)"><div style="transform:translate(
150px,
200px
)">Render Tree
╱
╲
{translate : [50, 0, 0]}{size : [100,50]}{align : [0.5,0.5]}DEMO
<div>(c)(d)<div>(a)(b)The Render Tree isn't a tree
╱
╲
|
|
|
<div>(c)(d)<div>(a)(b)-
Nodes contain streaming layout data
-
Child nodes listen to parent nodes
-
At each step we compose the layout
-
Exit in the DOM in opacity, transform and size in-line styles
The Render Tree is a stream
② Layout is a Stream
③
① User Input is a Stream
SamsaraJS Principles
Rendering is a Stream
Write programs to handle text streams, because that is a universal interface.
Doug McIlroy
(creator of Unix pipes)
Write layout to handle JSON streams because that is a universal interface.
Me
(speaker at NYCHTML5)
DEMOS
In conclusion:
With ease of expression
comes experimentation
Drag and drop, inertial scroll, bounce to refresh, hamburger menu, ___________
[insert yours here]
Thank you
References
[1] http://www.mozilla.org/newlayout/doc/gecko-overview.htm
[2] http://taligarsiel.com/Projects/howbrowserswork1.htm#Render_tree_construction
Updating the DOM at 60FPS
By dmvaldman
