Download - Client/browser productivity language
![Page 1: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/1.jpg)
Client/browser productivitylanguage
Ras Bodik, Thibaud Hottelier,James Ide, and Doug Kimelman(IBM)
![Page 2: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/2.jpg)
Today…Slow on handhelds Clumsy everywhere
About 10 times slower than laptop [Meyerovich et al.]
![Page 3: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/3.jpg)
Summary
• The status-quo and its flaws
• Bi-directional Constraints
• Our language
• Compilation using synthesis and attribute grammar.
![Page 4: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/4.jpg)
Browser 101DOM Tree
Layout
Render
Scripting
CSS provides primitives:– Designers compose them.– Layout solved in ~5 passes.
![Page 5: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/5.jpg)
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
![Page 6: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/6.jpg)
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.
![Page 7: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/7.jpg)
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:
![Page 8: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/8.jpg)
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.
![Page 9: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/9.jpg)
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.
![Page 10: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/10.jpg)
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
![Page 11: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/11.jpg)
In a Nutshell
NY Times
GmailFlickr
CSS
![Page 12: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/12.jpg)
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.
![Page 13: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/13.jpg)
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.
![Page 14: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/14.jpg)
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
![Page 15: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/15.jpg)
SolvingGeneric Solver Modular solver
Dependencies Analysis
Calculation
Document:
Solution
P1 P2 G :== …
Static reasoning
Prop FunProp FunProp Fun
Dependencies
AG compiler
Solution
Tree traversalsBrowser:
![Page 16: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/16.jpg)
Remember…
We have two things to do:– Produce a solver– Layout always well-defined (safety check)
Let me do the safety check first…
![Page 17: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/17.jpg)
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
![Page 18: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/18.jpg)
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.
![Page 19: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/19.jpg)
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
![Page 20: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/20.jpg)
Remember…
We have two things to do:– Produce a solver– Layout always well-defined (safety check)
The solver now...
![Page 21: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/21.jpg)
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.]
![Page 22: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/22.jpg)
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
![Page 23: Client/browser productivity language](https://reader035.vdocument.in/reader035/viewer/2022062410/5681650d550346895dd784c2/html5/thumbnails/23.jpg)
That is it!