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