Chicago Backbone Meetup: React + Backbone

Presented on 8/05/2014

This presentation goes over some pitfalls of Backbone views and how using React solves them. We also created a simple application using Backbone and react (see sample project link below).

Links:

Sample Project:
https://github.com/larsonjj/react-backbone-example

Backbone React Component:
https://github.com/magalhas/backbone-react-component

Transcript

1. R E A C T + B A C K B O N E
   C H I C A G O B A C K B O N E M E E T U P
   Presented by Jake Larson
   #FEDMeetup
   

   View Slide

2. Building Modern Web Applications is
   Difficult
   

   View Slide

3. Back-end Front-end
   Logic
   

   View Slide

4. The Front-end space is the
   wild west
   

   View Slide

5. Backbone to the
   Rescue
   Models
   Views
   Routers
   Collections
   

   View Slide

6. But let’s be
   Honest…
   

   View Slide

7. Backbone views can
   be a Struggle…
   

   View Slide

8. Zombie Views
   

   View Slide

9. DOM Reflow Bottlenecks
   

   View Slide

10. So how do we solve these
    Problems?
    

    View Slide

11. Replace your Backbone views with
    React
    

    View Slide

12. What is React?
    Created at Facebook
    Technology stack agnostic
    A library for creating User Interfaces
    Everything is a Component
    Format similar to Backbone views
    

    View Slide

13. React to Backbone Comparison
    // React Component
    var SampleComponent = React.createClass({
    render: function() {
    return (
    React.DOM.div({className: "sample-component"},
    "Hello, world! I am a Component."
    )
    );
    }
    });
    // Render to DOM
    React.renderComponent(new SampleComponent(), document.body);
    !
    !
    // Backbone View
    var SampleView = Backbone.View.extend({
    el: $('body'),
    !
    initialize: function(){
    this.render();
    },
    !
    render: function(){
    $(this.el).append("Hello, world! I am a Component.");
    }
    });
    // Render to DOM
    new SampleView();
    

    View Slide

14. Why React?
    

    View Slide

15. causes headaches
    Data changing over time
    React re-renders the entire component
    when data changes
    (Makes things simple, guarantees displayed data is up-to-date)
    

    View Slide

16. “Isn’t re-rendering on each
    change expensive?”
    

    View Slide

17. DOM is SLOW
    Memory (RAM)
    Hard Drive
    Virtual DOM
    React’s
    is FAST
    (Makes re-rendering quick)
    

    View Slide

18. Virtual DOM process
    (On every update)
    All DOM nodes and events are synthetic, leading to consistent cross-
    browser support (even IE8!)
    State Component Virtual DOM
    Diff & Compute!
    Mutations
    Update!
    DOM
    Generate a new DOM subtree
    Diff with the old one
    Compute the minimal set of DOM mutations
    and put them in a queue
    Batch execute all updates
    

    View Slide

19. “Performance isn’t the [main] goal of the Virtual DOM,
    but if you’re worried with performance, most
    workloads are as fast or faster [than MV*
    alternatives] out of the box”!
    - Pete Hunt!
    (Software Engineer on React Team)
    

    View Slide

20. Server-side Rendering
    

    View Slide

21. Optional JSX syntax
    // React Component
    var SampleJSX = React.createClass({
    render: function() {
    return (
    
    Hello, world!
    I am a Component.
    
    );
    }
    });
    // Render to DOM
    React.renderComponent(new SampleJSX(), document.body);
    

    View Slide

22. Battle Tested
    

    View Slide

23. “So Backbone works perfectly
    with React?”
    Not exactly…..
    

    View Slide

24. Mixins
    React allows for extra functionality through mixins.
    This mixin can be used to help glue backbone data to react components
    

    View Slide

25. Let’s Build Something
    

    View Slide

26. Conclusion
    Solves many of the problems with Backbone Views!
    Is very performant out of the box (Virtual DOM)!
    Is production proven!
    Components can be rendered on client and server!
    Has IE8 support with HTML5 events and ECMAScript 5 goodies!
    Pure JavaScript, No Templates (Optional JSX Syntax)!
    React…
    

    View Slide

27. Questions?
    

    View Slide

28. Sources:
    Bottleneck Image: elbo.gs.washington.edu
    Gif Images: http://giphy.com/
    Bill Cosby image: http://weknowmemes.com/
    Boiler room image: http://www.hamptonregional.com/
    Server image: http://commons.wikimedia.org
    

    View Slide