Giters

seek-oss / sku

Front-end development toolkit

Home Page:https://seek-oss.github.io/sku

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

RFC: Hot Module Replacement

nicolassenechal opened this issue · comments

commented

Summary

Enables HMR, both for ssr and in the front-end

Motivation

HMR is useful for improving development experience and speed, avoiding to have to rebuild the project manually systematically

Detailed design

The design is based on this article: https://hackernoon.com/hot-reload-all-the-things-ec0fed8ab0
A basic and incomplete implementation can be found at: https://github.com/seek-oss/sku/tree/hmr-with-dev-server

Taks

  1. Update webpack.config to support hmr when in dev mode
  • extra entries
  • output.publicPath for client side hmr
  • externals for server-side rendering
  • extra plugins
  1. Update babel.config to support hmr (might not be required)
  2. Refactor start.js and build.js to be more re-usable

Usage

  1. The user calls sku start
  2. If the config is of type render, start.js creates the webpack devserver with hmr support
  3. If the config is of type server,start.js creates the webpack devserver with hmr support and build the server-side bundle

API changes

Two port numbers are now required when using server-side rendering. I would keep the current port option, but allow an array to be passed in. The first value would user by the server-side rendering, the second by the client-side hmr.

How We Teach This

We should point to general documentation about hmr

Drawbacks

  • webpack.config is going to become very complex, with test over dev/prod, static/ssr
  • that functionality is react-centric and relies on react-hot-loader

Alternatives

I looked at using middleware, instead of webpack dev server. The solution requires a lot more rewriting (branch here: https://github.com/seek-oss/sku/tree/hmr)

Unresolved questions

Initial tests showed some potential issues with async/await. Will need to investigate more

commented

To make the port setup more self-documenting, I propose that the sku option port be either a number or an object of the form {backend:int, client:int}.
Static rendering would only use the backend attribute in dev mode, and ignore the client attribute all the time.
Server-side rendering would use the backend attribute in both dev and prod, and the client attribute only in dev mode.