Reactive Development

by Andrey Okonetchnikov, @okonetchnikov

Reactive Development

Andrey Okonetchnikov
http://okonet.ru
@okonetchnikov

Conventional development

Reactive development

Tools

  1. BrowserSync (http://www.browsersync.io) — reloads the page when the file changes (OK)
  2. LiveReload (http://livereload.com) — injects CSS without reloading (Better)
  3. ...

What if...

we could update the page without full refresh (Best)

React + webpack + react-hot-loader

React.js principles

  1. Just the UI
  2. Virtual DOM
  3. Data Flow

webpack Hot Module Replacement

Hot Module Replacement (HMR) is a way of exchanging modules in a running application (and adding/removing modules). You basically can update changed modules without a full page reload.

http://webpack.github.io/docs/hot-module-replacement-with-webpack.html

Simple setup


> npm install --save webpack webpack-dev-server react jsx-loader react-hot-loader
> webpack-dev-server -d --colors --hot --inline
		

Configure webpack


// webpack.config.js
module.exports = {
	...
	module: {
		loaders: [
			{
				test: /\.jsx?$/,
				loaders: ["react-hot", "jsx-loader?harmony"],
				exclude: /(node_modules|bower_components)/
			}
		]
	}
};
		

Demo...

How it is better than...

Difference between...

How it works?

Magic

No, seriously!

How react-hot-loader works

Where do I learn more?

Thanks!

Andrey Okonetchnikov,
@okonetchnikov