A New Way to Build Awesome Web Applications
John NeedSenior UI Developer
Twitter : @johnneedBlog : johnneed.comEmail : [email protected]
+ =
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 : [email protected] the Demo at https://github.com/johnneed/vtcodecamp2015Get Slides at Slide Share.
Top Related