Building Reactive webapp with React/Flux

Globalcode – Open4education
Keuller Magalhães
Building Modern Webapp with
React/Flux

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
keuller.magalhaes@gmail.com
2/29

Agenda
React
Web Components
Flux Architecture
Common Mistakes
Other View libraries
Q&A
3/29

React
Who is using ?
https://github.com/facebook/react/wiki/Sites-Using-React5/29

Library or framework ?
Library Framework
6/29

React is based on components!
Imagine that your page is
composed by widgets!
Each widget is a component.
7/29

Globalcode – Open4education7/26

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 MessageComponent
React.render(
<MessageComponent text=“Hello TDC 2015!” />,
document.body);
10/29

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

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

DEMO
14/29

What is Web Components ?
Web Component is:
Custom Elements
Reusable
Composable
Single responsability
An Specification
http://webcomponents.org
15/29

Flux Architecture
http://facebook.github.io/flux
16/29

Flux Architecture
Unidirectional data flow.
17/29

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…”

Flux Architecture
Dispatcher
“The dispatcher is a singleton, and operates
as the central hub of data flow in a Flux
application.”

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.”

Flux Architecture
Why Flux ?
• Adaptability
• Simplicity
• Maintainability
• Scalability
• Decoupling
21/29

Flux Implementations
22/29

Common Mistakes
24/29

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

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

Other View Libraries
http://vuejs.orghttps://muut.com/riotjs
React is not alone in this wild world!
27/29

Q & A
28/29

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

Building Reactive webapp with React/Flux

More Related Content

What's hot

Viewers also liked

Similar to Building Reactive webapp with React/Flux

Recently uploaded

Building Reactive webapp with React/Flux