search

ORESoftware / hr4R

Example project - "Hot Reloading 4 RequireJS" front-end web applications & some extra code demonstrating hot-reloading for Node.js Express servers
27 stars 1 forks source link

the readme and codebase will get an update soon #1

Open ORESoftware opened 8 years ago

ORESoftware commented 8 years ago

for any interested parties - I plan to update the readme and the codebase - will clean stuff up more and it will be completely react views

jgmio commented 8 years ago

I was curious how up to date your medium article / this repo was in regards to the current state of web-dev.

Thank you for your guidance in advance ;-)

ORESoftware commented 8 years ago

Medium article is pretty up to date. It looks like Webpack's hot reloading features went from "experimental" to "pretty solid". So if you are looking for something that works out of the box (although could break later and would be hard to fix) then go with Webpack.

The Medium article was all about DIY and how to implement it yourself.

I haven't updated this codebase, but I should do that. It needs a facelift to make it easier to understand what's going on.

jgmio commented 7 years ago

Thanks for the info. I'll check it out!

ORESoftware commented 7 years ago

Yeah, since I posted that comment on Nov 7, I started playing with CreateReactApp, it turns out that Webpack hot reloading / HMR is actually not stable, at all. They didn't even include HMR with CreateReactApp, because HMR is not stable enough. It's very difficult to implement with Webpack I think and it's totally non-trivial stuff. I found it very easy to implement with RequireJS. I was talking to Dan Abramov about it. Anyway, I don't think many people still want to mess with RequireJS anymore, so not sure it's worth trying to advocate for the RequireJS way, but it's certainly a lot, A LOT, easier to implement hot reloading with RequireJS than Webpack.

So I still stand by my argument that web dev is making it harder for hot reloading to exist. RequireJS had it right all along IMO. Webpack is overcomplicating things. Babel is overcomplicating things. Transpiling code is such a bad idea IMO.

ORESoftware commented 7 years ago

eg., read this: https://github.com/gaearon/react-hot-boilerplate/issues/97#issuecomment-249862775

nerdfiles commented 7 years ago

A full-page-reload is bad, that’s agreed on, but asynchronously loading new files on demand seems like a good thing.

I am in agreement with you here, for what it is worth. I am thrilled to discover your Medium article and that IOC-style dependency injection still has legs in this community.

I'm in the small camp that has found reward from combining AngularJS 1.x with RequireJS: https://github.com/marcoslin/angularAMD (and ui-router).

I will continue this development path as well. I'm very happy with the capabilities of nested dependencies, R.js, and combining these things with Cordova via Grunt to deploy to iOS and Android from Progressive Web Applications. It's very nice to have the explicit dependency chain facilitate not only the Web Application itself in terms of on-demand loading, but also your test runner (Karma) as well as a packaged/minified/obfuscated build to be utilized by Cordova. RequireJS really is outstanding in that it becomes very powerful glueware for development and build workflows.

Though I know you are using Gulp+React/Backbone, I could still learn from your work. At the same time I am looking into hot loading AngularJS as well, and I agree that client-side hot reloading is preferable compared to server-side hot reloading, given issues like https://github.com/glenjamin/webpack-hot-middleware/issues/135.

ORESoftware commented 7 years ago

Cool yeah after doing research for that article I did discover that people were pairing RequireJS with Angular 1.x to be able to do code splitting. I thought Angular 1.x was complicated enough, but I guess seasoned Angular 1 devs found adding RequireJS added value.

If you follow the methodology in the article (which TBH is not that clear, but it's there), you should be able to hot load Angular modules (although they will be RequireJS modules not Angular modules, if you are using RequireJS, if that makes sense to you, that's just a fact).

Let me know if you try it and want some help, I can take a look at the project. Rolling your own hot-reloading with RequireJS is pretty easy, at least with React and Backbone. I have personally used Angular 1.x a little bit and I think hot-reloading can be done. I can tell you this with certainty: if your front-end module system supports hot-loading of components, it is almost certain to support hot-RE-reloading of components. However, hot-reloading takes a little bit of extra care to ensure you update all existing references to the new module, otherwise you have dangling pointers to the old module that was unloaded.