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).


Sample Project:

Backbone React Component:

Jake Larson

August 06, 2014

More Decks by Jake Larson

Other Decks in Technology


  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
  2. Building Modern Web Applications is Difficult

  3. Back-end Front-end Logic

  4. The Front-end space is the wild west

  5. Backbone to the Rescue Models Views Routers Collections

  6. But let’s be Honest…

  7. Backbone views can be a Struggle…

  8. Zombie Views

  9. DOM Reflow Bottlenecks

  10. So how do we solve these Problems?

  11. Replace your Backbone views with React

  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
  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("<div>Hello, world! I am a Component.</div>"); } }); // Render to DOM new SampleView();
  14. Why React?

  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)
  16. “Isn’t re-rendering on each change expensive?”

  17. DOM is SLOW Memory (RAM) Hard Drive Virtual DOM React’s

    is FAST (Makes re-rendering quick)
  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
  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)
  20. Server-side Rendering

  21. Optional JSX syntax // React Component var SampleJSX = React.createClass({

    render: function() { return ( <div className="sample-component"> <h1>Hello, world! </h1> <p>I am a Component.</p> </div> ); } }); // Render to DOM React.renderComponent(new SampleJSX(), document.body);
  22. Battle Tested

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

  24. Mixins React allows for extra functionality through mixins. This mixin

    can be used to help glue backbone data to react components
  25. Let’s Build Something

  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…
  27. Questions?

  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