Me working on React Hot Reload

Confession: I have no idea how Hot Reload works

First, let me give you some back story.

A long time ago, when I first decided to try out a new way to build websites, I decided to go with React. I thought it looked great since it had themes similar to Android programming, my first love (onCreate === componentWillMount, etc.). But then I saw it had this crazy JSX syntax I had never seen before, and I was all like “how is that JavaScript?”

That was when I met Webpack.

(After I met Babel of course)

What even is Webpack?

If you’ve never worked with Webpack, it’s one of the most painful things you’ll ever have to deal with. If you’re a Webpack veteran, you’ll probably agree that it’s one of the greatest technologies that’s ever been released. I personally fall somewhere in the middle.

Webpack is a module bundler. If you’ve never worked with Webpack before, that obviously sounds vague and probably doesn’t make a lot of sense (If however you’re a Webpack pro, you’re like duh). The next logical question is, “what is a module bundler?” In short, this solves a common problem with native JavaScript which can be plagued with an “all code goes in one big file” problem. With Webpack you can separate your code into different files, and import or require them from different files.

This lets you build code in a much more Java-ish way. Now you can create a class, maybe something like this:

And when you want to use your new SpecialConsole class, all you have to do is something like this:

Pretty nifty right? Webpack is the glue that makes this possible. Basically, Webpack will convert these two files into something like this:

(Note that this is a highly simplified example, the Webpack compiled code looks much more cryptic and uses a more intelligent bundling algorithm than just copying and pasting)

Sounds pretty great right?

The problem with Webpack

Webpack is hard to get started on. There’s a large amount of documentation, but it’s written in such a way that it’s only beneficial for someone who actually knows what Webpack is and how it works. I mean, look at this picture on the Webpack home page.

From the Webpack home page

When I first saw that, having no idea what Webpack was, I was very confused.

The Webpack configuration file

Webpack basically requires that you have a giant configuration file, that specifies how Webpack will actually compile your modules. I’ve seen many approaches to writing these files, but I have no difinitive recommendation on how to do it. Personally, I like to go with the “just get it done” approach. Here’s what my configuration file looks like:

Which is a hot mess, I know. The biggest issue is I just don’t care about Webpack. I want it to work, and that’s it. There’s no elegance to writing a Webpack configuration file and the client doesn’t care how well our modules are bundled. In the end, it helps the development process but doesn’t directly improve the final product, and as a result I hate spending time on it.

The alternatives to Webpack tout a much easier setup process (specifically, I’m talking about Browserify). I’ve only had limited interaction with Browserify, so I’ll leave it up to you to deduce you’re own conclusions. Here’s a great comparison of Webpack alternatives.

Getting to Hot Reload

This brings me to my true confession. This is hard for me, because a key component to my job is pretending I know what I’m doing.

(deep breath)

I have no idea how Hot Reload works. And how Webpack Dev Server plays in to Hot Reload? Forget about it. And throw in React Hot Loader? No way. Way over my head.

(For this next paragraph take everything you read with a grain of salt. Remember what the title of this article is.)

The whole idea behind Hot Module Replacement (which I just call Hot Reload) is that when you update one file in your big list of files, Webpack will recompile only that file, and feed it to your JavaScript in a LiveReload sort of way, so that it splices itself into the code you’re already running. This means that you don’t have to do a full page refresh to see your updated code, it should just magically happen. Socket.io is involved. And with React Hot Loader, if Webpack Hot Module Replacement fires, your React components are updated without losing their internal state, which can be a lifesaver for development time. But beyond this general theory of how it works, I have no idea the internal mechanisms that make it happen.

The problem is when the Hot Reload breaks. Or when there’s a version upgrade. Or you decide you want to tweak something in your Webpack configuration file, and something goes wrong. For me it turns out React Hot Loader doesn’t play well with decorators, which I recently started using. Since I have no idea how this technology works, I can’t make a plan on how to fix it, and I’m stuck with a “guess and check” method.

Unfortunately, this article doesn’t have a happy ending. I’m not sure why I wrote this, maybe it’s a cry for help (not like, with life, just with Hot Reload), maybe it’s just something I had to get off my chest.

Are there any technologies you use but have no idea how they work? In my opinion, the best thing to do in a situation like that is to just say it with pride.

I have no idea how Hot Reload works.

From the docs https://webpack.github.io/docs/hot-module-replacement-with-webpack.html