Enable Hot Reloading

[arunoda]

It would be super awesome, if we have hot reloading support. So, we don't need to have a full browser reload.

Is this planned?

[philcockfield]

Hey @arunoda - hope you are well! Nice to hear from you.

Yeah, I took it out a while back because it was causing some weird issues, but that was prior to a major refactor for Version 3.x, so I'll put it back in and see I'm still seeing that problem.

Good call.

[frederickfogerty]

Psst @philcockfield, I've been using this with great success https://github.com/gaearon/babel-plugin-react-transform

[philcockfield]

Cool @frederickfogerty - I hadn't seen the HMR used like that before.

[arunoda]

@philcockfield Yeah. react-transform* related package are the way to go. Last time I checked, it doesn't work with stateless components. May be it has been fixed.

[frederickfogerty]

Yeah @arunoda it works with stateless components AFAIK

[arunoda]

@frederickfogerty Check this warning here: https://github.com/gaearon/react-transform-hmr#react

May be they didn't update the README. Didn't tried.

[D1no]

Just want to bump this. Was surprised, that this is not default. Uiharness is the perfect place to make and see real-time iterations on components. Especially when meteor and most rest systems take years to rebuild a view.

[philcockfield]

The original hot-reloader has been deprecated - which is what UIHarness used to use. We removed it because it was causing a strange problem and didn't get around to putting it back in yet.

BTW: @D1no, have you done with UIHarness yet? It does auto-reload on file change, and my experience is pretty quick - certainly a world of difference from waiting for a Meteor re-build. Because the experience has been for the most part fast enough while developing, this has left getting "hot reloading" as relatively low priority.

Would like to get a sense of whether others agree?

---

Regarding the "hot reloader" - this looks like the latest hot-reloader: https://github.com/gaearon/react-transform-boilerplate

It says "Highly Experimental" so I'm happy to wait for this to settle down before putting it in. Or is there another hot-reloader that people are converging on.

[frederickfogerty]

Since most of the application state is maintained by the UI harness (so-called cold reloading), I'm not sure that this project even needs true hot reloading.

In any case, this is the latest hot reloader:
https://github.com/gaearon/react-proxy https://github.com/gaearon/react-hot-loader/pull/182

Also see https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.t6vphavu4

[frederickfogerty]

@philcockfield react-transform is deprecated :)

[D1no]

@philcockfield I just tried it out. It is not much faster than meteor and ... really, if you go once HMR, you never go back... its like typing through source on the screen. Very efficient. Little complicated, but even works remote (www.github.com/d1no/touch2s)

Anyhow - with no intent to pull you back into the meteor forums - gadicc did a pretty good write up on this stuff. As @arunoda said, babel transformers are probably the way to go https://forums.meteor.com/t/what-is-hot-reloading-and-code-splitting-webpack-webpack-vs-ecmascript-hot/19734

Edit: I don't believe it's a big deal to add HMR to uiharness. But I am deep in time difference right now (its 3 am here in Cologne, Germany) - so I'll maybe check it out tomorrow. A self documenting UI-Library would be a great auditing tool... especially if its used, because it is simply more lightweight for iterative changes than working always directly in the infrastructure. Enjoy the few more hours of sunday guys. Good night!

[arunoda]

Guys, I did some digging into this topic and finally end of building a similar tool and I call it React Storybook.

That's basically based on the idea of UI harness. But, I could add a few more features.

In their I used HMR but not React HMRE. As @frederickfogerty mentioned, we don't need to use React HMRE. We can directly use Webpack's hot reloading API.

See: https://github.com/kadirahq/react-storybook/blob/master/src/client/config_api.js#L45

Hope this helps someway.

[frederickfogerty]

@arunoda React Storybook looks slick. Just a question: why did you decide to create your own implementation, rather than contributing to this repo?

And how'd you get so many stars?

[arunoda]

I decided to do a fork and work on this. I was a newbie to Webpack and these HMR stuff. But, I wanted to learn and we really need a tool like this.

Eventually I ended by doing React Storybook. I tried to look at the source code of UI Harness, but I couldn't understand it.

Then our team suggest new features like using an Iframe to use render the preview and allow to load CSS stuff. So, I think that's how this went away from UI harness.

---

And how'd you get so many stars?

I think I can write some decent articles: https://voice.kadira.io/introducing-react-storybook-ec27f28de1e2 :)

[philcockfield]

Congratulations on Storybook @arunoda. And thanks for the GraphQL tutorial - http://learngraphql.com/

[arunoda]

Thanks @philcockfield. Glad you like it.