Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A New Way to Build Awesome Web Applications
John Need
Senior UI Developer
Twitter : @johnneed
Blog : johnneed.com
Email : ...
React + Flux = Joy
A View Rendering Engine A Design Pattern A method for building
ginormous web
applications that retain
"...
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 a...
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...
The Problem with
Large MVC Web
Applications
Model
Model
Flux Uni-directional Flow
StoreDispatcher
Store
Store
Detailed
Data Flow
Store
Dispatcher
React
Views
Action
Creators
WEB API WEB Utils
Actions
User
Interactions
Callbacks
Chan...
Demo Time
Yeah, I know
These slides
are horrible.
Here’s a cat
picture to
make it up to
you.
Web API
Store
Dispatcher
React
Views
Action
Creators
WEB API WEB Utils
Actions
User
Interactions
Callbacks
Change
Events
Y...
WEB Utilities
Store
Dispatcher
React
Views
Action
Creators
WEB API WEB Utils
Actions
User
Interactions
Callbacks
Change
Ev...
Action Creators
Store
Dispatcher
React
Views
Action
Creators
WEB API WEB Utils
Actions
User
Interactions
Callbacks
Change
...
The Dispatcher
Store
Dispatcher
React
Views
Action
Creators
WEB API WEB Utils
Actions
User
Interactions
Callbacks
Change
E...
Stores
Store
Dispatcher
React
Views
Action
Creators
WEB API WEB Utils
Actions
User
Interactions
Callbacks
Change
Events
St...
Views
Store
Dispatcher
React
Views
Action
Creators
WEB API WEB Utils
Actions
User
Interactions
Callbacks
Change
Events
Whe...
(re)Rendering with React – When?
Angular – Dirty Checking
Ember – Observables (get, set)
React– Observables (setState)
(re)Rendering with React – Virtual DOM
var hi = React.createElement( "h1", {className="greet", “Hello World” );
React.rend...
A Smattering of React
Create an element
var elem = React.createElement("h1", null, "Hello World");
Create an element with ...
React Components
• Represent design elements of your app
• Are re-usable
• Are declarative
• Have two main attributes
• Pr...
JSX – An intuitive way to create components
• Allows you to use XML inside JavaScript.
• Makes your views a cinch to read....
var HelloWorld = React.createClass({
render: function() { return <h1>Bonjour World</h1> }
});
var HelloWorld = React.creat...
Props
• Are how you pass data from parent components to child components
• Are immutable (or at least they should be)
• En...
Props - Example
const Child = React.createClass({
Render : function(){
return (<li>{this.props.listItem}</li>);
}
});
cons...
State
• Is contained and controlled by component.
• Is mutable.
State - Example
const Child = React.createClass({
getInitialState : function(){return {
myText : 'type something'}
},
_cha...
Life Cycle First Render
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
Props Change
component...
View Controllers
• These are the highest level views.
• Check for changes to the stores here
• Pass all data down to child...
A Word about Routing
Do it!
npm install react-router
Thanks!
Twitter : @johnneed
Blog : johnneed.com
Email : johnneed@johnneed.com
Download the Demo at
https://github.com/john...
React + Flux = Joy
Upcoming SlideShare
Loading in …5
×

React + Flux = Joy

1,122 views

Published on

A New Way to Build Awesome Web Applications

Published in: Software
  • Be the first to comment

React + Flux = Joy

  1. 1. A New Way to Build Awesome Web Applications John Need Senior UI Developer Twitter : @johnneed Blog : johnneed.com Email : johnneed@johnneed.com + =
  2. 2. 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
  3. 3. Conceptual Simplicity A model that fits in your head And doesn't change even if your app gets huge
  4. 4. 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.
  5. 5. Who the heck uses React?
  6. 6. 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
  7. 7. The Problem with Large MVC Web Applications Model Model
  8. 8. Flux Uni-directional Flow StoreDispatcher Store Store
  9. 9. Detailed Data Flow Store Dispatcher React Views Action Creators WEB API WEB Utils Actions User Interactions Callbacks Change Events
  10. 10. Demo Time
  11. 11. Yeah, I know These slides are horrible. Here’s a cat picture to make it up to you.
  12. 12. Web API Store Dispatcher React Views Action Creators WEB API WEB Utils Actions User Interactions Callbacks Change Events Your WEB API is your server- side architecture. It can be SOAP, REST, WebSockets, whatever.
  13. 13. WEB Utilities Store Dispatcher React Views Action Creators WEB 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.
  14. 14. Action Creators Store Dispatcher React Views Action Creators WEB 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.
  15. 15. The Dispatcher Store Dispatcher React Views Action Creators WEB API WEB Utils Actions User Interactions Callbacks Change Events The dispatcher is used to broadcast payloads to registered callbacks
  16. 16. Stores Store Dispatcher React Views Action Creators WEB 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.
  17. 17. Views Store Dispatcher React Views Action Creators WEB API WEB Utils Actions User Interactions Callbacks Change Events Whew! Now we’re ready to talk about React.
  18. 18. (re)Rendering with React – When? Angular – Dirty Checking Ember – Observables (get, set) React– Observables (setState)
  19. 19. (re)Rendering with React – Virtual DOM var 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> DOM Diff Patch <div id="example"> <h1 class="greet"> Hello World </h1> </div>
  20. 20. A Smattering of React Create an element var elem = React.createElement("h1", null, "Hello World"); Create an element with a Factory var elem = React.DOM.h1(null, "Hello World"); Render an element React.render(elem, null, document.body);
  21. 21. 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
  22. 22. 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.
  23. 23. 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
  24. 24. 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.
  25. 25. 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>); } });
  26. 26. State • Is contained and controlled by component. • Is mutable.
  27. 27. 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} /> ); } });
  28. 28. Life Cycle First Render getDefaultProps getInitialState componentWillMount render componentDidMount Props Change componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate State Change shouldComponentUpdate componentWIllUpdate render componentDidUpdate Component Unmount componentWillUnmount
  29. 29. 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); },
  30. 30. A Word about Routing Do it! npm install react-router
  31. 31. Thanks! Twitter : @johnneed Blog : johnneed.com Email : johnneed@johnneed.com Download the Demo at https://github.com/johnneed/vtcodecamp20 15 Get Slides at Slide Share.

×