
React Hot Loader: Tweak React Components in Real Time - danabramov
http://gaearon.github.io/react-hot-loader/
======
kylemathews
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
Thank you

------
danabramov
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/integra...](http://gaearon.github.io/react-hot-
loader/2014/07/23/integrating-jsx-live-reload-into-your-react-workflow/)

------
coding4all
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)

~~~
sbensu
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
I'm just talking about when the video was made/uploaded.

------
tommyd
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
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!

------
jasim
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-...](https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-
websites-51f1e7e996f2)), 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.

~~~
nightski
I like a lot of what I see with react except the lack of 2 way data binding.
Mainly, I tend to have input data tables for forecasting, cost estimation, and
so forth with a lot of data inter-dependencies and calculations. It seems
going back to the method of handling data updates through onchange events in a
manual fashion would be a colossal step backwards from say, knockoutjs.

~~~
danabramov
Nope. Lack of two-way binding is a blessing. It makes everything predictable.

>It seems going back to the method of handling data updates through onchange
events in a manual fashion would be a colossal step backwards from say,
knockoutjs.

It's not exactly "manual fashion" because React updates everything according
to `state` for you. If you have many interdependent fields, make them update
`state` correctly, and React will keep them in sync with it.

In fact I find it easier to make complex input logic with one-way bindings
because the data always flows one way. It's a tad more code to write, but you
see exactly where your updates are happening and what's causing them.

Two-way binding tends to get _very_ complicated as soon as you need more
complex logic. One-way binding doesn't have this problem.

~~~
nightski
I'm not sold two-way binding tools get inherently complicated, I just haven't
seen this increase in complexity in our current app which is quite large. But
I am attracted to react for the reasons you mention, the virtual DOM aspect is
very nice so I'll give this a shot.

Although even though ReactLink works it a.) feels like quite the hack (i.e.
not very composable) and b.) is a more code to maintain still when it comes
down to it.

------
ch0wn
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)

------
debaserab2
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.

~~~
dcre
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
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...](http://research.microsoft.com/pubs/189242/pldi097-burckhardt.pdf)

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.

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

~~~
danabramov
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/_i...](https://github.com/gaearon/react-hot-loader/blob/gh-
pages/_includes/logo.html)

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

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

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

~~~
danabramov
Thanks!

------
lurkylurk
Is this different than how Meteor does reactive components?

~~~
danabramov
Hard to say without knowing how Meteor does them!

