React Hotloading in native Meteor is ready (i.e. no webpack)

Edit your react components and see changes instantly, while maintaining state.

Note: the implementation is hacky by design. The idea is to bring react hot loading to Meteor today, and give us / MDG more time to work out the best way to do this in the long term (see e.g. this post).

Project home: GitHub - gadicc/meteor-hmr: Hot Module Replacement for Meteor; in your app, with react, with build plugins (see README for installation instructions).

56 Likes

History at https://github.com/gadicc/meteor-react-hotloader/blob/master/History.md.

Looks awesome. I must admit I saw the words “Native” and “React” and thought this was something to do with React Native!

1 Like

Thanks. Fair feedback, hope I made this clearer now :slight_smile:

2 Likes

If I don’t have to mess with webpack and get improved reload times, hacky works until MDG sorts their stuff out, so I’m highly interested in this

3 Likes

This is nice. I like to see more info :slight_smile:

2 Likes

Interested! Operation stalk your github account active now!

3 Likes

So when you say hot reload, you mean only that javascript file is swapped out? I’m not familiar with the term.

Yes, that’s what made webpack huge. No more dealing with Meteor’s slow reload times.

2 Likes

You had my curiosity. Now you have my attention :smile:

The real thing would be awesome someday.

You forgot the link:

2 Likes

Hey,

I just check the repo is this is super awesome.
And the use of react-transform related packages in the way to go.

I think bundle data via Mongo is fine until we fix other burning issues.
We could find out something better later on.

1 Like

Hot reloading in native Meteor is super awesome, but I have an offtopic question.
What color scheme and font do you use?

Haha I left out the repo link on purpose, it’s not really ready for use yet. I’m back next week and will finish things up for a proper release. But I did make a few tiny fixes in the mean time for the eager beavers :smile: (In that case, let me know your experiences…)

Also, just to clarify, it’s more than “faster reload times”. The client doesn’t reload at all; only changed code is injected into the client, respecting modules, and updating (proxied) react components so they stay mounted and keep their state! (This last part is the work of the amazing @gaearon / dan abramov as in webpack and is a massive time saver for development! Think about not needing to re-open dialogs, select options, etc, after saving.)

@goatic, even though this isn’t “the right way”, so far it seems to work really well! With a bit more time I’ll be able to say exactly where this will and won’t work. But at the most, for stuff we can’t do, we’ll simply force a real refresh like before.

Thanks @arunoda for the kind words :slight_smile: Besides Mongo, the hacky stuff is how we trick Meteor’s build process to not refresh, bypass the linker, and totally hack modules-runtime :> But it’s working super smooth so far. I’ll also mention that I plan to officially support MantraJS patterns.

@imkost :slight_smile: In sublime3, color scheme is “Packages/Babel/Monokai Phoenix.tmTheme” (via the babel package). I don’t have a font specified in my user settings, so I guess it’s the system Monospace font which I’ve set to Liberation Mono. I’m using the Infinality font patchset for rendering (with the regular archlinux font settings recommendations).

3 Likes

Why do we have to use react-mounter to mount the components? I’ve been using ReactDOM.render just fine lately.

1 Like

I’m not 100% sure what the final recommendations will look like. Actually, the example in the screencapture is using ReactDOM.render… so I guess this will be supported too :slight_smile: I just need to do a bit more research into the best way to trigger everything, and ran out of time… I think I know though, so expect more next week :>

The thought behind that choice is that React is going outside of the DOM. You can render to native, to your toaster, soon ReactKitchenSink.render will be a real thing.

So they’ve extracted it to ReactDOM because it only renders to the DOM.

Does it make sense? Yes. Is it cludgy? Maybe? I don’t know.

Love it! Looking forward to seeing it take shape and becoming de facto on the meteor dev front

2 Likes

I think we can work on this. I suggest you to open a issue on Meteor’s github and I hope we will have a way to do it a less hacky way. This is a really important project.

13 Likes

@gadicc: You always surprise me. Wow. Super awesome. Kudos :dizzy:

4 Likes