building reactive webapp with react/flux
TRANSCRIPT
![Page 1: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/1.jpg)
Globalcode – Open4education
Keuller Magalhães
Building Modern Webapp with React/Flux
![Page 2: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/2.jpg)
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
![Page 3: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/3.jpg)
Globalcode – Open4education
Agenda
React
Web Components
Flux Architecture
Common Mistakes
Other View libraries
Q&A
3/29
![Page 4: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/4.jpg)
Globalcode – Open4education
![Page 5: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/5.jpg)
Globalcode – Open4education
React
Who is using ?
https://github.com/facebook/react/wiki/Sites-Using-React5/29
![Page 6: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/6.jpg)
Globalcode – Open4education
Library or framework ?
Library Framework6/29
![Page 7: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/7.jpg)
Globalcode – Open4education
React is based on components!
Imagine that your page is composed by widgets!
Each widget is a component.
7/29
![Page 8: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/8.jpg)
Globalcode – Open4education
7/26
![Page 9: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/9.jpg)
Globalcode – Open4education
7/26
![Page 10: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/10.jpg)
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
![Page 11: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/11.jpg)
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
![Page 12: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/12.jpg)
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
![Page 13: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/13.jpg)
Globalcode – Open4education
13/29
![Page 14: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/14.jpg)
Globalcode – Open4education
DEMO
14/29
![Page 15: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/15.jpg)
Globalcode – Open4education
What is Web Components ?
Web Component is:
Custom Elements
Reusable
Composable
Single responsability
An Specification
http://webcomponents.org
15/29
![Page 16: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/16.jpg)
Globalcode – Open4education
Flux Architecture
http://facebook.github.io/flux
16/29
![Page 17: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/17.jpg)
Globalcode – Open4education
Flux Architecture
Unidirectional data flow.
17/29
![Page 18: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/18.jpg)
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…”
![Page 19: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/19.jpg)
Globalcode – Open4education
Flux Architecture
Dispatcher
“The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application.”
![Page 20: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/20.jpg)
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.”
![Page 21: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/21.jpg)
Globalcode – Open4education
Flux Architecture
Why Flux ?
• Adaptability
• Simplicity
• Maintainability
• Scalability
• Decoupling
21/29
![Page 22: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/22.jpg)
Globalcode – Open4education
Flux Implementations
22/29
![Page 23: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/23.jpg)
Globalcode – Open4education
23/29
![Page 24: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/24.jpg)
Globalcode – Open4education
Common Mistakes
24/29
![Page 25: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/25.jpg)
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
![Page 26: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/26.jpg)
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
![Page 27: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/27.jpg)
Globalcode – Open4education
Other View Libraries
http://vuejs.orghttps://muut.com/riotjs
React is not alone in this wild world!27/29
![Page 28: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/28.jpg)
Globalcode – Open4education
Q & A
28/29
![Page 29: Building Reactive webapp with React/Flux](https://reader034.vdocuments.mx/reader034/viewer/2022051414/55cddb83bb61ebbf208b4641/html5/thumbnails/29.jpg)
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