Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Backbone.js with React Views - Server Rendering, Virtual DOM, and More!


Published on

11/18/2014 Seattle ReactJS meetup presentation --


Ryan Roemer will discuss moving the view components of a conventional Backbone.js app to React and dive into many of the new and exciting facets of a reactive, virtual DOM-based view layer.

He will review the path leading up to -- a lean, modern MVC app with nifty features like server-side rendering and transparent server/client-side routing.

Published in: Technology
  • @Matthew McFarland -- Oh, and I didn't change the Backbone.js source code, I used a different, but analogous project -- Exoskeleton -- which has optional jQuery/Underscore dependencies. Separately, I did create a vanilla React + BB/jQuery/Underscore project example too at:
    Are you sure you want to  Yes  No
    Your message goes here
  • @Matthew McFarland -- I removed jQuery and Underscore because my application didn't need them. I'm not saying *every* app doesn't need them ;) I use lodash on a daily basis and love it. One thing I would point out is for jQuery, React really seems to handle almost all the DOM manipulation. There were only like two jQuery calls I converted to native equivalents. So, ultimately, in any project use the tools that your dev. teams needs to be effective and write the best app possible!
    Are you sure you want to  Yes  No
    Your message goes here
  • Loved this until I hit slide 27. You shouldn't remove underscore and jquery, even reactjs has examples of using underscore/jquery with their codebase. (refs for example) - Was there any reason why you removed those? I want to use backbone and react, but I dont want to change the backbone source code (backbone relies heavily on underscore)
    Are you sure you want to  Yes  No
    Your message goes here
  • @Aaron Greenlee Unfortunately, no. But the source is up at for you to poke around with!
    Are you sure you want to  Yes  No
    Your message goes here
  • Is there a video of this talk?
    Are you sure you want to  Yes  No
    Your message goes here

Backbone.js with React Views - Server Rendering, Virtual DOM, and More!

  1. 1. BACKBONE & REACT SEATTLE REACT MEETUP /201411-react-backbone.html  |  @ryan_roemer
  3. 3. SURVEY Who's familiar with Backbone? With React?
  4. 4. GOAL Craft a Backbone/React app: Lean and straightforward Efficient, performant in the browser Capable of server-side rendering
  6. 6. WHY BACKBONE.JS? Lean and mean Simple, powerful abstractions Models, Views, Routers REST friendly
  7. 7. BUT... Dependencies on jQuery, Underscore.js In practice, lots of DOM churn
  11. 11. VANILLAJS (LOCALSTORAGE) (live) tree/master/notes/app
  12. 12. COMMONJS (REST) Modern build - CommonJS, Webpack, Backbone, jQuery, Lodash tree/master/alt/commonjs
  14. 14. MODELS Backbone.Model A contains, retrieves, and manipulates the data for your app. A note. Relies on $.ajax for REST transport. 
  15. 15. COLLECTIONS Backbone.Collection A is an ordered list of models. A list of notes.   
  16. 16. TEMPLATES A function that renders model / collection object data as HTML. 
  17. 17. VIEWS Backbone.View A mediates data, event and display logic. Display all notes, or a single note. Where most jQuery comes into play. 
  18. 18. ROUTERS Backbone.Router A routes client-side pages and mediates history. Route between all and single note views. 
  19. 19. CODE ORGANIZATION / app.js config.js collections/notes.js models/note.js routers/router.js templates/ note-view.hbs note.hbs notes-item.hbs views/ note-nav.js note-view.js note.js notes-filter.js notes-item.js notes.js
  20. 20. BUNDLE SIZE Minified: 193 KB Gzipped: 63 KB
  21. 21. REACT
  22. 22. WHY REACT ? Virtual DOM diffing / updating Server-side rendering Declarative, template-like UI components
  23. 23. BRINGING REACT TO NOTES notes-react-backbone notes-react-exoskeleton - A basic port of Backbone.js views to React components. - The leaner version...
  24. 24. LET'S WRITE MORE NOTES! (live) exoskeleton/app.html exoskeleton
  25. 25. REACT CLIENT-SIDE Switch Backbone.js views to React components Continue using Backbone.js models, collections, routers
  26. 26. PORTING NOTES Let React handle all the HTML No more templates / Handlebars Use BB models/collections as React props Update React components on Backbone.js events
  27. 27. EXOSKELETON Backbone.js, without the dependencies. Get rid of jQuery and Underscore.js Need $.ajax replacement
  28. 28. CODE ORGANIZATION # Backbone! app.js collections/notes.js models/note.js routers/router.js # React! components/ note.jsx notes.jsx nav/base.jsx nav/note.jsx nav/notes.jsx page/base.jsx page/note.jsx page/note/edit.jsx page/note/view.jsx page/notes.jsx page/notes/item.jsx
  29. 29. BUNDLE SIZE Minified: 170 KB (vs 193 KB) Gzipped: 51 KB (vs 63 KB)
  30. 30. NOTES COMPONENT module.exports = React.createClass({ // ... render: function () { return ( <div> <NotesNav notes={this.props.notes} onUpdateFilter= {this.onUpdateFilter} /> <NotesPage notes={this.props.notes} filter={this.state.filter} /> </div> ); } });
  31. 31. NOTE COMPONENT module.exports = React.createClass({ // ... render: function () { return ( <div> <NoteNav note={this.props.note} action={this.state.action} handleActionChange= {this.setAction} /> <NotePage note={this.props.note} action={this.state.action} /> </div> ); } });
  32. 32. APP HTML var NO_SERVER_SIDE = true; <body> <div class="js-content"> <!-- No starting content --> </div> <script src="/app/js-dist/bundle.js"></script> </body>
  33. 33. REACT SERVER-SIDE Import Note, Notes components server-side with CommonJS + Webpack Duplicate router logic on server Mirror pushState fragments with href links Check out react-router
  34. 34. APP HTML var NO_JS = true; <body> <div class="js-content"> {{{content}}} </div> <!-- No JavaScript --> </body>
  35. 35. BOOTSTRAPPED HTML Now let's tie it all together: Start with server-rendered HTML Bootstrap the SPA off that Client-side render from there...
  36. 36. AWESOME!
  37. 37. APP HTML TEMPLATE <body> <div class="js-content"> {{{content}}} </div> <script class="js-initial-data" type="application/json"> {{{initialData}}} </script> <script src="/app/js-dist/bundle.js"></script> </body>
  38. 38. CONCLUSION  Render and let React handle DOM diffing  Server-side rendering is easy  Leave jQuery behind
  39. 39. PARTING THOUGHTS Dataflow is... different Dive in more to the ecosystem: , Flux React router, etc.
  40. 40. RESOURCES
  41. 41. THANKS! /201411-react-backbone.html  |  @ryan_roemer