7 ms·

React Hot Loader: Tweak React Components in Real Time

191 points by danabramov 12y ago

cnp 12y ago
That animated logo is so amazing! A+. Really well done. And just beautiful website in general.
- danabramov 12y ago
  Props go to Josh Hillier (https://twitter.com/_joshhillier/ https://twitter.com/_joshhillier/) and his Pen (http://codepen.io/joshy/details/cojbD http://codepen.io/joshy/details/cojbD). I later converted it to use React Tween State (https://github.com/chenglou/react-tween-state https://github.com/chenglou/react-tween-state) for animation. Gadzhi (you may know him as the designer behind Sublime Spacegray theme, http://kkga.me/ http://kkga.me/) helped polish the logo and added the outer animation. It's currently in CSS but I plan to to move it into the component as well. Logo source code: https://github.com/gaearon/react-hot-loader/blob/gh-pages/_includes/logo.html https://github.com/gaearon/react-hot-loader/blob/gh-pages/_i...
deleted 12y ago
[deleted]
danabramov 12y ago
If you're wondering about the magic behind this, see an older more technical post: http://gaearon.github.io/react-hot-loader/2014/07/23/integrating-jsx-live-reload-into-your-react-workflow/ http://gaearon.github.io/react-hot-loader/2014/07/23/integra...
brendanib 12y ago
I've been using this for almost three months now and it's fantastic, hard to work without it.
- danabramov 12y ago
  Thanks!
kylemathews 12y ago
This stuff is the real deal. I've been using it for ~6 months now and can't imagine now building websites without it. For Coffeescript fans, I use this to start off all new apps — https://github.com/KyleAMathews/coffee-react-quickstart https://github.com/KyleAMathews/coffee-react-quickstart
- desireco42 12y ago
  Thank you
jasim 12y ago
This is amazing stuff, thanks Dan! Hopefully it is the beginning of the end of refresh-driven-development. If you are a web developer (front-end/back-end), and you haven't switched to React yet, take this for a spin, and read "Facebook just taught us all how to build websites" (https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2 https://medium.com/@ericflo/facebook-just-taught-us-all-how-...), and watch 'React - Rethinking Best Practices' by Pete Hunt (https://www.youtube.com/watch?v=DgVS-zXgMTk https://www.youtube.com/watch?v=DgVS-zXgMTk). The distinction between the back-end and front-end is a product of the complexity introduced by the web with its 'worse is better' mix of badly integrated tools. It made building user interfaces a dark art with all its quirks: - a layouting system that had an active vendetta against humans - Javascript with all its deficiencies - Connascence introduced by Server <-> Client communication (Server Model <-> API View <-> JS Model <-> JS View) - declarative views that were ill-suited for web-apps (logic-less templates, what a lie!) - cross-browser incompatibilities - difficulty in implementing client-side routing - immature developer tooling But worst of them all was DOM mutation and spaghetti code, which was in reality a fundamental deficiency of the development model itself, and not because web developers the world over were being deliberately irresponsible. React is changing all that with the help of ES6. It simplifies web development both in concept and in practice. In a few years, building UIs would be just another part of writing software, and competent Full-Stack developers would cease to remain unicorns. Here are a few things that React approaches differently that makes all the difference: - templates are a bad idea. views are constructed imperatively, not declared. (plug: http://www.jasimabasheer.com/posts/on-react.html http://www.jasimabasheer.com/posts/on-react.html) - the basic unit of a front-end system is a 'component'. A component knows how it is rendered (HTML), how it is styled (CSS), how it behaves (JS), and has explicit knowledge of the data it handles (states and props). - everything should be programmable: even HTML and CSS. (https://speakerdeck.com/vjeux/react-css-in-js https://speakerdeck.com/vjeux/react-css-in-js) The React team seems to be looking at what makes web development actually hard and are thinking outside ill-advised conventional wisdom (like separation of concerns. whose concerns anyway?). For example, Relay (https://gist.github.com/wincent/598fa75e22bdfa44cf47? https://gist.github.com/wincent/598fa75e22bdfa44cf47?), removes the need for writing custom API end-points for each of our components. A component already knows the data it needs, but today we leak that info across the component hierarchy and to the server, creating a lot of accidental complexity. Another example is Webpack (http://webpack.github.io/ http://webpack.github.io/), which changes asset management on the web by making it completely programmable. All your static assets should have the same bundling conveniences that your JS has. Webpack also makes react-hot-loader possible with Hot Module Replacement. React seems to have finally figured out the right direction to take the web to. Exciting times.
giodamelio 12y ago
That looks pretty cool. I will have to try it out. I have been meaning to check out webpack for awhile anyway.
debaserab2 12y ago
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.
coding4all 12y ago
David Nolen had this going for the ClojureScript community about 3 months ago https://www.youtube.com/watch?v=gI3fJKmvgq4 https://www.youtube.com/watch?v=gI3fJKmvgq4
- coderzach 12y ago
  This has been around much longer than 3 months.
  - coding4all 12y ago
    I'm just talking about when the video was made/uploaded.
- sbensu 12y ago
  Don't forget Figwheel, it has been around since April 2014 https://www.youtube.com/watch?v=KZjFVdU8VLI https://www.youtube.com/watch?v=KZjFVdU8VLI https://github.com/bhauman/lein-figwheel https://github.com/bhauman/lein-figwheel
  - coding4all 12y ago
    I'm just talking about when the video was made/uploaded.
- danabramov 12y ago
  Indeed, this is simpler in ClojureScript world where all state is kept in a single place. It's harder to do the same for JavaScript React components that may have local state, but as you see, it's perfectly possible. Also, as far as I'm aware, ClojureScript hot reloading tools actually unmount the component. This may be OK because state is restored from one source, but it's not as nice-looking because DOM is thrown away on every update, and it flickers.
  - coding4all 12y ago
    What? When's the last time you've used Chestnut? Do you have an example I could look at? I ask because it sounds like you're doing something that re-renders the entire application instead of the components that need to update.
modarts 12y ago
This is beautiful and important work. I appreciate the efforts of developers improving the collective productivity of other developers.
ch0wn 12y ago
There's been a great talk about the workflow that this enabled at React Conf that is now on YouTube: https://www.youtube.com/watch?v=yaymfLj5tjA https://www.youtube.com/watch?v=yaymfLj5tjA
tommyd 12y ago
Interesting - I've just started playing around with jspm and system.js as showcased in the "Javascript in 2015" video that did the rounds (http://glenmaddern.com/articles/javascript-in-2015 http://glenmaddern.com/articles/javascript-in-2015) and I'm wondering if there is a way to achieve something similar with that tooling? Can webpack be used alongside jspm and system.js or do I need to change the way files are required?
- danabramov 12y ago
  Hi, I don't think it's possible with System.js. Nevertheless I decoupled internal implementation from Webpack so it can be used in future hot-reload-capable build systems: https://github.com/gaearon/react-hot-api https://github.com/gaearon/react-hot-api If you find a way to make it work with System, let me know!
lurkylurk 12y ago
Is this different than how Meteor does reactive components?
- danabramov 12y ago
  Hard to say without knowing how Meteor does them!

191 points by danabramov 12y ago

cnp 12y ago

That animated logo is so amazing! A+. Really well done. And just beautiful website in general.

danabramov 12y ago
Props go to Josh Hillier (https://twitter.com/_joshhillier/ https://twitter.com/_joshhillier/) and his Pen (http://codepen.io/joshy/details/cojbD http://codepen.io/joshy/details/cojbD). I later converted it to use React Tween State (https://github.com/chenglou/react-tween-state https://github.com/chenglou/react-tween-state) for animation. Gadzhi (you may know him as the designer behind Sublime Spacegray theme, http://kkga.me/ http://kkga.me/) helped polish the logo and added the outer animation. It's currently in CSS but I plan to to move it into the component as well. Logo source code: https://github.com/gaearon/react-hot-loader/blob/gh-pages/_includes/logo.html https://github.com/gaearon/react-hot-loader/blob/gh-pages/_i...

deleted 12y ago

[deleted]

danabramov 12y ago

If you're wondering about the magic behind this, see an older more technical post: http://gaearon.github.io/react-hot-loader/2014/07/23/integrating-jsx-live-reload-into-your-react-workflow/ http://gaearon.github.io/react-hot-loader/2014/07/23/integra...

brendanib 12y ago

I've been using this for almost three months now and it's fantastic, hard to work without it.

danabramov 12y ago
Thanks!

kylemathews 12y ago

This stuff is the real deal. I've been using it for ~6 months now and can't imagine now building websites without it. For Coffeescript fans, I use this to start off all new apps — https://github.com/KyleAMathews/coffee-react-quickstart https://github.com/KyleAMathews/coffee-react-quickstart

desireco42 12y ago
Thank you

jasim 12y ago

This is amazing stuff, thanks Dan! Hopefully it is the beginning of the end of refresh-driven-development. If you are a web developer (front-end/back-end), and you haven't switched to React yet, take this for a spin, and read "Facebook just taught us all how to build websites" (https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2 https://medium.com/@ericflo/facebook-just-taught-us-all-how-...), and watch 'React - Rethinking Best Practices' by Pete Hunt (https://www.youtube.com/watch?v=DgVS-zXgMTk https://www.youtube.com/watch?v=DgVS-zXgMTk). The distinction between the back-end and front-end is a product of the complexity introduced by the web with its 'worse is better' mix of badly integrated tools. It made building user interfaces a dark art with all its quirks: - a layouting system that had an active vendetta against humans - Javascript with all its deficiencies - Connascence introduced by Server <-> Client communication (Server Model <-> API View <-> JS Model <-> JS View) - declarative views that were ill-suited for web-apps (logic-less templates, what a lie!) - cross-browser incompatibilities - difficulty in implementing client-side routing - immature developer tooling But worst of them all was DOM mutation and spaghetti code, which was in reality a fundamental deficiency of the development model itself, and not because web developers the world over were being deliberately irresponsible. React is changing all that with the help of ES6. It simplifies web development both in concept and in practice. In a few years, building UIs would be just another part of writing software, and competent Full-Stack developers would cease to remain unicorns. Here are a few things that React approaches differently that makes all the difference: - templates are a bad idea. views are constructed imperatively, not declared. (plug: http://www.jasimabasheer.com/posts/on-react.html http://www.jasimabasheer.com/posts/on-react.html) - the basic unit of a front-end system is a 'component'. A component knows how it is rendered (HTML), how it is styled (CSS), how it behaves (JS), and has explicit knowledge of the data it handles (states and props). - everything should be programmable: even HTML and CSS. (https://speakerdeck.com/vjeux/react-css-in-js https://speakerdeck.com/vjeux/react-css-in-js) The React team seems to be looking at what makes web development actually hard and are thinking outside ill-advised conventional wisdom (like separation of concerns. whose concerns anyway?). For example, Relay (https://gist.github.com/wincent/598fa75e22bdfa44cf47? https://gist.github.com/wincent/598fa75e22bdfa44cf47?), removes the need for writing custom API end-points for each of our components. A component already knows the data it needs, but today we leak that info across the component hierarchy and to the server, creating a lot of accidental complexity. Another example is Webpack (http://webpack.github.io/ http://webpack.github.io/), which changes asset management on the web by making it completely programmable. All your static assets should have the same bundling conveniences that your JS has. Webpack also makes react-hot-loader possible with Hot Module Replacement. React seems to have finally figured out the right direction to take the web to. Exciting times.

giodamelio 12y ago

That looks pretty cool. I will have to try it out. I have been meaning to check out webpack for awhile anyway.

debaserab2 12y ago

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.

coding4all 12y ago

David Nolen had this going for the ClojureScript community about 3 months ago https://www.youtube.com/watch?v=gI3fJKmvgq4 https://www.youtube.com/watch?v=gI3fJKmvgq4

coderzach 12y ago
This has been around much longer than 3 months.
- coding4all 12y ago
  I'm just talking about when the video was made/uploaded.
sbensu 12y ago
Don't forget Figwheel, it has been around since April 2014 https://www.youtube.com/watch?v=KZjFVdU8VLI https://www.youtube.com/watch?v=KZjFVdU8VLI https://github.com/bhauman/lein-figwheel https://github.com/bhauman/lein-figwheel
- coding4all 12y ago
  I'm just talking about when the video was made/uploaded.
danabramov 12y ago
Indeed, this is simpler in ClojureScript world where all state is kept in a single place. It's harder to do the same for JavaScript React components that may have local state, but as you see, it's perfectly possible. Also, as far as I'm aware, ClojureScript hot reloading tools actually unmount the component. This may be OK because state is restored from one source, but it's not as nice-looking because DOM is thrown away on every update, and it flickers.
- coding4all 12y ago
  What? When's the last time you've used Chestnut? Do you have an example I could look at? I ask because it sounds like you're doing something that re-renders the entire application instead of the components that need to update.

modarts 12y ago

This is beautiful and important work. I appreciate the efforts of developers improving the collective productivity of other developers.

ch0wn 12y ago

There's been a great talk about the workflow that this enabled at React Conf that is now on YouTube: https://www.youtube.com/watch?v=yaymfLj5tjA https://www.youtube.com/watch?v=yaymfLj5tjA

tommyd 12y ago

Interesting - I've just started playing around with jspm and system.js as showcased in the "Javascript in 2015" video that did the rounds (http://glenmaddern.com/articles/javascript-in-2015 http://glenmaddern.com/articles/javascript-in-2015) and I'm wondering if there is a way to achieve something similar with that tooling? Can webpack be used alongside jspm and system.js or do I need to change the way files are required?

danabramov 12y ago
Hi, I don't think it's possible with System.js. Nevertheless I decoupled internal implementation from Webpack so it can be used in future hot-reload-capable build systems: https://github.com/gaearon/react-hot-api https://github.com/gaearon/react-hot-api If you find a way to make it work with System, let me know!

lurkylurk 12y ago

Is this different than how Meteor does reactive components?

danabramov 12y ago
Hard to say without knowing how Meteor does them!