Backbone to React

Talk given at Hack Reactor October 25, 2013

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