Tweet
Tweet

Slide 1

Slide 1 text

Programação Reactiva Osvaldo Matos Jr. (Tupy)

Slide 2

Slide 2 text

Osvaldo Matos Jr.

Slide 3

Slide 3 text

Programação Reativa (It's a joke!?) Em computação, programação reativa é o paradigma de programação orientada em torno do fluxo dos dados e propagação das mudanças. Isso significa que é deve ser possível expressar estático ou dinamicamente como os dados fluem por meio das linguagens de programação usadas, e que o modelo de execução básico irá propagar automaticamente as alterações através do fluxo de dados. Por exemplo, em uma linguagem de programação imperativa, a := b + c significa que a será associado ao resultado de b + c no instante que a expressão for avaliada, e depois, os valores de b e c podem ser alterados que não provocará nenhum efeito em a. Entretanto, em programação reativa, o valor de a será automaticamente atualizado baseado nos novos valores. (Adaptado de Wikipedia)

Slide 4

Slide 4 text

React

Slide 5

Slide 5 text

Aplicações Web Dinâmicas

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

120
function like(elemnt) { elemnt.className += ' like-on'; var countElement = elemnt.getElementsByClassName("count")[0] countElement.innerHTML = parseInt(countElement.innerHTML) + 1; } Manipulando HTML usando JavaScript puro

Slide 10

Slide 10 text

Vanilla JS: Javascript Puro Contra ● Código verboso: escreve muito, baixa produtividade ● Difícil de manter ● Difícil de escalar Prós ● Baixa dependência ● Maior rápido*

Slide 11

Slide 11 text

jQuery

Slide 12

Slide 12 text

120
$('.like').on('click', function() { $(this).toggleClass('like-on'); var $count = $(this).find('count:first'); $count.text(parseInt($count.text()) + 1); }); Manipulando HTML usando jQuery

Slide 13

Slide 13 text

Frameworks JavaScript (todomvc.com) KnockoutJS Knockback.js Maria Meteor Polymer React SocketStream Vanilla JS YUI Agility.js AngularJS Backbone.js CanJS Derby Dojo Ember.js Flight jQuery

Slide 14

Slide 14 text

React A javascript library for building user interfaces https://facebook.github.io/react/ Open Source: maio 2013

Slide 15

Slide 15 text

ReactDOM.render( React.createElement('h1', null, 'Hello World!'), document.getElementById('container') ); Hello World! React Playground

Slide 16

Slide 16 text

Criando uma Classe com React var HelloMessage = React.createClass({ render(){ return (

Hello World

); }, }); ReactDOM.render( , document.getElementById('container') );

Slide 17

Slide 17 text

ECMAScript 6 class HelloMessage extends React.Component { render() { return (

Hello World

); } } ReactDOM.render( , document.getElementById('container') );

Slide 18

Slide 18 text

JSX: a XML-like syntax // JavaScript puro var hello = React.createElement("h1", null, "Hello World!"); ReactDOM.render(hello,document.getElementById('container')); // JSX var hello =

Hello World

; ReactDOM.render(hello, document.getElementById('container')); // JSX var hello = ; ReactDOM.render(hello, document.getElementById('container'));

Slide 19

Slide 19 text

Criando Propriedades var HelloMessage = React.createClass({ render(){ return (

Hello {this.props.name}

); }, }); ReactDOM.render( , document.getElementById('container') );

Slide 20

Slide 20 text

Propriedades padrão var HelloMessage = React.createClass({ getDefaultProps() { return {name: "Tupy"} }, render(){ return (

Hello {this.props.name}

); }, }); ReactDOM.render( , document.getElementById('container') );

Slide 21

Slide 21 text

Tipos de propriedades React.createClass({ propTypes: { // Opcional optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // Obrigatório requiredNumber: React.PropTypes.number.isRequired, requiredFunc: React.PropTypes.func.isRequired, }, });

Slide 22

Slide 22 text

Composição var List = React.createClass({ render(){ return (
); }, }); var ListItem = React.createClass({ render(){ return (
  • {this.props.label}
    • ); }, });

    Slide 23

    Slide 23 text

    Ciclo de Vida React.createClass({ componentWillMount() {}, componentDidMount() {}, componentWillReceiveProps(nextProps) {}, shouldComponentUpdate(nextProps, nextState) {}, componentWillUpdate(nextProps, nextState) {}, componentDidUpdate(prevProps, prevState) {}, componentWillUnmount() {}, }); https://facebook.github.io/react/docs/component-specs.html

    Slide 24

    Slide 24 text

    State and Events

    Slide 25

    Slide 25 text

    State var Timer = React.createClass({ getInitialState() { return { seconds: 0} }, componentDidMount() { setInterval(this.tick, 1000);}, tick() { this.setState({ seconds: this.state.seconds + 1 }); }, render() { return (

    0:00:{this.state.seconds < 10 && '0'}{this.state.seconds}

    ) } });

    Slide 26

    Slide 26 text

    Eventos Keyboard Events onKeyDown onKeyPress onKeyUp Focus Events onFocus onBlur Form Events onChange onInput onSubmit Mouse Events onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp https://facebook.github.io/react/docs/events.html

    Slide 27

    Slide 27 text

    Evento de Click var ClickMeButton = React.createClass({ handleClick() { alert("Hello!") }, render(){ return ( Click me ); }, });

    Slide 28

    Slide 28 text

    Usando dados de Forms var MyNameIs = React.createClass({ getInitialState() { return {name: '[DESCONHECIDO]'}; }, handleNameChange(e) { this.setState({name: e.target.value}); }, render(){ return (

    Meu nome é: {this.state.name}

    Digite seu nome:
    ); }, });

    Slide 29

    Slide 29 text

    Props vs State Props: dados passados na inicialização do componente e são imutáveis. State: dados que representam o estado atual do componente. a = b + c

    Slide 30

    Slide 30 text

    Soma com props var Soma = React.createClass({ render(){ var b = this.props.b; var c = this.props.c; var a = b + c; return (

    a = {b} + {c} = {a}

    ); }, }); ReactDOM.render( , document.getElementById('container') );

    Slide 31

    Slide 31 text

    Soma com State var Soma = React.createClass({ getInitialState() { return { b: this.props.b, c: this.props.c } }, onInputChange() { this.setState({ b: parseInt(this.refs.b.value), c: parseInt(this.refs.c.value), }) }, render(){ var b = this.state.b; var c = this.state.c; var a = b + c; return (

    a = + = {a}

    ); }, });

    Slide 32

    Slide 32 text

    Like! Criar um link de curtir e incrementar o contador quando por clicado.

    Slide 33

    Slide 33 text

    Like! class Like extends React.Component { constructor(props) { super(props) this.state = { count: props.likes, liked: false } } handleLike() { this.setState({ liked: !this.state.liked, count: !this.state.liked ? this.state.count + 1 : this.state.count - 1, }); } render() { var label = this.state.liked ? 'Unlike' : 'Like'; return ( {label}  ({this.state.count} curtiram) ) } }

    Slide 34

    Slide 34 text

    Flux Diagram: Action, Dispacher, Store and View Unidirectional Data Flow View trigger different actions

    Slide 35

    Slide 35 text

    Flux Diagram: Action, Dispacher, Store and View Actions: possíveis eventos da aplicação (e.g. criar, editar, deletar usuário) Dispatcher: é o hub: dada uma action, aciona todas stores envolvidas Store: gerencia dados do modelo Views: apresentação dos dados

    Slide 36

    Slide 36 text

    Base Store var Store = { state: {}, observers: [], subscribe(observer) { this.observers.push(observer); }, trigger() { for (var o in this.observers) { this.observers[o](this.state); } }, setState(newState) { for (var key in newState) { this.state[key] = newState[key]; } this.trigger(); } }

    Slide 37

    Slide 37 text

    Base Actions var Actions = { delete(item) {}, add(item) {}, update(item) {} }

    Slide 38

    Slide 38 text

    No content

    Slide 39

    Slide 39 text

    Carrinho de Compras: Produtos var PRODUCTS = [ { name: "Maça", count: 2, price: 1.5 }, { name: "Biscoito", count: 1, price: 3.00 }, { name: "Coca-Cola", count: 4, price: 2.50 }, ]

    Slide 40

    Slide 40 text

    Product Store var Store = { // BaseStore code hidden onAddProduct(product) { if (!this.state.products) { this.state.products = []; } this.state.products.push(product); this.trigger(); }, onDeleteProduct(product) { for (var p in this.state.products) { if(this.state.products[p].name == product.name) { this.state.products.splice(p, 1); } } this.trigger(); } }

    Slide 41

    Slide 41 text

    Actions/Dispatcher var Actions = { addProduct(product) { Store.onAddProduct(product); }, deleteProduct(product) { Store.onDeleteProduct(product); } }

    Slide 42

    Slide 42 text

    Views: Product class Product extends React.Component { render() { return(

    {this.props.count}x {this.props.name} = R$ {this.props. count * this.props.price}

    ) } }

    Slide 43

    Slide 43 text

    Views: Cart class Cart extends React.Component { constructor(props) { super(props); this.state = { products: [] } } componentDidMount() { Store.subscribe(this.onCartUpdate.bind(this)); } onCartUpdate(newState) { this.setState({ products: newState.products }); } render() { return (

    Cart

    {this.state.products.length ? this.state.products.map((p, idx) => { return ; }) : "Empty Cart"}
    {this.state.products.length ? : null}
    ) } }

    Slide 44

    Slide 44 text

    Views: Add and Delete buttons class AddButton extends React.Component { render() { var product = PRODUCTS[Math.floor(Math.random()*PRODUCTS.length)]; return( Actions.addProduct(product)}>Add Product ) } } class DelButton extends React.Component { render() { return( Actions.deleteProduct(this.props.product)} >Delete ) } }

    Slide 45

    Slide 45 text

    Considerações Finais

    Slide 46

    Slide 46 text

    Pensando em React

    Slide 47

    Slide 47 text

    Jumbotron

    Slide 48

    Slide 48 text

    No content

    Slide 49

    Slide 49 text

    Server-side vs Client-side ● SEO ● Tempo de renderização no servidor ● Tamanho do JavaScript ● Web Components

    Slide 50

    Slide 50 text

    Add-ons: Chrome Extension

    Slide 51

    Slide 51 text

    Quem usa React?

    Slide 52

    Slide 52 text

    https://github.com/facebook/react/wiki/Sites-Using-React

    Slide 53

    Slide 53 text

    No content

    Slide 54

    Slide 54 text

    jusbrasil.com.br/alertas

    Slide 55

    Slide 55 text

    M obile!

    Slide 56

    Slide 56 text

    React-Native: iOS var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; var App = React.createClass({ render: function() { return ( ); }, }); https://facebook.github.io/react-native/

    Slide 57

    Slide 57 text

    Thanks! tupy.jusbrasil.com.br | [email protected]