Introducing HSR, the Hot “State” Reloader behind Jumpsuit.js
If you’re one of the thousands of developers who use React, Redux, Webpack, or any combination of the three, you’re likely wondering what the heck Hot State Reloading is and why it sounds similar to Hot Module Replacement (or HMR). First, lets recap on the classic HMR:
“Hot Module Replacement” (HMR) is a feature to inject updated modules into the active runtime … It’s like LiveReload for every module.
Sounds pretty cool right? Imagine developing in your favorite IDE and any time you hit save, your code updates in real time, and no, I’m not referring to a simple live-reload. I’m talking about magically updating individual modules in place while maintaining the current state of your browser session. That is the goal of HMR.
This is something fairly new to javascript development, and in particular, something that Dan Abramov has set his sights on to make mainstream in the typical javascript workflow. I am totally on board with him, too.
If you have ever built anything on the web, I’m sure the keyboard shortcut to reload the browser is forever burned into your brain. I know because I used to use it at least a few hundred times every day. In the early days, thanks to live-reload, I started saving hundreds of those keystrokes and, to someone who cares about efficiency and automation as much as I do, it was heaven-sent.
As if that wasn’t enough though, we got CSS live-reloading soon after. Saving my styles and not even having to reload the page at all was magical. It just worked, and even better, the code to do this was minimal and easy to understand.
Then, this last year, I saw Dan Abramov’s Redux Time Travel presentation and my mind was blown. If you haven’t seen it, or don’t know what I’m referring to then, please, go watch a few minutes of it before continuing.
Seriously, this is where you go watch the video.
Like I said, mind blowing. This is where JavaScript is going. This concept unlocks a whole new level of efficiency and reliability in the dev workflow, and I don’t think we’ve even fully developed the amazing advantages HMR or even redux can offer on their own. I was instantly converted.
From {myFramework} to React, Redux & HMR
Taking an enterprise app like Nozzle to a whole new framework and data flow paradigm was a massive undertaking. In fact, before I could even start writing or converting any actual application code, I immediately found myself in a painful battle with build systems and HMR implementations. There are countless react-redux-webpack-hot-reload-whatever boilerplates that claim to have the perfect setup, but after a day or two of trying them all out, I was fed up.
HMR is very delicate and hard to get right.
If you don’t believe me, try digging into the guts of it for even 10 minutes and you’ll find a rabbit hole of hacks and tricks that should never be relied upon in a production environment. After seeing this mess, I tried to do the right thing and build one on my own to fully understand how it all worked under the hood. After a few more days of frustration, I eventually teamed up with Jason Maurer to find the right setup for a couple of different situations. This is what we found:
HMR tooling sucks big time.
And to prove it, rajaraodv describes a simple overview of the hellish process here:
If you happen to understand this process, I applaud you, and I wish you luck. But for the other 99% of developers who will never need, nor be able to understand this, I feel for you. How is anyone expected to know how to orchestrate all of this?
People have built many large projects (eg. @erikras’s react-redux-universal-hot-example) in attempts to make this a reality for the regular dev, but in the end, few actually succeed in utilizing it for good. More often than not, people get caught up fighting a build system they don’t fully understand, let alone utilizing it to write the code that really matters. See @holtbt’s tweet for more info ;)
Enter Jumpsuit and Hot State Reloading (HSR)
Jumpsuit is the brainchild of Zab and Nozzle and literally has its own article that you should read when you’re done here.
Jumpsuit introduces a new way to think about enabling and using redux-time-travel and hot module replacement. We thought to ourselves, why are we trying to preserve the state of our apps by rebuilding basically everything that surrounds it? Isn’t that what reloading the browser is supposed to do? When redux gave us this new ability to represent the entire state of our app in the most portable data structure ever (JSON), it seemed counter productive and backwards to not utilize this awesome superpower.
We took the simplest approach we could imagine and eventually came up with Hot State Reloading:
The process is very simple. Let me walk you through it:
- A file is changed somewhere in your app, which triggers the appropriate build system in Jumpsuit.
- A websocket message is sent to the Jumpsuit client, telling it that a reload is needed.
- The Jumpsuit client sends a copy of the current state to the CLI with a timestamp
- The Jumpsuit CLI saves the state into memory or disk for safe keeping
- The Jumpsuit client, refreshes the entire webpage
- With the help of the timestamp, the new Jumpsuit client requests the appropriate state from the CLI
- The state is loaded into redux and redux-dev-tools
A Return to Basics
The front-end development world has become an insanely fast-paced one and there are tons of new developers entering our space every day. Building tools that enable us to move faster and write better code are invaluable, but not at the cost of ease-of-use and design. Jumpsuit and HSR are steps toward making the life of a normal developer easier. You shouldn’t have to be an expert webpack configurator, or redux wizard to use the latest and greatest dev tools.
So head over to the Jumpsuit repo and try it out! No configuration, boilerplate, or HMR knowledge required! We promise you’ll never want to start another project without it again.
HSR is only a small part of Jumpsuit. Its a fresh take on battle tested concepts from Facebook and redux, and make building apps fun again!
