A New Way to Build Awesome Web Applications

John NeedSenior UI Developer

Twitter : @johnneedBlog : johnneed.comEmail : johnneed@johnneed.com

+ =

React + Flux = Joy

A View Rendering Engine A Design Pattern A method for building ginormous web applications that retain "Conceptual Simplicity"even as they grow

Conceptual Simplicity

A model that fits in your head

And doesn't change even if your app gets huge

A Bit About React

• React only renders views. It’s not a SPA framework.• React was started by Jordan Walke, a developer at

Facebook in 2011• Was conceived as a JavaScript port of XHP, Facebook’s

version of PHP.• The first version of React took 17 minutes to render

10,000 DOM elements on 1 Ghz CPU.• React gained favor at Facebook when it was used to fix

the perpetually broken chat app.

Who the heck uses React?

Facts on Flux• Flux is not a framework. You can’t download it.• Flux was designed by Facebook to work with React.• Flux’s uni-directional dataflow • You can download lot’s o’ libraries to help you implement Flux such as :

• Flummox• Alt• Fluxxor• Flux This• MartyJS• McFly• Fluxible• Delorean• Lux• Reflux• OmniscientJS• Fluxy• Material Flux• Flux

The Problem with Large MVC Web Applications

Model View

View

View

View

Model

Flux Uni-directional Flow

StoreView Dispatcher

Store

Store

Detailed Data Flow

Store

Dispatcher

ReactViews

Action CreatorsWEB API WEB Utils

Actions

User Interactions

Callbacks

Change Events

Demo Time

Yeah, I know These slides are horrible. Here’s a cat picture to make it up to you.

Web API

Store

Dispatcher

ReactViews

Action CreatorsWEB API WEB Utils

Actions

User Interactions

Callbacks

Change Events

Your WEB API is your server-side architecture. It can be SOAP, REST, WebSockets, whatever.

WEB Utilities

Store

Dispatcher

ReactViews

Action CreatorsWEB API WEB Utils

Actions

User Interactions

Callbacks

Change Events

A client-side data-layer to serving as an abstraction between your WEB API and Your Action Creators.

Action Creators

Store

Dispatcher

ReactViews

Action CreatorsWEB API WEB Utils

Actions

User Interactions

Callbacks

Change Events

When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an action — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called action creators that not only create the action object, but also pass the action to the dispatcher.

The Dispatcher

Store

Dispatcher

ReactViews

Action CreatorsWEB API WEB Utils

Actions

User Interactions

Callbacks

Change Events

The dispatcher is used to broadcast payloads to registered callbacks

Stores

Store

Dispatcher

ReactViews

Action CreatorsWEB API WEB Utils

Actions

User Interactions

Callbacks

Change Events

Stores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many objects — they do not represent a single record of data like ORM models do. Nor are they the same as Backbone's collections. More than simply managing a collection of ORM-style objects, stores manage the application state for a particular domain within the application.

Views

Store

Dispatcher

ReactViews

Action CreatorsWEB API WEB Utils

Actions

User Interactions

Callbacks

Change Events

Whew! Now we’re ready to talk about React.

Here’s another adorable cat picture to help you make it through this presentation

(re)Rendering with React – When?

Angular – Dirty Checking

Ember – Observables (get, set)

React– Observables (setState)

(re)Rendering with React – Virtual DOMvar hi = React.createElement( "h1", {className="greet", “Hello World” );

React.render( hi, document.getElementById("example"));

Creating a Virtual DOM Element

Rendering a Virtual DOM element

<div id="example"></div>

DOMDiff

Patch

<div id="example"> <h1 class="greet">

Hello World </h1></div>

A Smattering of ReactCreate an elementvar elem = React.createElement("h1", null, "Hello World");

Create an element with a Factoryvar elem = React.DOM.h1(null, "Hello World");

Render an elementReact.render(elem, null, document.body);

React Components• Represent design elements of your app• Are re-usable• Are declarative• Have two main attributes• Props – immutable (mostly)• State –mutable and self-contained

• Can contain other components• Are oblivious of their parents

JSX – An intuitive way to create components• Allows you to use XML inside JavaScript.• Makes your views a cinch to read.• Is not a templating language.• Create loops like you do in JavaScript (for, for in, map, forEach, while, etc.)• Use conditionals like you do in JavaScript (If/else, ternaries)• Use ES5 or ES6.

• Compiles to JavaScript using JSX Compiler, or Babel.

var HelloWorld = React.createClass({  render: function() { return  <h1>Bonjour World</h1> }});

var HelloWorld = React.createClass({displayName: "HelloWorld", render: function() { return React.createElement("h1", null, "Bonjour World"); }});

A Simple JSX Transform

Props• Are how you pass data from parent components to child components• Are immutable (or at least they should be)• Ensure an uni-directional data flow• Are how you control an element's attributes like class, id, style, etc.• Cause React to re-render views when they do change.

Props - Example

const Child = React.createClass({Render : function(){

return (<li>{this.props.listItem}</li>);}

});

const Parent = React.createClass({Render : function(){ var kids = ["a","b","c"].map( (x,i) => {

return (<Child listItem={x} key={i}/>);});return (<ul>{kids}</ul>);

}});

State• Is contained and controlled by component.• Is mutable.

State - Example const Child = React.createClass({ getInitialState : function(){return {

myText : 'type something'} }, _changeText : function(event){ this.setState({myText : event.target.value}); },

Render : function(){return (

<input value={mytext} onChange={this._changeText} /> );}

});

Life Cycle First Render

getDefaultPropsgetInitialState

componentWillMountrender

componentDidMount

Props Change

componentWillReceivePropsshouldComponentUpdate

componentWillUpdaterender

componentDidUpdate

State Change

shouldComponentUpdatecomponentWIllUpdate

rendercomponentDidUpdate

Component Unmount

componentWillUnmount

View Controllers• These are the highest level views.• Check for changes to the stores here• Pass all data down to children.

componentDidMount: function () {MyDosStore.addChangeListener(this._onMyDosChange);

},

componentWillUnmount: function () { MinionsStore.removeChangeListener(this._onMinionChange);},

A Word about Routing

Do it!

npm install react-router

Thanks!Twitter : @johnneedBlog : johnneed.comEmail : johnneed@johnneed.comDownload the Demo at https://github.com/johnneed/vtcodecamp2015Get Slides at Slide Share.