Projection Boxes
Try Projection Boxes Go to Snippy Web site Go to Loopy Web site
Note: the online editors work best in Chrome. They take some time to load because of the Python execution environment we use (Pyodide), which runs Python the browser.
Live programming is a regime in which the programming environment provides continual feedback, most often in the form of runtime values. In this project, we explore Projection Boxes, a novel visualization technique for displaying runtime values of programs. The key idea behind projection boxes is to start with a full semantics of the program, and then use projections to pick a subset of the semantics to display. By varying the projection used, projection boxes can encode both previously known visualization techniques, and also new ones. As such, projection boxes provide an expressive and configurable framework for displaying runtime information.
Our first work in this space explored projection boxes and how users interact with this new UI. Through a user study we demonstrated that (1) users find projection boxes and their configurability useful (2) users are not distracted by the always-on visualization (3) a key driving force behind the need for a configurable visualization for live programming lies with the wide variation in programmer preferences.
Paper
Projection Boxes: On-the-fly Reconfigurable Visualization for Live Programming (CHI 2020)
Video on Projection Boxes
Focused Live Programming with Loop Seeds
While using projection boxes, we discovered that in some situations test cases are insufficient for good live data, in that there are no test inputs that can drive certain incomplete loops to produce useful data. We call this problem the loop-datavoid problem. The problem stems from the fact that useful data inside the loop might only be produced after the loop has been fully written. To solve this problem, we propose a paradigm called Focused Live Programming with Loop Seeds, in which the programmer provides hypothetical values to start a loop iteration, and then the programming environment focuses the live visualization on this hypothetical loop iteration.
Paper
Focused Live Programming with Loop Seeds (UIST 2020)
Snippy
We have also explored how to combine Live Programming with Synthesis. Program synthesis is a technique that can generate programs or program snippets from examples. Previous approaches that combine the two have taken a holistic approach to the way examples describe the behavior of functions and programs. In our work we present a new programming paradigm called Small-Step Live Programming by Example that lets the user apply Programming by Example locally. When using Small-Step Live Programming by Example, programmers can change the runtime values displayed by the live visualization to generate local program snippets. We implemented this appraoches in a tool called SnipPy built on top of Projection Boxes.
Try Snippy Go to Snippy Web site
Paper
Small-Step Live Programming by Example (UIST 2020)