backbone.js with react views - server rendering, virtual dom, and more!
DESCRIPTION
11/18/2014 Seattle ReactJS meetup presentation -- http://www.meetup.com/seattle-react-js/events/216736502/ Abstract: 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 https://github.com/FormidableLabs/notes-react-exoskeleton -- a lean, modern MVC app with nifty features like server-side rendering and transparent server/client-side routing.TRANSCRIPT
![Page 1: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/1.jpg)
BACKBONE & REACT
SEATTLE REACT MEETUP
|
slides.formidablelabs.com/201411-react-backbone.html
@ryan_roemer formidablelabs.com
![Page 3: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/3.jpg)
SURVEYWho's familiar with Backbone?
With React?
![Page 4: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/4.jpg)
GOALCraft a Backbone/React
app:Lean and straightforward
Efficient, performant in the browser
Capable of server-side rendering
![Page 6: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/6.jpg)
WHY ?BACKBONE.JSLean and mean
Simple, powerful abstractionsModels, Views, Routers
REST friendly
![Page 7: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/7.jpg)
BUT...Dependencies on jQuery, Underscore.js
In practice, lots of DOM churn
![Page 8: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/8.jpg)
FORMIDABLE LABS
![Page 9: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/9.jpg)
BACKBONE.JS TESTING
![Page 10: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/10.jpg)
LET'S WRITE SOME NOTES!
![Page 11: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/11.jpg)
VANILLAJS (LOCALSTORAGE)(live) backbone-testing.com/notes/app/
github.com/ryan-roemer/backbone-testing/tree/master/notes/app
![Page 12: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/12.jpg)
COMMONJS (REST)Modern build - CommonJS, Webpack,
Backbone, jQuery, Lodash
github.com/formidablelabs/notes/tree/master/alt/commonjs
![Page 13: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/13.jpg)
BACKBONE.JS ABSTRACTIONS
![Page 14: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/14.jpg)
MODELSA contains,
retrieves, and manipulates the data foryour app.
Backbone.Model
A note.
Relies on $.ajax for REST transport.
![Page 15: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/15.jpg)
COLLECTIONSA is an
ordered list of models.Backbone.Collection
A list of notes.
![Page 16: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/16.jpg)
TEMPLATESA function that renders model /collection object data as HTML.
![Page 17: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/17.jpg)
VIEWSA mediates data,
event and display logic.Backbone.View
Display all notes, or a single note.
Where most jQuery comes into play.
![Page 18: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/18.jpg)
ROUTERSA routes client-
side pages and mediates history.Backbone.Router
Route between all and single noteviews.
![Page 19: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/19.jpg)
CODE ORGANIZATION
/ app.js config.js
collections/notes.jsmodels/note.jsrouters/router.js
templates/ note-view.hbs note.hbs notes-item.hbsviews/ note-nav.js note-view.js note.js notes-filter.js notes-item.js notes.js
![Page 20: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/20.jpg)
BUNDLE SIZEMinified: 193 KB
Gzipped: 63 KB
![Page 22: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/22.jpg)
WHY ?Virtual DOM diffing / updating
Server-side rendering
Declarative, template-like UI components
REACT
![Page 23: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/23.jpg)
BRINGING REACT TO NOTES
- A basic port of Backbone.js views to React components.
- The leaner version...
github.com/FormidableLabs/notes-react-backbone
notes-react-exoskeleton
![Page 24: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/24.jpg)
LET'S WRITE MORE NOTES!(live) formidablelabs.github.io/notes-
react-exoskeleton/app.html
github.com/FormidableLabs/notes-react-exoskeleton
![Page 25: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/25.jpg)
REACT CLIENT-SIDESwitch Backbone.js views to React components
Continue using Backbone.js models, collections, routers
![Page 26: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/26.jpg)
PORTING NOTESLet React handle all the HTML
No more templates / Handlebars
Use BB models/collections as React props
Update React components on Backbone.js events
![Page 27: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/27.jpg)
EXOSKELETONBackbone.js, without the
dependencies.Get rid of jQuery and Underscore.js
Need $.ajax replacement
![Page 28: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/28.jpg)
CODE ORGANIZATION
# Backbone!app.jscollections/notes.jsmodels/note.jsrouters/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
![Page 29: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/29.jpg)
BUNDLE SIZEMinified: 170 KB (vs 193 KB)
Gzipped: 51 KB (vs 63 KB)
![Page 30: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/30.jpg)
COMPONENTNOTES
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> ); }});
![Page 31: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/31.jpg)
COMPONENTNOTE
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> ); }});
![Page 32: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/32.jpg)
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>
![Page 33: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/33.jpg)
REACT SERVER-SIDEImport Note, Notes components server-side with CommonJS+ Webpack
Duplicate router logic on server
Mirror pushState fragments with href links
Check out react-router
![Page 34: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/34.jpg)
APP HTML
var NO_JS = true;
<body> <div class="js-content"> {{{content}}} </div> <!-- No JavaScript --></body>
![Page 35: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/35.jpg)
BOOTSTRAPPED HTMLNow let's tie it all together:
Start with server-rendered HTML
Bootstrap the SPA off that
Client-side render from there...
![Page 36: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/36.jpg)
AWESOME!
![Page 37: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/37.jpg)
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>
![Page 38: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/38.jpg)
CONCLUSION Render and let React handle DOM diffing
Server-side rendering is easy
Leave jQuery behind
![Page 39: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/39.jpg)
PARTING THOUGHTSDataflow is... different
Dive in more to the ecosystem: , React router, etc.Flux
![Page 40: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/40.jpg)
RESOURCEStodomvc.com/examples/react-backbone
github.com/jhudson8/backbone-reaction
github.com/clayallsopp/react.backbone
github.com/magalhas/backbone-react-component
![Page 41: Backbone.js with React Views - Server Rendering, Virtual DOM, and More!](https://reader033.vdocuments.site/reader033/viewer/2022060120/5592a41d1a28ab69798b45e3/html5/thumbnails/41.jpg)
THANKS!
|
slides.formidablelabs.com/201411-react-backbone.html
@ryan_roemer formidablelabs.com