5

I recently implemented live editing for React components, so you can edit their markup and code and have changes appear in the browser without reloading or throwing the state away:

It works on top of Webpack Hot Module Replacement (which is like LiveReload for every module) and it patches components' prototypes and forces re-render, which React can do gracefully, updating only the changed parts.

In my understanding, live-editing JS is only possible if the UI framework has following characteristics:

  • its components encourage modularity in form of reusable components;
  • DOM doesn't get thrown away on updates;
  • views have deterministic lifecycle and can be asked to re-render.

Are there any JS frameworks other than React that satisfy these requirements?
To what extent is it possible to implement code live reload for Angular, Meteor, Mithril, etc?

(Live JS Reload that relies on browser plugins like fb-flo or Light Table or connects to Chrome as a debugger is out of the scope of this question. I'm wondering about pure JS solutions.)

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Dan Abramov
  • 264,556
  • 84
  • 409
  • 511
  • Not sure with any of the framework but with brackets IDE live editing is possible. – Ashok Jul 28 '14 at 11:10
  • @Ashok: I clarified the question: I'm wondering about pure JS solutions that don't rely on browser plugins and don't connect as remote debuggers. – Dan Abramov Jul 28 '14 at 11:14
  • @Dan Meteor 0.9 allows this behaviour – Tarang Jul 28 '14 at 13:39
  • @Akshat Can you please expand on this in an answer? i.e. what makes it possible in Meteor and how to use it (or implement it if it's not ready yet). – Dan Abramov Jul 28 '14 at 14:19
  • 1
    @Dan they're still working on it but they've demoed it. It you're able to use github devel version of meteor you may be able to play around with it. It was demoed in this video: https://www.youtube.com/watch?v=NBp72NFzHL0 – Tarang Jul 28 '14 at 14:46
  • @Akshat In the video, there is no live reload for JS (or even for templates). It just F5-s the page. By live I mean *without refreshing the page*. – Dan Abramov Jul 28 '14 at 15:03
  • 1
    @Dan they mention that it will be available for templates, js and other client side assets @2:03 in the video (that is without refreshing the page, just to be clear), it is also demoed with templates at about 2:04 – Tarang Jul 28 '14 at 15:05

1 Answers1

2

Some frameworks which allow live-editing and live-coding:

  • Meteor 0.9+
  • React

You've also severely limited the question by disallowing anything that connects to a browser's debugger which is actually the best way to get live-coding done.

  • 2
    @onmouse: It's not the best way if you want to work in editor of your choice and don't want to get weird bugs and crashes. Also, live-editing-via-debugger only works well for modifying existing methods—in other cases there is no way for the system to know how to properly "apply" the update. – Dan Abramov Jul 31 '14 at 20:32