Client/browser productivitylanguage

Ras Bodik, Thibaud Hottelier,James Ide, and Doug Kimelman(IBM)

Today…Slow on handhelds Clumsy everywhere

About 10 times slower than laptop [Meyerovich et al.]

Summary

• The status-quo and its flaws

• Bi-directional Constraints

• Our language

• Compilation using synthesis and attribute grammar.

Browser 101DOM Tree

Layout

Render

Scripting

CSS provides primitives:– Designers compose them.– Layout solved in ~5 passes.

CSS is too restrictive

Aspect ratio• In general, it is not possible

to use both height and width in the same constraint.

• Rationale:height=F(width)

Example

Free The Constraints

Let the designer express declaratively his intent via constraints.

box.width = box.height

Bi-directional constraints:• Conciseness• height=F(width) or width=F(height), as you

want.

Bi-directional ConstraintsRedundancy in GUI:

Multiple knobs/indicator for a single variable.

Thus, many ways to update it. Scroll-Box

R1(height, doc_height, slider_size)R2(doc_pos, slider_pos, height, doc_height)

height

doc_height slider_size slider_posdoc_pos

↑

↓

With bi-directional constraints:

Issues With Today’s StackDOM Tree

Layout

Render

Scripting(Some) Issues:– Limited expressiveness.

→ Hence, hacks, and clumsy workarounds.→ Hence, not modular any more.

– Not fast enough.

Related Work On Solving• What would you do?

• Use a generic solver– Cassowary [Badros]: Analyze documents online and

figures out layout.

• For performance, we want– Reduce runtime work by doing offline pre-computation.– Specialized solver.

Raising The Level of Abstraction

• A single set of primitive will not suit all uses

1. Programmers define/build primitives• Scroll-box, Side-bar, Menu

2. Designers express layout using those.Side-Bar

Scroll-box Image

In a Nutshell

NY Times

GmailFlickr

CSS

Summary & Challenges AheadOur proposed solution is

– Bi-directional constraints exposed to the designer.– Translated into directional constraints for fast solving.– Primitives are up to the user.

We want all layout systems to be– Fast to solve.– Always well defined.

Efficient solver for any kind of layout systems.– Compilation to attribute grammars

• With synthesis of local evaluation rules.

Definitions

A layout system is1. A set of primitives (modules).2. A grammar describing valid compositions.

We get extra expressiveness.We get modularity.– Primitives can be reused across layout systems.

3-Tier Architecture

Safety Check: Forall Tree in G, Forall Input in Tree, Tree(input) is SatisfiableAnd the solution can be found with propagation only.

Solver

Programmer Designer User/Client

G :== ScrollBox | AA :== Vbox | Hbox | A| BB :== Image | Text

VBox

ScrollBox

Text ScrollBox

VBox

Text Text

P&G Tree

Prtv:Instantiate P&G Render Tree

Runtime inputs

SolvingGeneric Solver Modular solver

Dependencies Analysis

Calculation

Document:

Solution

P1 P2 G :== …

Static reasoning

Prop FunProp FunProp Fun

Dependencies

AG compiler

Solution

Tree traversalsBrowser:

Remember…

We have two things to do:– Produce a solver– Layout always well-defined (safety check)

Let me do the safety check first…

Comfusy [Kuncak et al.]

Comfusy: Complete Functional Synthesis– Find all propagation functions– Generate code for them

Foo-BoxR(x,y,z)

x y z

X Y

ZComfusy

R(x,y,z) :== x=y+z ComfusyX(y,z)= z-yY(z,x)=z-xZ(x,y)=x+y

Summaryof Foo-Box

),,(.., zyxRzyx ),,(.,. zyxRyxz

Safety CheckReduction to reachability on hyper-graphs

– Each primitive is a (non-)terminal.– Let G=(P1, P2, R, S) in Chomsky normal form.

Build a hyper-graph representing the family of tree in G.– Primitives are summarized to hyper-graphs.– Connect them according the grammar.– Recursion translates into cycles.– Only consider propagation -> no search needed when solving

Most interesting case is alternative in G. Let’s do that one.

Safety Check Again

Compose the hyper graphs generated by Comfusy as follows:

Let A → B, A → C, then we check reachability for:

AR1(x,y)yx

CR3(x,y)dcBR2(x,y)

ba

Remember…

We have two things to do:– Produce a solver– Layout always well-defined (safety check)

The solver now...

Compilation to Attribute Grammar

• We already to reachability on hyper-graphs for the safety check.

• Extract tree traversals from that– Comfusy gives us code for each propagation step.– Schedule them using an AG evaluator.• Our group is working on parallel AG evaluator too.

[Meyerovich et al.]

Future Work

• Design-time parameters

• Reactive semantics

• Expressiveness/Speed Trade-off– Can the tree traversal of the solver depend on• Design-time parameters• Run-time inputs

That is it!