React and Flux

Motivation

alternatives

look busy

the future is coming

Web components are coming which will solve many of the problems of quickly being able to iterate by composition of elements/functionality.

But the spec is far from complete and general adoption amongst popular browsers will take a while.

We should prepare but we also need a solution for now.

React?

What is react?

UI LAYER

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);

React makes no assumptions about the rest of your technology stack, it can (fairly) easily be used as the V in MVC.

Virtual DOM

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {
      name: 'Jack'
    }
  },
  handleChange: function( newName ) {
    this.setState({
      name: newName
    });
  },
  render: function() {
    return (
      <div>Hello <span class="highlight">{this.state.name}</span></div>;
    )
  }
});

React.render(<HelloMessage />, mountNode);

React uses a virtual DOM diff implementation for ultra-high performance.

React will calculate the least number of DOM manipulations to achieve the template changes.

stateful

var todoList = [ ... ];

this.setState({
  className: 'open',
  isOpen: true,
  todos: todoList
});

React is manipulated primarily via state.

By convention, states are applied to controller-views. When the state changes in a view the changes propagate down the element hierarchy.

This propagation results in the render method of children being called and diffs being calculated—if required. Empty function calls (or early returns) aren’t a performance concern, DOM manipulations are.

data flow

React implements one-way reactive data flow.

This data flow reduces boilerplate and makes it easier to reason about the intention of an application. Flux, a complementary library/architecture, runs with this premise by implementing dispatchers.

User intentions (or desired actions) are emitted (dispatched) as events. Any callbacks associated with the action are executed and it is the responsibility of the callback to decide actions to perform based on intention.

This restricts tight coupling, keeps logic close to action, increases composibility of elements and therefore code reuse and extensibility as well as reducing on/re-boarding costs.

component based

var People = React.createClass({
  ...
  render: function() {
    var peeps = this.props.people.values.map( function( peep ) {
      return <li><img src={ peep.avatar.href } width="60" height="60" /></li>
    };
    return (
      <ul>{ peeps }</ul>;
    )
  }
});

var Main = React.createClass({
  ...
  render: function() {
    return (
      <div>
        <h1>All the people</h1>
        <People people={ this.state.people } />
      </div>
    )
  }
});  

React.render(<Main />, mountNode);

Encapsulate functionality, encourage loosely coupled components, make code intention clear.

Class based

var HelloMessage = React.createClass({
  render: function() {
    return (
      <div>Hello <span class="large">{this.props.name}</span></div>;
    )
  }
});

React.render(<HelloMessage name="Johnson" />, mountNode);

Most modern JS frameworks are embracing JS's prototypical flavour of classical inheritance and class modelling. The new JS class syntax will (possibly) give more than just code convenience benefits to this approach.

The next React code iteration will use ‘native’ classes rather than the clunky `React.createClass`. So too will Polymer and Angular so Facebook certainly aren’t alone in this early adoption.

loves es6

React uses classes to define components, which is how Polymer and Angular 2.0 will also do it. Ember & Backbone have always had classes (of sorts).

Facebook also released a suite of transforms for using some ES6 (and 7) constructs today (compatible with IE8!).

Most immediately useful constructs are probably arrow functions for managing function scope in a class-based world and template literals for HTML stamping.

JSX?

return (
  <div>
    <TextInput onComplete={ this.onInput } />
    <OutputPane />
    <AnotherComponent />
  </div>
)

WTF??

JSX

JSX is not essential for React, but it does save a load of repetition and boilerplate.

JSX is similar to HTML.

In essence it simply allows you to write HTML in a neat and tidy manner in your code. If you like to keep your templates separate from code then have your code pull it in when necessary, although there are many reasons why Facebook have opted to keep templates in code.

JSX does require a compilation step, but your code is being built anyway right?

Flux?

what is flux?

what is flux?

Application state is held within stores and actions, via the dispatcher, manipulate state.

Stores emit change events as they react to actions, views then respond to these changes in state.

dispatcher

var dispatcher = require( 'flux' ).Dispatcher;
var actions = require( '../actions' );

dispatcher.register( function( payload ) {
  ...
});

dispatcher.dispatch({
  action: actions.ADD_PERSON,
  person: { /* person object */ }
});

A base dispatcher class is provided by flux, it can be extended with additional functionality if required.

The dispatcher is the central hub for managing data flow.

It essentially is a registry of callbacks and has little real logic, although complex apps may have requirement for ordering certain dispatches. Mmm, promises.

stores

var EventEmitter = require( 'events' ).EventEmitter;
var dispatcher = require( './appDispatcher' );

class TodoStore extends EventEmitter {
  constructor() {
    dispatcher.register( /* an action */, this.onChange );
  }

  addListener( action, callback ) {
    this.on( action, callback );
  }

  onChange( payload ) {
    this.emit( payload.action, /* data */ );
  }
};

Stores contain application state and logic.

Rather than a Model or a Collection, stores manage state for a particular application domain.

Stores react to actions and emit change events. Views listen to change events and react accordingly.

views and controller-views

var todoStore = require( './todoStore' );

var TodoComponent = React.createClass({
  componentDidMount() {
      todoStore.addListener( /* action */, /* callback */ );
    }
    ...  
  render: function() { 
    ...
  }
});

React.render(<TodoComponent />, mountNode);

Views can be implemented how you like, but Reacts state management works well ;)

Views should react to store change events and be responsible for reacting to those events (and data) how they see fit. With React changes to state will propagate to any child components.

Pros

Pros

Pros

Pros

From JSConf EU talk:

cons

cons

breakfast app?

http://mattstyles.github.io/breakfast-club-react

References and links

http://todomvc.com/examples/react/#/

https://github.com/facebook/flux/tree/master/examples/flux-chat

https://github.com/facebook/flux/tree/master/examples/flux-todomvc

Apps

Dotlabel test app

http://facebook.github.io/flux/ (with video)

http://facebook.github.io/react/

http://facebook.github.io/react/docs/videos.html (vids)

React and flux

JSConf EU Talk accompanying slides

Be functional, not correct

Deconstructing ReactJS's Flux

Intro to React (vid)

the future and

react-complementary tech

Browserify

es6 transforms

Web components

I ragged on Angular 1.x a bit, here’s why

The road to Angular 2.0 and why

Things I wish I were told about angular

You have ruined HTML

AngularJS: the bad parts

Two-way data-binding is an anti-pattern

why you shouldn’t use angular (more two-way battering)

AngularJS 2.0 Status Preview

All about Angular 2.0

ng-europe chat - Angular 2 core (video)

Angular 2.0 design docs

Traceur Angular 2.0 will likely use this

thank you for listening