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

[email protected]/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 Framework6/29


React is based on components!

Imagine that your page is composed by widgets!

Each widget is a component.

7/29


7/26


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

10/29


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


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


13/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


23/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

Internet

Building Reactive webapp with React/Flux