Programação Reactiva

React é uma biblioteca JavaScript lançada pelo Facebook e Instagram para construir aplicações que os dados mudam com o tempo. Com o React é possível criar componentes reutilizáveis para suas aplicações web, até mesmo extender para aplicações mobile usando React-native.

Transcript

1. Programação Reactiva Osvaldo Matos Jr. (Tupy)
2. Osvaldo Matos Jr.
3. 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)
4. React
5. Aplicações Web Dinâmicas
9. <div class="like" onclick="like(this)"> <i class="icon icon-hearth"></i> <span class="count">120</span> </div> function like(elemnt) { elemnt.className += ' like-on'; var countElement = elemnt.getElementsByClassName("count")[0] countElement.innerHTML = parseInt(countElement.innerHTML) + 1; } Manipulando HTML usando JavaScript puro
10. 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*
11. jQuery
12. <div class="like"> <i class="icon icon-hearth"></i> <span class="count">120</span> </div> $('.like').on('click', function() { $(this).toggleClass('like-on'); var $count = $(this).find('count:first'); $count.text(parseInt($count.text()) + 1); }); Manipulando HTML usando jQuery
13. 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
14. React A javascript library for building user interfaces https://facebook.github.io/react/ Open Source: maio 2013
15. <!-- HTML --> <div id="container"></div> <!-- JavaScript --> <script> ReactDOM.render( React.createElement('h1', null, 'Hello World!'), document.getElementById('container') ); </script> Hello World! React Playground
16. Criando uma Classe com React var HelloMessage = React.createClass({ render(){ return ( <h1>Hello World</h1> ); }, }); ReactDOM.render( <HelloMessage />, document.getElementById('container') );
17. ECMAScript 6 class HelloMessage extends React.Component { render() { return ( <h1>Hello World</h1> ); } } ReactDOM.render( <HelloMessage />, document.getElementById('container') );
18. JSX: a XML-like syntax // JavaScript puro var hello = React.createElement("h1", null, "Hello World!"); ReactDOM.render(hello,document.getElementById('container')); // JSX var hello = <h1>Hello World</h1>; ReactDOM.render(hello, document.getElementById('container')); // JSX var hello = <HelloMessage />; ReactDOM.render(hello, document.getElementById('container'));
19. Criando Propriedades var HelloMessage = React.createClass({ render(){ return ( <h1>Hello {this.props.name}</h1> ); }, }); ReactDOM.render( <HelloMessage name="Tupy" />, document.getElementById('container') );
20. Propriedades padrão var HelloMessage = React.createClass({ getDefaultProps() { return {name: "Tupy"} }, render(){ return ( <h1>Hello {this.props.name}</h1> ); }, }); ReactDOM.render( <HelloMessage />, document.getElementById('container') );
21. 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, }, });
22. Composição var List = React.createClass({ render(){ return ( <ul> <ListItem label="Item 1" /> <ListItem label="Item 2" /> </ul> ); }, }); var ListItem = React.createClass({ render(){ return ( <li>{this.props.label}</li> ); }, });
23. 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
24. State and Events
25. State var Timer = React.createClass({ getInitialState() { return { seconds: 0} }, componentDidMount() { setInterval(this.tick, 1000);}, tick() { this.setState({ seconds: this.state.seconds + 1 }); }, render() { return ( <p>0:00:{this.state.seconds < 10 && '0'}{this.state.seconds}</p> ) } });
26. 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
27. Evento de Click var ClickMeButton = React.createClass({ handleClick() { alert("Hello!") }, render(){ return ( <button onClick={this.handleClick}>Click me</button> ); }, });
28. Usando dados de Forms var MyNameIs = React.createClass({ getInitialState() { return {name: '[DESCONHECIDO]'}; }, handleNameChange(e) { this.setState({name: e.target.value}); }, render(){ return ( <div> <h1>Meu nome é: {this.state.name}</h1> <label>Digite seu nome:</label> <input type="text" className="form-control" onChange={this. handleNameChange} /> </div> ); }, });
29. 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
30. Soma com props var Soma = React.createClass({ render(){ var b = this.props.b; var c = this.props.c; var a = b + c; return ( <p>a = {b} + {c} = {a}</p> ); }, }); ReactDOM.render( <Soma b={1} c={2} />, document.getElementById('container') );
31. 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 ( <p>a = <input type="text" ref="b" defaultValue={b} onChange={this.onInputChange} /> + <input type="text" ref="c" defaultValue={c} onChange={this.onInputChange} /> = {a} </p> ); }, });
32. Like! Criar um link de curtir e incrementar o contador quando por clicado.
33. 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 ( <span> <a href="#" onClick={this.handleLike.bind(this)}>{label}</a> &nbsp;({this.state.count} curtiram) </span> ) } }
34. Flux Diagram: Action, Dispacher, Store and View Unidirectional Data Flow View trigger different actions
35. 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
36. 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(); } }
37. Base Actions var Actions = { delete(item) {}, add(item) {}, update(item) {} }
39. 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 }, ]
40. 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(); } }
41. Actions/Dispatcher var Actions = { addProduct(product) { Store.onAddProduct(product); }, deleteProduct(product) { Store.onDeleteProduct(product); } }
42. Views: Product class Product extends React.Component { render() { return( <p>{this.props.count}x {this.props.name} = R$ {this.props. count * this.props.price}</p> ) } }
43. 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 ( <div> <h2>Cart</h2> {this.state.products.length ? this.state.products.map((p, idx) => { return <Product key={idx} {...p} />; }) : "Empty Cart"}<br /> <AddButton /> {this.state.products.length ? <DelButton product={this.state.products[0]} /> : null} </div> ) } }
44. Views: Add and Delete buttons class AddButton extends React.Component { render() { var product = PRODUCTS[Math.floor(Math.random()*PRODUCTS.length)]; return( <button onClick={e => Actions.addProduct(product)}>Add Product</button> ) } } class DelButton extends React.Component { render() { return( <button onClick={e => Actions.deleteProduct(this.props.product)} >Delete</button> ) } }
45. Considerações Finais
46. Pensando em React
47. Jumbotron
49. Server-side vs Client-side • SEO • Tempo de renderização no servidor • Tamanho do JavaScript • Web Components
50. Add-ons: Chrome Extension
51. Quem usa React?
52. https://github.com/facebook/react/wiki/Sites-Using-React
54. jusbrasil.com.br/alertas
55. M obile!
56. React-Native: iOS var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; var App = React.createClass({ render: function() { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); }, }); https://facebook.github.io/react-native/
57. Thanks! tupy.jusbrasil.com.br | tupy@jusbrasil.com.br