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

Chicago Backbone Meetup: React + Backbone

Jake Larson
August 06, 2014

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

Jake Larson

August 06, 2014
Tweet

More Decks by Jake Larson

Other Decks in Technology

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