Model

View

Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

Virtual DOM

React

Rerender everything on every update

One-way Data Binding

Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

Virtual DOM

Presentational and Container Components

• Better separation of concerns

• Skinny vs Fat controllers
• Eventually, we end up we too much props passing
• This helps with that
• Read more at https://goo.gl/ypJ1TP

Presentational and Container Components

const SearchBar = (props) => {
    return <input type="search" 
                  onChange={(e, newValue) => {props.handleSearch(e, newValue)}}/>
}


class App extends React.Component {
    state = {
        searchText: ''
    };

    handleSearch(e, newValue) {
        this.setState({...this.state, searchText: newValue});
    }

    render() {
        return (<SearchBar handleSearch={this.handleSearch.bind(this)} />);
    }
}

Redux

Predictable State Container for JavaScript Apps

Motivation

• As applications become complex, managing state becomes pain

• Libraries like react remove asynchronicity and direct DOM manipulation but you still need to maintain state

• State bloats with every increasing demands of a UI platform

Three Principles

• Single source of truth
• State is read only, it can be only changed through actions
• Changes are made through pure functions called reducers

The state of your whole application is stored in an object tree within a single store.

The only way to change the state is to emit an action, an object describing what happened.

To specify how the state tree is transformed by actions, you write pure reducers.

These reducers take in old state and an action and return back new state 

(previousState, action) => newState

Source: http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/

Example

Link