react + flux (alt)

68
React? Já ouvi falar

Upload: cezar-luiz

Post on 12-Apr-2017

7.033 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: React + Flux (Alt)

React? Já ouvi falar

Page 2: React + Flux (Alt)

Temas abordados

1. Problemas atuais da web

2. Onde a web está

3. Futuro?

4. Como o desenvolvimento é hoje

5. React

6. Flux

Page 3: React + Flux (Alt)

Cezar Luiz

Programador Front-End

JavaScript <3

Trabalha na Snowman Labs

23 anos

Page 4: React + Flux (Alt)

Web nos diasde hoje

Page 5: React + Flux (Alt)
Page 6: React + Flux (Alt)
Page 7: React + Flux (Alt)

Muita demandade informação

Page 8: React + Flux (Alt)

Muita gente conectada

Page 9: React + Flux (Alt)

performance !important

Page 10: React + Flux (Alt)

Tempo derespostadeve ser cadavez menor

Page 11: React + Flux (Alt)

Onde a web

está presente

Page 12: React + Flux (Alt)
Page 13: React + Flux (Alt)
Page 14: React + Flux (Alt)
Page 15: React + Flux (Alt)
Page 16: React + Flux (Alt)

Falando sobrefront-end

Page 17: React + Flux (Alt)

Muito do que se faz hoje

MVC

Mineração de DOM - getElementById, etc

Adiciona classe, retira classe

Problemas de compatibilidade

Dificuldade em escalar e aceitar

grande quantidade de dados

Page 18: React + Flux (Alt)

Problemas com MVC

Page 19: React + Flux (Alt)

“MVC got reallycomplicatedreally quickly”

Page 20: React + Flux (Alt)
Page 21: React + Flux (Alt)
Page 22: React + Flux (Alt)
Page 23: React + Flux (Alt)

!

Page 24: React + Flux (Alt)

Virtual DOM

React abstracts away the DOM from

you, giving a simpler programming

model and better performance. React

can also render on the server using

Node, and it can power native apps

using React Native.

Page 25: React + Flux (Alt)

Data Flow

React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than

traditional data binding.

Page 26: React + Flux (Alt)

!framework

Page 27: React + Flux (Alt)
Page 28: React + Flux (Alt)

Por que não

pensar mais na

sua aplicação, na lógica,

do que ficar se preocupando

com o “DOM”?

Page 29: React + Flux (Alt)

import React from 'react';import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {

render() { return <div>Hello World!</div> }

}

ReactDOM.render(<HelloWorld />, mountNode);

JSX

Page 30: React + Flux (Alt)
Page 31: React + Flux (Alt)

import React from 'react';import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {

render() { return React.createElement( "div", null, "Hello World" ); } }

ReactDOM.render(React.createElement(HelloWorld), mountNode);

JS compilado

Page 32: React + Flux (Alt)

state e PROPS

Onde gerenciamos os dados

da nossa aplicação

Page 33: React + Flux (Alt)
Page 34: React + Flux (Alt)

import MailHeader from './MailHeaderComponent';

import MailButtons from './MailButtonsComponent';

import MailsTable from './MailTablesComponent';

class Mails extends React.Component {

render() {

return (

<div className="mails-container">

<MailHeader />

<MailButtons />

<MailsTable />

</div>

);

}

}

Page 35: React + Flux (Alt)

import HeaderTitle from './header/HeaderTitleComponent';

import HeaderSearch from './header/HeaderSearchComponent';

import Profile from './ProfileComponent';

class MailHeader extends React.Component {

render() {

return (

<header className="mail-header">

<HeaderTitle title="Inbox" />

<HeaderSearch placeholder="Search..." />

<Profile user={user} />

</header>

);

}

}

Page 36: React + Flux (Alt)

import MailRow from './MailRowComponent';

class MailTable extends React.Component {

constructor(props) { super(props);

this.state = { loading: false, mails: [] }; }

componentDidMount() { this.setState({ loading: true });

$.ajax({ url: `${host}/mails` }) .done((response) => { this.setState({ mails: response.results }); }) .complete(() => { this.setState({ loading: false }); }); }

render() { if (this.state.loading) { return <p>Carregando emails...</p> }

if (!this.state.mails.length) { return <p>Nenhum email por enquanto.</p> }

return ( <table className="mails-table"> <thead>...</thead>

<tbody> {this.state.mails.map((mail) => { return <MailRow mail={mail} /> })} </tbody> </table> ); }

}

Page 37: React + Flux (Alt)
Page 38: React + Flux (Alt)

import MailRow from './MailRowComponent';import $ from 'jquery';

class MailTable extends React.Component {

constructor(props) { super(props);

this.state = { loading: false, mails: [] }; }

...

}

Page 39: React + Flux (Alt)

import MailRow from './MailRowComponent';import $ from 'jquery';

class MailTable extends React.Component {

...

componentDidMount() { this.setState({ loading: true });

$.ajax({ url: `${host}/mails` }) .done((response) => { this.setState({ mails: response.results }); }) .complete(() => { this.setState({ loading: false }); }); }

...

}

Page 40: React + Flux (Alt)

import MailRow from './MailRowComponent';

class MailTable extends React.Component {

...

render() { if (this.state.loading) { return <p>Carregando emails...</p> }

if (!this.state.mails.length) { return <p>Nenhum email por enquanto.</p> }

return ( <table className="mails-table"> <thead>...</thead>

<tbody> {this.state.mails.map((mail) => { return <MailRow mail={mail} /> })} </tbody> </table> ); }

}

Page 41: React + Flux (Alt)

class MailRow extends React.Component {

changeCheck() {

let checkbox = this.refs.checkbox;

let dom = React.findDOMNode(checkbox); // Não é tão necessário

let { value, name, type } = checkbox;

...

}

render() {

return (

<tr>

<td>

<input

onChange={this.changeCheck.bind(this)}

type="checkbox"

name="checkMail"

ref="checkbox"

/>

</td>

<td>{this.props.name}</td>

<td>{this.props.resume}</td>

<td>{this.props.date}</td>

</tr>

);

}

}

Page 42: React + Flux (Alt)

c o m p o n e n t i z a ç ã o

Page 43: React + Flux (Alt)

ciclode vida

Page 44: React + Flux (Alt)

3 partes principais

Mounting - Um componente irá ser inserido no DOM.

Updating - Um componente está a ser re-renderizado

para determinar se o DOM deverá ser atualizado. (Virtual DOM)

Unmounting - Um componente está sendo removido do DOM.

Além disso, o React fornece métodos de ciclos de vida para

você interceptar esse processo. Métodos do tipo “will”.

Page 45: React + Flux (Alt)

Mounting - 3 métodos

getInitialState - Chamado antes de um componente ser

montado. Componentes que usam state devem implementar

isso para retornar dados iniciais.

componentWillMount - Chamado imediatamente antes

de ocorrer a montagem.

componentDidMount - Chamado imediatamente depois

de ocorrer a montagem. Se precisar alterar o DOM, deve vir aqui.

Page 46: React + Flux (Alt)

Updating - 4 métodoscomponentWillReceiveProps(object nextProps) - Chamadoquando um componente recebe novas propriedades.

shouldComponentUpdate(object nextProps, object nextState)Deve retornar um boolean se o componente deverá seratualizado ou não.

componentWillUpdate(object nextProps, object nextState)Chamado imediatamente antes de uma atualização acontecer.Não pode chamar this.setState aqui.

componentDidUpdate(object prevProps, object prevState)Chamado imediatamente depois da atualização acontecer.

Page 47: React + Flux (Alt)

Unmounting - 1 método

componentWillUnmount - Chamado imediatamente antesde um componente ser desmontado e destruído. Limpezasdevem ser feitas aqui.

Page 48: React + Flux (Alt)

state props refs renderciclos de vida

componentizaçãoJSX e JS compilado

UI complexas event system (onClick onChange...)

ajaxisso é React

Page 49: React + Flux (Alt)

E o tal do flux?

Page 50: React + Flux (Alt)

!framework

Page 51: React + Flux (Alt)

Arquiteturade aplicaçãopara construirinterfaces

Page 52: React + Flux (Alt)
Page 53: React + Flux (Alt)

“simplificar”

Page 54: React + Flux (Alt)

exemploscom altjs

Page 55: React + Flux (Alt)

// dispatcher.js

import alt from 'alt';

let alt = new Alt();

export default alt;

Page 56: React + Flux (Alt)

// actions/MailActions.js

import alt from '../dispatcher';import $ from 'jquery';

class MailActions {

getMails() { $.ajax({ url: `${host}/mails` }) .done((res) => { this.actions.getMailsSuccess(res); }) .fail(() => { this.actions.getMailsFail(); });

return true; }

getMailsSuccess(res) { return res; }

getMailsFail() { // Envia uma notificação de erro para o usuário na tela

return false; }

}

export default alt.createActions(MailActions);

Page 57: React + Flux (Alt)

// stores/MailStore.js

import alt from '../dispatcher';import MailActions from '../actions/MailActions';

class MailStore {

constructor() { this.state = { loading: false, error: false, mails: [] };

this.bindActions(MailActions); }

onGetMails() { this.setState({ loading: true, error: false }); }

onGetMailsSuccess(response) { this.setState({ loading: false, mails: response.result }); }

onGetMailsFail(err) { this.setState({ loading: false, error: err, mails: [] }); }

}

export default alt.createStore(MailStore, 'MailStore');

Page 58: React + Flux (Alt)

// components/MailTableComponent.jsimport MailRow from './MailRowComponent';import MailActions from '../actions/MailActions';import MailStore from '../stores/MailStore';

class MailTable extends React.Component {

constructor(props) { super(props);

this.state = MailStore.getState(); this.onMailChange = this.onMailChange.bind(this); }

componentDidMount() { MailStore.listen(this.onMailChange);

MailActions.getMails(); }

componentWillUnmount() { MailStore.unlisten(this.onMailChange); }

onMailChange(state) { this.setState(state); }

render() { if (this.state.loading) { return <p>Carregando emails...</p> }

if (!this.state.mails.length) { return <p>Nenhum email por enquanto.</p> }

return ( <table className="mails-table"> <thead>...</thead>

<tbody> {this.state.mails.map((mail) => { return <MailRow mail={mail} /> })} </tbody> </table> ); }

}

Page 59: React + Flux (Alt)
Page 60: React + Flux (Alt)

// components/MailTableComponent.jsimport MailRow from './MailRowComponent';import MailActions from '../actions/MailActions';import MailStore from '../stores/MailStore';

class MailTable extends React.Component {

constructor(props) { super(props);

this.state = MailStore.getState(); this.onMailChange = this.onMailChange.bind(this); }

...

}

Page 61: React + Flux (Alt)

// components/MailTableComponent.jsimport MailRow from './MailRowComponent';import MailActions from '../actions/MailActions';import MailStore from '../stores/MailStore';

class MailTable extends React.Component {

...

componentDidMount() { MailStore.listen(this.onMailChange);

MailActions.getMails(); }

componentWillUnmount() { MailStore.unlisten(this.onMailChange); }

onMailChange(state) { this.setState(state); }

...

}

Page 62: React + Flux (Alt)

// components/MailTableComponent.jsimport MailRow from './MailRowComponent';import MailActions from '../actions/MailActions';import MailStore from '../stores/MailStore';

class MailTable extends React.Component {

...

render() { if (this.state.loading) { return <p>Carregando emails...</p> }

if (!this.state.mails.length) { return <p>Nenhum email por enquanto.</p> }

return ( <table className="mails-table"> <thead>...</thead>

<tbody> {this.state.mails.map((mail) => { return <MailRow mail={mail} /> })} </tbody> </table> ); }

}

Page 63: React + Flux (Alt)

“simplificar”

Page 64: React + Flux (Alt)

O que ele pode fazer por nós

alta escalabilidade

fácil manutenção

isomorfismo

native apps com react-native

programação reativa

Page 65: React + Flux (Alt)

Quem já usa

airbnb netflix yahoo asanaatlassian coursera bbc deezerdropbox facebook instagram

imdb imgur marvelappperiscope reddit salesforceuber whatsapp globoplay

Page 66: React + Flux (Alt)
Page 67: React + Flux (Alt)

(brinks)

Page 68: React + Flux (Alt)

Obrigado!

{ github: “CezarLuiz0”, twitter: “cezar_luiz”, email: “[email protected]”}