Functional Layout

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