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

More Related Content

What's hot (20)

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

More from Spike Brehm (11)

Recently uploaded (20)

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