Hot Module Replacement

What is it? How does it work?

What's Hot Module Replacement?

• A mechanism for reloading an app after its code has changed. It's extremely fast and doesn't lose the application state.
• Not automatic. Apps are responsible for defining how every module should be reloaded.
• Not specific to browsers, can work in any JavaScript environment.

Simple demo

index.js

renderApp.js

welcome.js

How does it work?

Webpack

Writes updates

Runtime

module.hot

App process

Webpack process

It's similar in the browser

Webpack dev server

Opens a socket

Runtime

module.hot

Webpack process

Browser process

Yoshi's server-side HMR

Runtime

Yoshi

serverCompiler

devServer

App server

module.hot

Browser

Runtime

Refresh

IPC

So far all this does is allow us to use `module.hot`

Automatic server reload

• Create an empty Express router.
• Run the wrapped function to apply middleware.
• Delegate all requests to the newly created router.
• When a change is made, discard the old router, create a new one and apply the new wrapped function with it.

Questions?

ronami@github