Ravi Chugh

Prodirect Manipulation:

Bidirectional Programming���for the Masses

Motivating Application

The original Chicago Ferris Wheel, built for the 1893 World's Columbian Exposition [Wikipedia]

2  

(d)

(a) (b) (c)

(e) (f)Task:  

Q: What Would You Choose?  Programming Language

(e.g. JavaScript, Processing) Direct Manipulation System (e.g. Illustrator, PowerPoint)

3  

(d)

(a) (b) (c)

(e) (f)Task:  

Q: What Would You Choose?  Programming Language

(e.g. JavaScript, Processing) ✗ Direct Manipulation System (e.g. Illustrator, PowerPoint) ✗

4  

5  

Immediate���Feedback

Rapid���Prototyping

Abstraction���Capabilities

GOAL: ���

Programmatic Manipulation

GOAL: ���

Direct Manipulation

✗

✓  ✗

VISION:

"Prodirect"���Manipulation

✓  ✓  ✓  

✓  ✓  ✗

6  

GOAL: ���

Programmatic Manipulation

GOAL: ���

Direct Manipulation

2D Graphics

Presentations

Documents

Spreadsheets

Web Apps

7  

GOAL: ���

Programmatic Manipulation

GOAL: ���

Direct Manipulation

2D Graphics

Presentations

Documents

Spreadsheets

Web Apps

General-Purpose���Languages

Domain-Specific���Languages or���

Libraries Domain-Specific���

GUI Tools

v e 8  

General-Purpose���Programming���

Language  

Domain-Specific���Graphical User���

Interface  

v e 9  

General-Purpose���Programming���

Language  

Domain-Specific���Graphical User���

Interface  

v' e'

10  

Demo: Sketch-n-Sketch

ravichugh.github.io/sketch-­‐n-­‐sketch  

v e 11  

v' e'

Challenges: •  Predicting User Intent •  Machine-Assisted Programming •  Language / Library / UI Co-Design •  Intuitive, Interactive Workflow

Constraint-Oriented Programming

Prodirect���Manipulation v.

constraints in���programming model

constraints (only) in���program synthesis

Bidirectional���Programming

Prodirect���Manipulation v.

domain-specific PL, strong guarantees

general-purpose PL, weak guarantees

Programming by���Manipulation

Prodirect���Manipulation v.

"add Pro to DM" "add DM to Pro" 12  

Prodirect Manipulation = Programmatic + Direct Manipulation Sketch-n-Sketch = Prodirect Manipulation for SVG

Thanks!

Jacob���Albers

Mitch���Spradlin

Brian���Hempel

13