Bidirectional Web Programming in Sketch-n-SketchMikaël Mayer, Brian Hempel, Justin Lubin, and Ravi Chugh

Edit source code by editing the output?

Sketch-n-Sketch ravichugh.github.io/sketch-n-sketch

Traditional Lens Programming

Prototype Systems and Examples

Hyde Build Tool github.com/MikaelMayer/hyde-build-tool

Tharzena github.com/MikaelMayer/Editor

Our Approach: Bidirectional Evaluation

get : A � B � A put : B � A � A#{ } eval : Exp � Val � Exp

uneval : Val � Exp � Exp'{ }

Bidirectional HTML developmentin a browser-based IDE

Bidirectional file manipulation(à la Jekyll, Hugo, Hexo)

Bidirectional web server forHTML and PHP development

DOM’

DOM’

Hyde Tharzen

HTML’

HTML’

+

HTTP

HTTP

Code generatesHTML application

1

New code generatesnew HTML application4

User editstext directly

(e.g. line breaks)and styles via

DOM Inspector(e.g. gray to green)

2

Code is repaired basedon the output changes

3

e' ⇒'v'!

e' ⇐ 'v'!

�

((E, f ↦[Ef'] λy.ef', x ↦ vx') ⊢ f x) ⇒'v'!

((E, f ↦[Ef'] λy.ef', x ↦ vx') ⊢ f x) ⇐' v'!

��

((Ef', y ↦ vx') ⊢ ef') ⇒'v'!

((Ef', y ↦ vx') ⊢ ef') ⇐' v'!

��

New Data!

Key Idea

New Code!

f' x') ⇒'y'!

f' x') ⇐ 'y'!

�

"get"!

"put"!

1. Function f in DSL or restricted style!(i.e. point-free) !

3. Update "data" (x)!but not

"code" (f)!

2. Restricted structural changes between y and y'!

f' x') ⇒'v'!

f' x') ⇐ 'v'!

�

"Small" structural changes to values!+ user-defined lenses for customization!

Update!data (x)!

and!code (f) !

All expressions can be run!backwards and updated!

Code’

Code’

e' ⇒'v''!

e' ⇐ 'v''!

�

e' ⇒'v''!

2

1

3

4