Functional Layout
updating the DOM at 60 FPS
@dmvaldman
David Valdman
Is layout dysfunctional?
- No for (mostly) static websites
- Constrained for interactive applications
What's holding layout back?
- performance - reflow is costly
- expressibility - coordination of animations
Layout
Flow:
block / inline elements
Modify flow:
top/left/position/flex
transform/float/etc
Interactivity
STATIC
BINARY
CONTINUOUS
Question:
Why do we use HTML for presentation?
<div class = "center">
<div id = "content">
...
<div>
</div>Answer:
It's the only tree around.
HTML is about content
A bad idea?
<div class = "center">
<div id = "content">
...
<div>
</div><div id = "content" style="transform=translate(50%, 50%)">
...
<div>Turn
into
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
How?
- 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
samsaraJS
www.samsaraJS.org
github.com/dmvaldman/samsara
License : MIT
With layout in JavaScript, what can we do?
- CSS was designed for point and click
- In JavaScript we can design for motion
STREAMS
DEMO
It's one streaming network
<div>(c)(d)<div>(a)(b)- Nodes contain streaming layout data
- Exits in the DOM (transform, opacity, size style properties)
The Render Tree isn't a tree
╱
╲
|
|
|
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
(3rd grade spelling bee champion)
Streams for the frontend aren't new
document.addEventListener("mousemove",
function(event){
...
}
);DOM events like "scroll", "resize", etc are streams
You just can't pipe them anywhere!
Possibilities:
myWidget.subscribe(mouseInput);gestureRecognizer.subscribe(touchInput);velocityCalculator.subscribe(scrollInput);pinchToZoom.subscribe(twoFingerInput);My hope:
With ease of expression
comes experimentation
Drag and drop, inertial scroll, bounce to refresh, hamburger menu, ___________
[insert yours here]
DEMO
Closing Thoughts
- In the past 20 years, the public internet has been the most significant change to society
- In the past 10 years, mobile has been the most significant change to society
- Currently, the mobile web is lagging behind
A potential future for the mobile web?
- Apps sent by hyperlink
- Decentralized app stores
- No vendor lockdown
- Search engine crawlable
- Ephemeral apps
Thank you
References
[1] http://www.mozilla.org/newlayout/doc/gecko-overview.htm
[2] http://taligarsiel.com/Projects/howbrowserswork1.htm#Render_tree_construction
Functional Layout
By dmvaldman
