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

Joel Burget

October 25, 2013
Tweet

More Decks by Joel Burget

Other Decks in Programming

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