Embed Size (px)
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.
Citation preview
BACKBONE & REACT
SEATTLE REACT MEETUP
|
slides.formidablelabs.com/201411-react-backbone.html
@ryan_roemer formidablelabs.com
SURVEYWho's familiar with Backbone?
With React?
GOALCraft a Backbone/React
app:Lean and straightforward
Efficient, performant in the browser
Capable of server-side rendering
WHY ?BACKBONE.JSLean and mean
Simple, powerful abstractionsModels, Views, Routers
REST friendly
BUT...Dependencies on jQuery, Underscore.js
In practice, lots of DOM churn
FORMIDABLE LABS
BACKBONE.JS TESTING
LET'S WRITE SOME NOTES!
VANILLAJS (LOCALSTORAGE)(live) backbone-testing.com/notes/app/
github.com/ryan-roemer/backbone-testing/tree/master/notes/app
COMMONJS (REST)Modern build - CommonJS, Webpack,
Backbone, jQuery, Lodash
github.com/formidablelabs/notes/tree/master/alt/commonjs
BACKBONE.JS ABSTRACTIONS
MODELSA contains,
retrieves, and manipulates the data foryour app.
Backbone.Model
A note.
Relies on $.ajax for REST transport.
COLLECTIONSA is an
ordered list of models.Backbone.Collection
A list of notes.
TEMPLATESA function that renders model /collection object data as HTML.
VIEWSA mediates data,
event and display logic.Backbone.View
Display all notes, or a single note.
Where most jQuery comes into play.
ROUTERSA routes client-
side pages and mediates history.Backbone.Router
Route between all and single noteviews.
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
BUNDLE SIZEMinified: 193 KB
Gzipped: 63 KB
WHY ?Virtual DOM diffing / updating
Server-side rendering
Declarative, template-like UI components
REACT
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
LET'S WRITE MORE NOTES!(live) formidablelabs.github.io/notes-
react-exoskeleton/app.html
github.com/FormidableLabs/notes-react-exoskeleton
REACT CLIENT-SIDESwitch Backbone.js views to React components
Continue using Backbone.js models, collections, routers
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
EXOSKELETONBackbone.js, without the
dependencies.Get rid of jQuery and Underscore.js
Need $.ajax replacement
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
BUNDLE SIZEMinified: 170 KB (vs 193 KB)
Gzipped: 51 KB (vs 63 KB)
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> ); }});
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> ); }});
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>
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
APP HTML
var NO_JS = true;
<body> <div class="js-content"> {{{content}}} </div> <!-- No JavaScript --></body>
BOOTSTRAPPED HTMLNow let's tie it all together:
Start with server-rendered HTML
Bootstrap the SPA off that
Client-side render from there...
AWESOME!
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>
CONCLUSION Render and let React handle DOM diffing
Server-side rendering is easy
Leave jQuery behind
PARTING THOUGHTSDataflow is... different
Dive in more to the ecosystem: , React router, etc.Flux
RESOURCEStodomvc.com/examples/react-backbone
github.com/jhudson8/backbone-reaction
github.com/clayallsopp/react.backbone
github.com/magalhas/backbone-react-component
THANKS!
|
slides.formidablelabs.com/201411-react-backbone.html
@ryan_roemer formidablelabs.com
