Introducing Rendr: Run your Backbone.js apps on the client and server

Introducing Rendr:
Run your Backbone.js apps
on the client and server

Spike Brehm
@spikebrehm

HTML5DevConf
April 1, 2013

Exciting times in the
world of web apps.

<your framework here>

Poor SEO; not crawlable
Performance hit to download
and parse JS
Duplicated application logic
Context switching

It’s still a PITA to build
fast, maintainable
rich-client apps.

We started thinking...

What if our JavaScript
app could run on both
sides?

Client +
server
MVC
aka “The Holy Grail”

Provides SEO
Initial pageload is drastically
faster
Consolidated application logic

Meteor: client/server, but no
server-side rendering; owns data
layer
Derby: client+server rendering,
but owns data layer
Mojito: client+server rendering,
but full stack, and... YUI.

What it is.
JavaScript MVC on client & server
Backbone & Handlebars
BaseView, BaseModel,
BaseCollection, BaseApp,
ClientRouter, ServerRouter...
Express middleware
Minimal glue between client & server

What it ain’t.

Batteries-included web framework
Finished

Design goals:
• Write application logic agnostic to
environment.
• Library, not a framework.
• Minimize if (server) {...} else {...}.

• Hide complexity in library.
• Talk to RESTful API.
• No server-side DOM.
• Simple Express middleware.

Classes:
- BaseApp < Backbone.Model
- BaseModel < Backbone.Model
- BaseCollection < Backbone.Collection
- BaseView < Backbone.View
- AppView < BaseView
- ClientRouter < BaseRouter
- ServerRouter < BaseRouter
- ModelStore < MemoryStore
- CollectionStore < MemoryStore
- Fetcher

Rendr directory structure
|- client/
|- shared/ } Sent to client
|- server/

App directory structure
|- app/
|- public/
|- server/

App directory structure

}
|- app/
|--- collections/
|--- controllers/
|--- models/ Entire app dir
|--- templates/ gets sent to
|--- views/
|--- app.js
client
|--- router.js
|--- routes.js
|- public/
|- server/

CommonJS using Stitch

On the server:
var User = require(‘app/models/user’);
var BaseView = require(‘rendr/shared/base/view’);

On the client:
var User = require(‘app/models/user’);
var BaseView = require(‘rendr/shared/base/view’);

app/routes.js

module.exports = function(match) {
match('', 'home#index');
match('users', 'users#index');
match('users/:id', 'users#show');
};

app/routes.js

};

controller

app/routes.js

};

action

• On server startup, parse routes ﬁle and mount as
Express routes
• GET /users/1337
• Router matches "/users/:id" to "users#show" with
params = {"id": 1337}
• Router ﬁnds controller:
require("app/controllers/users_controller")
• Router executes show action with params = {"id": 1337}
• The show action says to fetch User#1337 and use
UsersShowView view class
• Router instantiates new UsersShowView with data
• Router calls view.getHtml()
• Hands HTML to Express, which decorates with layout
and serves response

• On page load, Router parses routes ﬁle and mounts
Backbone routes
• pushState /users/1337
• Router matches "/users/:id" to "users#show" with
params = {"id": 1337}
• Router ﬁnds controller:
require("app/controllers/users_controller")
• Router executes show action with params = {"id": 1337}
• The show action says to fetch User#1337 and use
UsersShowView view class
• Router instantiates new UsersShowView with data
• Router calls view.render()
• Insert into DOM

app/controllers/users_controller.js

module.exports = {
show: function(params, callback) {
callback(null, 'users_show_view');
}
};


module.exports = {
}
};

Most simple case: no fetching of
data.


module.exports = {
}
};

But we want to fetch the user.


module.exports = {
var spec = {
model: {model: ‘User’, params: params}
};
this.app.fetch(spec, function(err, results) {
callback(err, 'users_show_view', results);
});
}
};

app/views/users_show_view.js

var BaseView = require('rendr/shared/base/view');

module.exports = BaseView.extend({
className: 'users_show_view'
});
module.exports.id = 'users_show_view';



className: 'users_show_view',

events: {
'click p': 'handleClick'
},

handleClick: function() {...}
});
module.exports.id = 'users_show_view';

app/templates/users_show_view.hbs

<h1>User: {{name}}</h1>

<p>From {{city}}.</p>

Rendered HTML

<div class="users_show_view"
data-view="users_show_view"
data-model_name="user"
data-model_id="1337">

<h1>User: Spike</h1>

<p>From San Francisco.</p>
</div>

Where’d the data come from?
Where’s the render method?
How do I customize what gets
passed to the template?
Sensible defaults.



getTemplateData: function() {

}
});



var data = BaseView.prototype.getTemplateData
.call(this);
}
});



.call(this);
// `data` is equivalent to this.model.toJSON()

}
});



.call(this);
// `data` is equivalent to this.model.toJSON()
return _.extend(data, {
nameUppercase: data.name.toUpperCase()
});
}
});

app/templates/users_show_view.hbs

<h1>User: {{nameUppercase}}</h1>

<p>From {{city}}.</p>

Rendered HTML

<div class="users_show_view" data-...>
<h1>User: SPIKE</h1>

</div>

Rendered HTML with layout
<!doctype html>
<html lang="en">
<head>...</head>

<body>
<div id="content">
<div class="users_show_view" data-view="users_show_view"
data-model_name="user" data-model_id="1337">


</div>
</div>

<script>
(function() {
var App = window.App = new (require('app/app'));
App.bootstrapData({
"model":{"summary":{"model":"user","id":1337},
"data":{"name":"Spike","city":"San Francisco", ...}
});
App.start();
})();
</script>
</body></html>

Rendered HTML with layout
<!doctype html>
<html lang="en">
<head>...</head>

<body>
<div id="content">
<div class="users_show_view" data-view="users_show_view"
data-model_name="user" data-model_id="1337">


</div>
</div>

<script>
(function() {
var App = window.App = new (require('app/app'));
App.bootstrapData({
"model":{"summary":{"model":"user","id":"wycats"},
"data":{"name":"Spike","city":"San Francisco", ...}
});
App.start();
})();
</script>
</body></html>

1. Find DOM els with data-view attribute.
var viewEls = $("[data-view]");

2. Determine model or collection based on
data-model_name, data-model_id, etc.

var modelName = viewEl.data(‘model_name’),
modelId = viewEl.data(‘model_id’);

console.log(modelName, modelId);
=> “user” 1337

3. Fetch model/collection data from
ModelStore/CollectionStore.
var model = modelStore.get(modelName,
modelId);

4. Find view class.
var viewName, ViewClass;
viewName = viewEl.data(‘view’);
ViewClass = require('app/views/' + viewName);

5. Instantiate view instance with model.
var view = new ViewClass({
model: model,
...
});

6. Attach to DOM el.
view.setElement(viewEl);

7. Delegate events.
view.delegateEvents();

8. Proﬁt!
alert(“That wasn’t so hard, right?”)

Rendr is available
starting today.
github.com/airbnb/rendr

TODO

• Share routing logic between client &
server.

• Lazy load views, templates, etc as needed.

• Support other templating languages.

• Break down into smaller modules.

• Rewrite in vanilla JavaScript.

• much more...

Thanks!
@spikebrehm
@rendrjs
@AirbnbNerds

Introducing Rendr: Run your Backbone.js apps on the client and server

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Introducing Rendr: Run your Backbone.js apps on the client and server

Similar to Introducing Rendr: Run your Backbone.js apps on the client and server (20)

More from Spike Brehm

More from Spike Brehm (11)

Recently uploaded

Recently uploaded (20)

Introducing Rendr: Run your Backbone.js apps on the client and server