$30 off During Our Annual Pro Sale. View Details »

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. View Slide

  2. View Slide

  3. @dino_joel
    Joel Burget
    (@dinojoel was taken)

    View Slide

  4. View Slide

  5. View Slide

  6. React + Backbone

    View Slide

  7. React + Backbone
    (more)

    View Slide

  8. React + Backbone
    (more)

    View Slide

  9. jsx

    View Slide

  10. /** @jsx React.DOM */
    var HelloWorld = React.createClass({
    render: function() {
    return
    Hello World
    ;
    }
    });
    jsx

    View Slide

  11. WHAT. IS THAT?
    /** @jsx React.DOM */
    var HelloWorld = React.createClass({
    render: function() {
    return
    Hello World
    ;
    }
    });
    jsx

    View Slide

  12. Noise
    /** @jsx React.DOM */
    jsx

    View Slide

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

    View Slide


  14. fst
    snd

    React.DOM.div({},
    [React.DOM.span({}, ‘fst’),
    React.DOM.span({}, ‘snd’)]
    )
    jsx

    View Slide


  15. transform me

    React.DOM.div(
    {id: “transform”},
    ‘transform me’
    )
    jsx

    View Slide

  16. var name = “HackReactor”;
    return
    {name}
    ;
    var name = “HackReactor”;
    return React.DOM.div(
    {},
    name
    );
    jsx

    View Slide

  17. View Slide

  18. ;
    (html)
    ;
    jsx

    View Slide

  19. React

    View Slide

  20. React
    var CatImg = React.createClass({
    render: function() {
    var imgsrc =
    “catimg.com/” + this.props.name;
    return ;
    }
    });
    React.renderComponent(
    ,
    mountNode);

    View Slide

  21. React

    View Slide

  22. var ClickMe = React.createClass({
    render: function() {
    return onClick={this.handleClick}>
    {this.state.clicked ?
    “clicked!” : “click me!”}
    ;
    },
    getInitialState: function() {
    return { clicked: false };
    },
    handleClick: function() {
    this.setState({ clicked: true });
    }
    });
    React

    View Slide

  23. React
    click me!

    View Slide

  24. React
    clicked!

    View Slide

  25. React
    + Backbone

    View Slide

  26. React
    + Backbone
    var Clicker = Backbone.Model.extend({
    defaults: { active: false }
    });

    View Slide

  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
    {message}
    ;
    },
    handleClick: function() {
    this.props.clicker.toggle(“active”);
    },
    getBackboneModels: function() {
    return [this.props.clicker];
    }
    });

    View Slide

  28. View Slide

  29. Tod MVC

    View Slide

  30. React
    + Backbone
    ~300 lines

    View Slide

  31. var Todo = Backbone.Model.extend({ ... });
    var TodoList = Backbone.Collection.extend({
    model: Todo
    ...
    });
    React
    + Backbone

    View Slide

  32. var TodoApp = React.createClass({
    mixins: [BackboneMixin],
    render: function() {
    return


    todos
    ...
    {todos}
    {footer}
    ...
    ;
    }
    });
    React
    + Backbone

    View Slide

  33. var TodoItem = React.createClass({
    handleSubmit: function(event) { ... },
    onEdit: function(event) { ... },
    render: function() {
    return
    check
    title
    x
    ;
    }
    });
    React
    + Backbone

    View Slide

  34. View Slide

  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

    View Slide

  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

    View Slide

  37. View Slide

  38. Human

    View Slide

  39. Human
    24 devs & designers

    View Slide

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

    View Slide

  41. Human
    23500 LOC
    200 Components

    View Slide

  42. Human
    23500 LOC
    200 Components
    Since June 3

    View Slide

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

    View Slide

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

    View Slide