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]

@dmvaldman

 

www.samsaraJS.org

github.com/dmvaldman/samsara

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

Made with Slides.com

Updating the DOM at 60FPS

  • 720

More from dmvaldman