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.

Simple demo

How does it work?

Webpack

Socket Server

Runtime

module.hot

How does it work?

• A small runtime is injected into the app bundle.
• This runtime uses sockets to communicate with an external server.
• When a file is changed, Webpack notifies the external server which modules have changed. 
• The external server sends a message through the socket to the runtime.
• The runtime triggers `module.hot` propagation.
• The app is updated or fails and requires a full reload.

Yoshi's server-side HMR

• Yoshi runs Webpack and sends socket messages to the runtime it injects.
• Defines auto-magic app-wide HMR with `bootstrap-hot-loader`.

Let's code :)

Questions?

ronami@github