1 / 23

Client/browser productivity language

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

purity
Download Presentation

Client/browser productivity language

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Today… Slow on handhelds Clumsy 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 CSS provides primitives: • Designers compose them. • Layout solved in ~5 passes. Scripting Layout Render

  5. CSS is too restrictive Aspect ratio Example • In general, it is not possible to use both height and width in the same constraint. • Rationale: height=F(width)

  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 R1(height, doc_height, slider_size) R2(doc_pos, slider_pos, height, doc_height) height With bi-directional constraints: ↑ doc_pos ↓ doc_height slider_size slider_pos

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

  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 • Programmers define/build primitives • Scroll-box, Side-bar, Menu • Designers express layout using those. Side-Bar Scroll-box Image

  11. In a Nutshell 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 • A set of primitives (modules). • A grammar describing valid compositions. We get extra expressiveness. We get modularity. • Primitives can be reused across layout systems.

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

  15. Solving Generic Solver Modular solver P1 P2 G :== … Document: Static reasoning Dependencies Analysis Dependencies Prop Fun Calculation AG compiler Prop Fun Prop Fun Browser: Tree traversals Solution Solution

  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 Summary of Foo-Box Foo-Box R(x,y,z) Comfusy x y z X Y X(y,z)= z-y Y(z,x)=z-x Z(x,y)=x+y R(x,y,z) :== x=y+z Comfusy Z

  18. Safety Check Reduction 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.

  19. Safety Check Again Compose the hyper graphs generated by Comfusy as follows: Let A → B, A → C, then we check reachability for: A R1(x,y) C R3(x,y) B R2(x,y) c a d b x y

  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!

More Related