In its simplest form JavaScript web development consists of two phases: 1) writing code in the editor and 2) reloading and testing the application in a browser, to verify the code works as expected. This kind of workflow, perhaps enhanced with a build pipeline using – say – grunt or gulp, is probably still the most common way of developing web apps. However, it’s not very interactive, because there’s a delay between writing code and observing how it behaves.
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!
Hot-swap JavaScript in Chrome
You might think that live editing is possible just in theory, but in fact, it can be achieved today with existing software development tools.
JavaScript language characteristics support hot-swapping, since methods and functions can be overridden at runtime. Even better, Chrome developer tools provide built-in support for hot-swapping and live editing. I have found it especially useful in killing bugs, as demonstrated by Paul Irish in this video. Extensions such as fb-flo can be used to integrate hot-swapping into your build process.
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
This spring Gofore (the company I work with) gave me the opportunity to research JavaScript developer tools in my master’s thesis. I ended up designing and implementing a prototype of a new JavaScript development tool called Tracr. It integrates with the Brackets editor and provides hot-swapping and automatic re-execution of JavaScript code.
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.
Tracr has been released as open source software at http://tracr.org. At the moment it is only a proof-of-concept that demonstrates how hot-swapping and automatic re-execution can be implemented with vanilla JavaScript.
Final thoughts
I believe that the developer experience will continue to get more interactive, not only for JavaScript but for other programming languages as well. Live editing is a key component in this evolution, and we will continue to see new tools and editors that improve the editing experience. Recently also testing became more interactive with Wallaby.js that ”runs your code as you write it”. Seems like an interesting project to check out!
More on the Topic
- Live programming demonstration (Bret Victor)
- Wallaby.js – A ”live” test runner for JavaScript
- Tracr – a prototype tool for live editing JavaScript
- My Master’s Thesis on Live Editing (”Improving JavaScript Development Productivity by Providing Runtime Information within the Code Editor”)
