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