Chicago Backbone Meetup: React + Backbone

40b30509b39daa608b1eaed90a3cec58?s=47 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

40b30509b39daa608b1eaed90a3cec58?s=128

Jake Larson

August 06, 2014
Tweet

Transcript

  1. 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. 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
  3. 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();
  4. 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)
  5. 17.
  6. 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
  7. 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)
  8. 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);
  9. 24.

    Mixins React allows for extra functionality through mixins. This mixin

    can be used to help glue backbone data to react components
  10. 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…
  11. 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