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

@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

Made with Slides.com