Tweet
Tweet

Slide 1

Slide 1 text

Construindo interfaces componentizadas com

Slide 2

Slide 2 text

CTO e Co-fundador da INBEP, startup com foco em educação. Sérgio Rafael Siqueira github.com/sergiors sergiorsiqueira.com [email protected]

Slide 3

Slide 3 text

React é uma library com foco em interface do usuário

Slide 4

Slide 4 text

Quem usa

Slide 5

Slide 5 text

Library Framework

Slide 6

Slide 6 text

O que é interface do usuário?

Slide 7

Slide 7 text

• Model • Collection

Slide 8

Slide 8 text

“ É tudo que o usuário pode interagir

Slide 9

Slide 9 text

{{ mustache }}

Slide 10

Slide 10 text

<p> {{#if liked}} You like this. Click to toggle. {{else}} You haven't liked this. Click to toggle. {{/if}} </p>

Slide 11

Slide 11 text

{{ mustache }}

{{#liked}} You like this. Click to toggle. {{^liked}} You haven't liked this. Click to toggle. {{/liked}}

Slide 12

Slide 12 text

Template + Javascript = Interface

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });

Slide 15

Slide 15 text

var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });

Slide 16

Slide 16 text

var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });

Slide 17

Slide 17 text

var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });

Slide 18

Slide 18 text

var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });

Slide 19

Slide 19 text

var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });

Slide 20

Slide 20 text

var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });

Slide 21

Slide 21 text

http://facebook.github.io/react/docs/component-specs.html#component-specifications { getDefaultProps: function() {}, propTypes: function() {}, mixins: function() {}, // ... }

Slide 22

Slide 22 text

“ Legal cara, mas a marcação do Template Engine parece mais fácil…

Slide 23

Slide 23 text

JSX

Slide 24

Slide 24 text

var LikeButton = React.createClass({ getInitialState: function() { return {liked: false} }, handleClick: function() { this.setState({liked: !this.state.liked}); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return (
You {text} this. Click to toggle.
); } });

Slide 25

Slide 25 text

JSX on the fly

Slide 26

Slide 26 text

Task runner

Slide 27

Slide 27 text

E se já tenho dados em uma camada de persistência?

Slide 28

Slide 28 text

var LikeButton = React.createClass({ getInitialState: function() { return { liked: this.props.liked || false } }, componentWillMount: function() { Backbone.Events.on('change:anywhere', function(data) { this.setState({ liked: data.liked }); }.bind(this)); }, handleClick: function() { this.setState({liked: !this.state.liked}); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return (

Slide 29

Slide 29 text

Métodos de ciclo de vida

Slide 30

Slide 30 text

Mounting Updating componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate Unmounting componentWillUnmount http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount

Slide 31

Slide 31 text

var LikeButton = React.createClass({ getInitialState: function() { return {liked: false} }, componentWillMount: function() { Backbone.Events.on('change:anywhere', function(data) { this.setState({ liked: data.liked }); }.bind(this)); }, handleClick: function() { this.setState({liked: !this.state.liked}); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return (
You '+text+' this. Click to toggle.

Slide 32

Slide 32 text

Chamado imediatamente antes do render inicial. componentWillMount

Slide 33

Slide 33 text

var LikeButton = React.createClass({ getInitialState: function() { return {liked: false} }, componentDidMount: function() { $.ajax('example.php') .done(function(res) { this.setState({ liked: res.liked }); }.bind(this)); }, handleClick: function() { this.setState({liked: !this.state.liked}); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return (
You '+text+' this. Click to toggle.

Slide 34

Slide 34 text

componentDidMount Chamado imediatamente após o render inicial. A DOM já esta pronta! Ideal para trabalhar com biblioteca de terceiros que precisam do objeto na DOM.

Slide 35

Slide 35 text

Performance

Slide 36

Slide 36 text

Event Delegation

Slide 37

Slide 37 text

Slide 38

Slide 38 text

http://loopinfinito.com.br/2013/05/14/entendendo-captura-e-propagacao-de-eventos/ .0 -> #um .0.0 -> #dois .0.0.0 -> #tres

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Virtual DOM

Slide 41

Slide 41 text

Por que mutação é ruim

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

computa a diferença aplica a mudança cria/altera

Slide 45

Slide 45 text

Dúvidas? discussões apenas apenas no bar!