User Interfaces for Live Programming

10/24/2017
Keynote Talk at LIVE '17

The page provides summary for the keynote talk at LIVE '17 workshop and links to relevant sub-projects including Live Tuning and User-Generated Variables.

Summary

Live programming has attracted much attention for eliminating the gulf between code and execution. To design live programming systems, we first need to understand what we are developing. Once we gain domain-specific knowledge of the target applications, we create user interfaces to edit the running application, such as scrubbing sliders, color palettes, and timeline interfaces. The key to the fluid programming experience of live programming is the combination of deep understanding of the target applications and adoption of interactive user interfaces.

In the keynote talk at LIVE '16, I discussed the liveness of programming systems in light of user interface design. I introduced user interfaces for programming and discussed the importance of integrating graphical representations into programming environments. I extended the scope of "liveness" by describing two kinds of interactions, physical and developer-user, and provided insights on designing future live programming systems.

In particular, regarding the user interfaces for enhancing developer-user interactions, there are two sub-projects called Live Tuning and User-Generated Variables.

Presentation materials

LIVE 2017 Slides

What is Live Programming?

Live Programming refers to a PX that provides continuous feedback to the programmer about the program being developed.

Live Programming systems provide concrete information about how the program behaves when it is executed. With help of this concrete information, programmers can easily iterate on editing and testing the program behavior.

Please note that the origin of Live Programming is not new as you can see early examples in visual programming and object-oriented programming environments. Then, why is it attracting much attention these days? In short, I consider it is because of its focus on the user experience.

Live Programming requires decent user interfaces for exploring the problem space.

As such, building decent Live Programming systems requires deep understanding on the target application domains; e.g. avoid sudden changes in the program behavior, keep the program and its output relevant, and allow continuously exploring the problem space.

From now on, I will discuss three perspectives on user interface design of Live Programming systems.

Programming with End-users

As Live Programming systems provide interactive and intuitive user interfaces for debugging and editing programs, some of the user interfaces can be exposed to the end-users so that they can customize the programs as they wish. [Live Tuning]

When the provided user interfaces cannot satisfy their needs, they can still submit requests to programmers with rich contextual information provided by the Live Programming systems. [User-Generated Variables]

Programming this Material World

Live Programming often targets simple applications such as drawing graphics. In contrast, "software is eating the world" and there are interesting applications such as physical computing and virtual reality.

Their actual "framerate" can be very slow; e.g. printing device enclosures and producing scent. Emulating, or sometimes even pretending, is needed to provide the continuous feedback. Making full use of five senses in programming environments would be crucial in the near future.

Programming with Time Travel

Live Programming puts focus on providing live feedback to the programmer, but it does not always mean providing realtime information of the running program.

The timeline interface and record and replay features together provide time traveling experience and play an important role to find critical timings in the history. Once the timing of interest is found, editing the code and program input would update the program output, allowing the programmer to explore future"s."

As a summary, Live Programming is a very interdisciplinary topic and involves all of Programming Language design, Software Engineering, and designing Human-Computer Interaction.

LIVE, PX workshops and SIGPX are such an attempt to attract people from all of these research fields.

Relevant projects

The following projects are highly relevant to the topic.

DeployGround
DeployGround seamlessly connects the API playground and deployment target for kick-starting the application development after using the playground.
2018VL/HCC '18Live IDE
Reactile
Reactile is an exploratory research project that investigates and proposes a new approach to programming Swarm UI by leveraging direct physical manipulation.
2017-2018CHI '18Co-authoredPhysical PwE Live IDE
Live Tuning
Live Tuning is the subset of Live Programming interaction that only involves changes in constant values through parameter tuning interfaces. It expands Live Programming benefits to non-programmers.
2016LIVE '16Live IDE
f3.js
A parametric design tool for physical computing devices for both interaction designers and end-users.
TextAlive
An integrated design environment for kinetic typography; desktop app revamped as a web service in 2015.
2014-2018CHI '15Creativity Music PwE Live IDE Design
VisionSketch
An IDE for example-centric programming of image processing applications, enabling fluid transition between abstract text-based coding and concrete direct manipulation.
2013-2014GI '14PwE Live IDE NUI
CapStudio
An IDE for visual applications that shows interactive screencasts for replaying program executions and editing visual parameters.
2012-2014CHI EA '14Co-authoredPwE Live IDE
It's Alive! (TouchDevelop)
The TouchDevelop IDE enables live programming for user interface programming by cleanly separating the rendering and non-rendering aspects of a UI program, allowing the display to be refreshed on a code change without restarting the program.
2012-2013PLDI '13Live IDE
DejaVu
An IDE that eases the iterative development of interactive camera-based programs with support for monitoring, recording, reviewing, and reprocess temporal data
2012UIST '12PwE Live IDE NUI
Pressing
A "pressure-sensitive" programming environment with visual feedbacks of the built-in 2D physical simulator.
2009インタラクション2010デモLive IDE NUI

Revision history

2/15/2018
Replace "Further reading" with the list of relevant projects. Please visit each project page for further readings.
1/21/2018
Upload the initial prototype version.