Usable Live Programming (opens in new tab)

As you edit JSX files, after a small delay, components re-render in browser, using React's diff algorithm to reconcile DOM. This means their state is not destroyed. For example, you can live-edit a modal window without having to refresh and open it again. You can change event handlers and debug a complex component on the fly.

There are no browser plugins involved, it's all just JS. This is implemented on top of Webpack, if you want to give it a try, check it out! (I assume familiarity with Webpack, but I plan to write an explanatory blogpost later.)

I'm very excited about this because I think it's the future of front-end development. It is possible thanks to React's separation of side-effects and Webpack's powerful plugin system (loaders are essentially macros).

Project on Github: https://github.com/gaearon/react-hot-loader (contains an example you can run)

Demo video: http://vimeo.com/m/100010922

What I think I would appreciate more than "live" values of variables etc. would be integration of some statistics into IDE. For example, how often was this function called? What is the usual value of this parameter? What is the mean/modus value? What are the outliers? How often was this condition true? And so on.

http://research.microsoft.com/pubs/211297/managedtime.pdf

It's great research. Near term applicability would be more useful to me as an IDE plugin that works with existing reactive frameworks. For instance, it turns out that the latest Java UI framework (JavaFX) has a reactive/lazy functional bindings framework in it. Every property of every UI widget can be connected to other properties or derived expressions of those properties. Of course Java itself has no support for this so it's all framework level stuff. An IDE plugin / embeddable DSL that understood these constructs and allowed for real-time debugging like in the videos would be useful indeed: whilst I love binding UI widgets to the backend data model with that framework, debugging it can be a total timesink.

I'd like to capture the execution flow of a method, visualize it and then watch those visualizations diverge from the old code to the new code.

The runtime could collect a minimal representative set of function invocations and then use that in a visualization during the edit,debug cycle one could see exactly how the new code diverges (kinda like having a column of inputs in a spreadsheet).

http://pharo.org/

When it comes to live coding, Pharo is "hardcore" , everything is live, direct , accessible and easily modifiable. Pharo is based on Squeak , which is based on Smalltalk-80 which is based on Smalltalk that means 45 years of live coding experience condensed in beatiful language, IDE and evironment. Pharo can already do all the things that the linked article tries to accomplish.

The end goal is provide a unified direct experience to the user, no delays, no complexities just what you want to do with your code.

So to anyone whos really interested to live coding, try Pharo or some modern implementation of Lisp. Even if you create your own live coding implementation it will give you a good idea how great live coding can be.