Backbone.js with React Views - Server Rendering, Virtual DOM, and More!
12 likes34,941 views
The document outlines a presentation on integrating Backbone.js with React for a more efficient app development experience. It discusses the advantages of both frameworks, highlights a code organization strategy, and emphasizes server-side rendering as a key benefit. It also encourages the abandonment of jQuery dependencies and provides links to additional resources and example projects.
Backbone.js with React Views - Server Rendering, Virtual DOM, and More!
- 1. BACKBONE & REACT SEATTLE REACT MEETUP slides.formidablelabs.com /201411-react-backbone.html | @ryan_roemer formidablelabs.com
- 2. BRIDGING THE OLD & NEW
- 3. SURVEY Who's familiar with Backbone? With React?
- 4. GOAL Craft a Backbone/React app: Lean and straightforward Efficient, performant in the browser Capable of server-side rendering
- 5. BACKBONE.JS
- 6. WHY BACKBONE.JS? Lean and mean Simple, powerful abstractions Models, Views, Routers REST friendly
- 7. BUT... Dependencies on jQuery, Underscore.js In practice, lots of DOM churn
- 10. LET'S WRITE SOME NOTES!
- 11. VANILLAJS (LOCALSTORAGE) (live) backbone-testing.com/notes/app/ github.com/ryan-roemer/backbone-testing/ tree/master/notes/app
- 12. COMMONJS (REST) Modern build - CommonJS, Webpack, Backbone, jQuery, Lodash github.com/formidablelabs/notes/ tree/master/alt/commonjs
- 14. MODELS Backbone.Model A contains, retrieves, and manipulates the data for your app. A note. Relies on $.ajax for REST transport.
- 15. COLLECTIONS Backbone.Collection A is an ordered list of models. A list of notes.
- 16. TEMPLATES A function that renders model / collection object data as HTML.
- 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. ROUTERS Backbone.Router A routes client-side pages and mediates history. Route between all and single note views.
- 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. BUNDLE SIZE Minified: 193 KB Gzipped: 63 KB
- 21. REACT
- 22. WHY REACT ? Virtual DOM diffing / updating Server-side rendering Declarative, template-like UI components
- 23. BRINGING REACT TO NOTES github.com/FormidableLabs/ notes-react-backbone notes-react-exoskeleton - A basic port of Backbone.js views to React components. - The leaner version...
- 24. LET'S WRITE MORE NOTES! (live) formidablelabs.github.io/notes-react- exoskeleton/app.html github.com/FormidableLabs/notes-react- exoskeleton
- 25. REACT CLIENT-SIDE Switch Backbone.js views to React components Continue using Backbone.js models, collections, routers
- 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. EXOSKELETON Backbone.js, without the dependencies. Get rid of jQuery and Underscore.js Need $.ajax replacement
- 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. BUNDLE SIZE Minified: 170 KB (vs 193 KB) Gzipped: 51 KB (vs 63 KB)
- 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. 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. 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. 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. APP HTML var NO_JS = true; <body> <div class="js-content"> {{{content}}} </div> <!-- No JavaScript --> </body>
- 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. AWESOME!
- 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. CONCLUSION Render and let React handle DOM diffing Server-side rendering is easy Leave jQuery behind
- 39. PARTING THOUGHTS Dataflow is... different Dive in more to the ecosystem: , Flux React router, etc.
- 40. RESOURCES todomvc.com/examples/react-backbone github.com/jhudson8/backbone-reaction github.com/clayallsopp/react.backbone github.com/magalhas/backbone-react-component
- 41. THANKS! slides.formidablelabs.com /201411-react-backbone.html | @ryan_roemer formidablelabs.com