4 ms·

Allow me to be the detractor to all the fanfare - what does this actually do? The demo site hints at what is going with it's tutorial but I don't see in plain e

Allow me to be the detractor to all the fanfare - what does this actually do? The demo site hints at what is going with it's tutorial but I don't see in plain english. It seems, if I follow the tutorial, that as I modify the includes in the editor the javascript assets are reloaded in real time to reflect the state of loaded javascript. So, I guess I'm looking for a technical summary of what this does exactly because I don't understand the benefit.

dmazin 12y ago
Basically if you save the code behind the component (even if your text editor), the components will reflect the new code without a page refresh. It's for development, it seems.
- danabramov 12y ago
  This is correct. Not just without refresh, but without throwing away the DOM—we'll just re-run React's algorithm. This gives huge productivity boost when developing complex nested UIs because you can quickly tweak CSS/JSX without blowing away all the state (like modal windows, tabs, loaded data, etc).
dcre 12y ago
The main benefit for a developer, as far as I can tell, is that the state of the app is maintained between reloads. So you can interact with it — e.g., type into an input, make selections in dropdowns — then change the code behind it and everything you did will still be there. The site does say: > React Hot Loader will keep it mounted, preserving the state. but I agree that it could be more explicit about how it's useful.
- seanmcdirmid 12y ago
  Yes, not losing state is a big deal. This is possible because the UI is stateless while React is a view on that state. We built a similar system (for TouchDevelop) in a PLDI paper a few years back: http://research.microsoft.com/pubs/189242/pldi097-burckhardt.pdf http://research.microsoft.com/pubs/189242/pldi097-burckhardt... From the paper, adding a navigability aspect between UI and executing code is something that is fairly straightfoward to do and very useful. My current live programming work is over stateful code (meaning the code that is being live edited involves side effects). It is difficult to support that in existing programming models, however.
drdiablo 12y ago
It's instant feedback. You should try making an app with animations. You leave the animation looping and you modify your constants and you don't have to reload or do anything, ReactHotLoader will plug in your new code without losing the state of the app. You get much faster prototyping, collaborative tools out of the box and even a debugger with a timeline out of the box (you just have to save your state at every change and have a little scrollbar to scroll through your states). This is very very powerful.

dmazin 12y ago

Basically if you save the code behind the component (even if your text editor), the components will reflect the new code without a page refresh. It's for development, it seems.

danabramov 12y ago
This is correct. Not just without refresh, but without throwing away the DOM—we'll just re-run React's algorithm. This gives huge productivity boost when developing complex nested UIs because you can quickly tweak CSS/JSX without blowing away all the state (like modal windows, tabs, loaded data, etc).

dcre 12y ago

The main benefit for a developer, as far as I can tell, is that the state of the app is maintained between reloads. So you can interact with it — e.g., type into an input, make selections in dropdowns — then change the code behind it and everything you did will still be there. The site does say: > React Hot Loader will keep it mounted, preserving the state. but I agree that it could be more explicit about how it's useful.

seanmcdirmid 12y ago
Yes, not losing state is a big deal. This is possible because the UI is stateless while React is a view on that state. We built a similar system (for TouchDevelop) in a PLDI paper a few years back: http://research.microsoft.com/pubs/189242/pldi097-burckhardt.pdf http://research.microsoft.com/pubs/189242/pldi097-burckhardt... From the paper, adding a navigability aspect between UI and executing code is something that is fairly straightfoward to do and very useful. My current live programming work is over stateful code (meaning the code that is being live edited involves side effects). It is difficult to support that in existing programming models, however.

drdiablo 12y ago

It's instant feedback. You should try making an app with animations. You leave the animation looping and you modify your constants and you don't have to reload or do anything, ReactHotLoader will plug in your new code without losing the state of the app. You get much faster prototyping, collaborative tools out of the box and even a debugger with a timeline out of the box (you just have to save your state at every change and have a little scrollbar to scroll through your states). This is very very powerful.