building reactive webapp with react/flux
TRANSCRIPT
Globalcode – Open4education
Keuller Magalhães
Building Modern Webapp with React/Flux
Globalcode – Open4education
About me...
I’m just a developer...
Technology enthusiast about Web/Mobile
I really believe in Web Standards
I love programming languages
Father, gamer and geek :-)
keullermag
Globalcode – Open4education
Agenda
React
Web Components
Flux Architecture
Common Mistakes
Other View libraries
Q&A
3/29
Globalcode – Open4education
Globalcode – Open4education
React
Who is using ?
https://github.com/facebook/react/wiki/Sites-Using-React5/29
Globalcode – Open4education
Library or framework ?
Library Framework6/29
Globalcode – Open4education
React is based on components!
Imagine that your page is composed by widgets!
Each widget is a component.
7/29
Globalcode – Open4education
7/26
Globalcode – Open4education
7/26
Globalcode – Open4education
React
import React from ‘react’;
class MessageComponent extends React.Component { render() { return <div className=“message”>{this.props.text}</div> }}
export default MessageComponent;
// Render an instance of MessageComponentReact.render( <MessageComponent text=“Hello TDC 2015!” />, document.body);
10/29
Globalcode – Open4education
Reactimport React from ‘react’;
class ClickCounter extends React.Component { constructor(props) { super(props); this.state = { clicks: 0 }; }
onClickHandler(e) {this.setState({ clicks: this.state.clicks + 1 });
}
render() { return (<div> <span className=“link”>Click me</span> <span>Total clicks: {this.state.clicks}</span> </div>); }}
export default ClickCounter;11/29
Globalcode – Open4education
Reactimport React from ‘react’;
class SampleComponent extends React.Component {
componenWillMount() { ... }
componentDidMount() { ... }
componentWillUpdate(nProps, nState) { ... }
componentDidUpdate(pProps, pState) { ... }
componentWillUnmount() { ... }
shouldComponentUpdate(nProps, nState) { ... }
render() { return (<div> Sample Component! </div>); }}
12/29
Globalcode – Open4education
13/29
Globalcode – Open4education
DEMO
14/29
Globalcode – Open4education
What is Web Components ?
Web Component is:
Custom Elements
Reusable
Composable
Single responsability
An Specification
http://webcomponents.org
15/29
Globalcode – Open4education
Flux Architecture
http://facebook.github.io/flux
16/29
Globalcode – Open4education
Flux Architecture
Unidirectional data flow.
17/29
Globalcode – Open4education
Flux Architecture
Action“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…”
Globalcode – Open4education
Flux Architecture
Dispatcher
“The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application.”
Globalcode – Open4education
Flux Architecture
Store“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.”
Globalcode – Open4education
Flux Architecture
Why Flux ?
• Adaptability
• Simplicity
• Maintainability
• Scalability
• Decoupling
21/29
Globalcode – Open4education
Flux Implementations
22/29
Globalcode – Open4education
23/29
Globalcode – Open4education
Common Mistakes
24/29
Globalcode – Open4education
Common Mistakes
React isn’t MVC, it’s just ‘V’
React allows you build UI by composing components
React is for web/mobile applications
React isn’t just to client
React isn’t the most fast viewer library, but it’s cool and predictable
React isn’t “the“ silver bullet!!!
25/29
Globalcode – Open4education
Common Mistakes
Flux isn’t a framework
Flux is an architecture that can be
implemented in both sides (client & server)
There are many Flux implementations
Flux can be used with any library if you want
26/29
Globalcode – Open4education
Other View Libraries
http://vuejs.orghttps://muut.com/riotjs
React is not alone in this wild world!27/29
Globalcode – Open4education
Q & A
28/29
Globalcode – Open4education
References
React Site - http://facebook.github.io/react
Flux Site - http://facebook.github.io/flux
ReactRocks - http://react.rocks
React Awesome -
https://github.com/enaqx/awesome-react
Build With React - http://buildwithreact.com
29/29