client/browser productivity language
DESCRIPTION
Client/browser productivity language. 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 - PowerPoint PPT PresentationTRANSCRIPT
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!