Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backbone to React

Backbone to React

Talk given at Hack Reactor October 25, 2013

54a33b032abe2b652a19b95a2c48b23d?s=128

Joel Burget

October 25, 2013
Tweet

Transcript

  1. None
  2. None
  3. @dino_joel Joel Burget (@dinojoel was taken)

  4. None
  5. None
  6. React + Backbone

  7. React + Backbone (more)

  8. React + Backbone (more)

  9. jsx

  10. /** @jsx React.DOM */ var HelloWorld = React.createClass({ render: function()

    { return <div> Hello World </div>; } }); jsx
  11. WHAT. IS THAT? /** @jsx React.DOM */ var HelloWorld =

    React.createClass({ render: function() { return <div> Hello World </div>; } }); jsx
  12. Noise /** @jsx React.DOM */ jsx

  13. <div>transform me</div> React.DOM.div({}, ‘transform me’) jsx

  14. <div> <span>fst</span> <span>snd</span> </div> React.DOM.div({}, [React.DOM.span({}, ‘fst’), React.DOM.span({}, ‘snd’)] )

    jsx
  15. <div id=”transform”> transform me </div> React.DOM.div( {id: “transform”}, ‘transform me’

    ) jsx
  16. var name = “HackReactor”; return <div> {name} </div>; var name

    = “HackReactor”; return React.DOM.div( {}, name ); jsx
  17. None
  18. <i id=”emptyspan”></i>; (html) <span id=”emptyspan” />; jsx

  19. React

  20. React var CatImg = React.createClass({ render: function() { var imgsrc

    = “catimg.com/” + this.props.name; return <img src={imgsrc} />; } }); React.renderComponent( <CatImg name="pewpewpew" />, mountNode);
  21. React

  22. var ClickMe = React.createClass({ render: function() { return <span onClick={this.handleClick}>

    {this.state.clicked ? “clicked!” : “click me!”} </span>; }, getInitialState: function() { return { clicked: false }; }, handleClick: function() { this.setState({ clicked: true }); } }); React
  23. React click me!

  24. React clicked!

  25. React + Backbone

  26. React + Backbone var Clicker = Backbone.Model.extend({ defaults: { active:

    false } });
  27. React + Backbone var ClickMe2 = React.createClass({ mixins: [BackboneMixin], render:

    function() { var clicker = this.props.clicker; var message = clicker.get(“active”) ? “clicked!” : “click me!”; return <span onClick={this.handleClick}> {message} </span>; }, handleClick: function() { this.props.clicker.toggle(“active”); }, getBackboneModels: function() { return [this.props.clicker]; } });
  28. None
  29. Tod MVC

  30. React + Backbone ~300 lines

  31. var Todo = Backbone.Model.extend({ ... }); var TodoList = Backbone.Collection.extend({

    model: Todo ... }); React + Backbone
  32. var TodoApp = React.createClass({ mixins: [BackboneMixin], render: function() { return

    <div> <section id="todoapp"> <header id="header"> <h1>todos</h1> ... {todos} {footer} ... </div>; } }); React + Backbone
  33. var TodoItem = React.createClass({ handleSubmit: function(event) { ... }, onEdit:

    function(event) { ... }, render: function() { return <li> check title x </li>; } }); React + Backbone
  34. None
  35. React + Backbone events: { " 'keypress #new-todo': 'createOnEnter', "

    'click #clear-completed': 'clearCompleted', " 'click #toggle-all': 'toggleAllComplete' }, ... this.listenTo(app.todos, 'add', this.addOne); this.listenTo(app.todos, 'reset', this.addAll); this.listenTo(app.todos, 'change:completed', this.filterOne); this.listenTo(app.todos, 'filter', this.filterAll); this.listenTo(app.todos, 'all', this.render); onSubmit onClick
  36. React + Backbone $('#todo-list') .append(view.render().el); this.$('#todo-list').html(''); this.$input.val(''); this.$el.html( this.template( this.model.toJSON()));

    this.$el.addClass('editing'); this.$el.removeClass('editing'); etc
  37. None
  38. Human

  39. Human 24 devs & designers

  40. Human jQuery Backbone {models, views} Handlebars (Ugh)

  41. Human 23500 LOC 200 Components

  42. Human 23500 LOC 200 Components Since June 3

  43. facebook.github.io/react/ joelburget.com/backbone-to-react/

  44. Thanks! Joel Burget - @dino_joel - Khan Academy