A talk for LondonJS on architecting web applications to enable hot reloading
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
data
notes
presentation
src
vendor
.babelrc
.eslintrc
.gitignore
README.md
index.html
package.json
webpack.config.js

README.md

Hot Reloadable Web Apps with React and Redux

This is a talk given at the LondonJS meetup group about how hot reloading works and how it is enabled by Elm-style architecture for web apps using React/Redux.

Presentation Slides

GitHub Stats Dashboard demo app

This is a demo app to illustrate how to implement hot reloading using React/Redux "from scratch", rather than relying on the existing Webpack plugins.

There are a few things you should bear in mind if you want to use the code here as a basis for supporting hot reloading and similar debug tools in your own app:

  • The code here is intended to be explicit for people who are not familiar with Redux's API. See the Redux video tutorial and examples for a guide that explains best practices for structuring your app.

  • The code here is written with classic ES5-era JavaScript for simplicity. ES2015 provides a number of features which make writing functional code easier.

  • Rather than wrapping React components manually to preserve local state between updates, you can use the react-transform-hmr plugin for Webpack

Setup

  1. Install and start the app
npm install
npm start
open http://localhost:8080
  1. Enter 'organization/repository' (eg. 'jquery/jquery') in the box for one of the charts and click 'Fetch Stats'

  2. Open the 'ActivityChart.js' source file and in the convertCommitStats() function, change the values for the strokeColor or fillColor properties.

  3. Switch back to the app. You should see the code changes reflected live and the state of the app preserved.

Hot Reloading Limitations and Caveats

These are notes on various limitations and caveats with the current version of the Hot Reloading tools (stable releases of React, Webpack etc. as of 30/01/16) that I encountered whilst preparing this talk which you might wish to be aware of:

Learning Resources