Redux: server side rendering and hot code reload for single-page applications

1. REDUX
SERVER SIDE RENDERING AND HOT CODE
RELOAD FOR SINGLE-PAGE APPLICATIONS

2. Overview
• Full-stack Application
• Hot code reload (hot module
replacement)

3. Full-stack Applications
• Also known as Isomorphic
• Assembling pages on either client or
server

4. Full-stack Applications (in past)
• Render some (or all) data on server
• Bind HTML on client
• Render data on client (if server didn't)
• Different codebase for sever and client

5. Full-stack Applications (now)
• Render some (or all) data on server
• Render and bind data on client
• Same codebase for sever and client
• jsBlocks, Redux

6. Full-stack Applications (now)
Demo

7. Hot Module Replacement
• We have it in CSS (SASS, LESS,
STYLUS)
• It is called live-reload
• It is awesome!

8. Hot Module Replacement (how?)
• Only modules can be hot replaced
• Reuse application state

9. Hot Module Replacement
Demo

10. Hot Module Replacement (how?)

11. Other Redux benefits
• History traversal
• Easy cache management
• Share models

12. References
• Is "Isomorphic JS" a good term?
http://www.2ality.com/2015/08/isomorphic-javascript.html
• Hot module replacement with Webpack
https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack
• Redux documentation
http://rackt.github.io/redux/docs/
• Redux devtools
https://github.com/gaearon/redux-devtools
• React Redux Universal Hot Example
https://github.com/erikras/react-redux-universal-hot-example