1. Client/browser productivity language Ras Bodik, Thibaud Hottelier, James Ide, and Doug Kimelman(IBM)

2. Today… Slow on handheldsClumsy everywhere About 10 times slower than laptop [Meyerovich et al.]

3. Summary The status-quo and its flaws Bi-directional Constraints Our language Compilation using synthesis and attribute grammar.

4. Browser 101 DOM Tree Layout Render Scripting CSS provides primitives: – Designers compose them. – Layout solved in ~5 passes.

5. 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

6. 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.

7. Bi-directional Constraints Redundancy in GUI: Multiple knobs/indicator for a single variable. Thus, many ways to update it. Scroll-Box R 1 (height, doc_height, slider_size) R 2 (doc_pos, slider_pos, height, doc_height) height doc_heightslider_sizeslider_pos doc_pos ↑ ↓ With bi-directional constraints:

8. Issues With Today’s Stack DOM Tree Layout Render Scripting (Some) Issues: – Limited expressiveness. → Hence, hacks, and clumsy workarounds. → Hence, not modular any more. – Not fast enough.

9. 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.

10. 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-boxImage

11. In a Nutshell NY Times GmailFlickr CSS

12. Summary & Challenges Ahead Our 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.

13. Definitions A layout system is 1.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.

14. 3-Tier Architecture Safety Check:Forall Tree in G, Forall Input in Tree, Tree(input) is Satisfiable And the solution can be found with propagation only. Solver ProgrammerDesignerUser/Client G :== ScrollBox | A A :== Vbox | Hbox | A| B B :== Image | Text VBox ScrollBox Text ScrollBox VBox Text P&GTree Prtv: Instantiate P&GRender Tree Runtime inputs

15. Solving Generic SolverModular solver Dependencies Analysis Calculation Document: Solution P1P1 P2P2 G :== … Static reasoning Prop Fun Dependencies AG compiler Solution Tree traversals Browser:

16. Remember… We have two things to do: – Produce a solver – Layout always well-defined (safety check) Let me do the safety check first…

17. Comfusy [Kuncak et al.] Comfusy: Complete Functional Synthesis – Find all propagation functions – Generate code for them Foo-Box R(x,y,z) xyz XY Z Comfusy R(x,y,z) :== x=y+z Comfusy X(y,z)= z-y Y(z,x)=z-x Z(x,y)=x+y Summary of Foo-Box

18. Safety Check Reduction to reachability on hyper-graphs – Each primitive is a (non-)terminal. – Let G=(P 1, P 2, 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.

19. Safety Check Again Compose the hyper graphs generated by Comfusy as follows: Let A → B, A → C, then we check reachability for: A R 1 (x,y) yx C R 3 (x,y) dc B R 2 (x,y) ba

20. Remember… We have two things to do: – Produce a solver – Layout always well-defined (safety check) The solver now...

21. 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.]

22. 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

23. That is it!

24. Safety Check Reduction to reachability on hyper-graphs – Each primitive is a (non-)terminal. – Let G=(P 1, P 2, R, S) in Chomsky normal form. – Proceed by induction on the grammar structure. Each variables is a node, each edges is a propagation Alternatives in G connected with B-edge – Inductive rules translate into cycles Ensures – Fast solving – Satisfiability A B C

25. Design Space Single Document Multi-Document Parameterized Multi- Document Grammar has single derivation Primitives with Design- time parameters More on this next slides.

26. Compilation to Attribute Grammar …

27. Bi-directional Constraints Primitives programmed with constraints. – Declarative – Bi-directional because UI have several knobs/indicators for same variable. H-Box heightwidth height1height2width1width2 +

28. Attribute Grammar 101 A CDE B height Given A Grammar How attributes are locally computed Returns tree traversals necessary to compute all attributes

29. Today… Slow on handheldsClumsy everywhere Test --> Test About 10 times slower than laptop [Meyerovich et al]