We can do better than this.
What is Live Editing?
Live editing, also called interactive programming, enables developers to see the effects of code modifications nearly instantly, thereby tightening the feedback loop.
From a technical point of view, live editing consists of two components: 1) modifying running code (hot-swapping) and 2) re-executing it in order to observe changes.
The animation above demonstrates live editing as performed by Bret Victor. When the program code on the right-hand side is edited, the program is re-executed and changes can be observed instantly. Talk about a tight feedback loop!
You might think that live editing is possible just in theory, but in fact, it can be achieved today with existing software development tools.
So, what’s the benefit of hot-swapping compared to just reloading the page? For a simple application reloading the page might work fairly well, but imagine you are modifying a function that is heavily dependant on the application state (for example processing user input from a multi-step form). Reloading the page destroys the application state and you have to manually fill the inputs etc. before you can re-run your code. In contrast, hot-swapping retains the application state. However, you still need to trigger the re-execution of the code in order to see how it behaves. In a typical web application this involves clicking a button that triggers the execution of the function that was modified. If you are editing with Chrome developer tools, you can also re-run code by restarting the frame.
Tracr – A Tool for Code Hot-Swapping and Automatic Re-Execution
Tracr workflow consists of two phases. First, in the capturing phase, the system must be taught how to “use” the web application that is developed. In practice this means that Tracr records user input, such as mouse clicks and keyboard events, while the web application is being used. This step is needed in order for Tracr to know how to trigger re-execution of the functions when they are edited.
The second phase is activated when the developer decides to live edit code in Brackets. In this phase Tracr simulates the captured user input in order to replay the web application to the exactly same state as in the capturing phase. Now, Tracr evaluates code and displays the results of each statement immediately as code is written.
More on the Topic
- Live programming demonstration (Bret Victor)