Browse DevX
Sign up for e-mail newsletters from DevX


Run Your Backbone.js Apps Seamlessly in Client and Server with Rendr

Learn more about a library named Rendr.js that will allow you to pull application logic to the server using Backbone.js and Node.js, in a way that allows it to be shared with the client.


The developers at AirBnb  have been working on a library named Rendr.js that will allow you to pull application logic to the server using Backbone.js  and Node.js in a way that allows it to be shared with the client. This is an interesting premise in the world of JavaScript web app development. You can potentially control the HTML you want rendered in the client, without having the client to first download the JavaScript. Underlying Rendr, there is an interesting mix of technologies at play. The first noticeable technology choice is the usage of CoffeeScript. By their own admission, this is controversial, but given the popularity, they still went ahead with using it. In the controller, instead of a typical Backbone style router, they are using real controller objects to allow related actions to be grouped into manageable units.

The routes are specified in separate route files that also support optional route parameters.

# app/routes.coffee
module.exports = (match) ->
match 'orders/:id',    'orders#show'
match 'search',        'orders#search', orderCount: 100 

Notice the optional parameter orderCount. The controller is executed in both the client and the server. In the previous route, if a user hits the resource /orders/1100, the router will look for the show action in the controller.

show: (params, callback) ->
    spec =
      model: {model: 'Order', params: params}
    @app.fetch spec, (err, results) ->
      callback(err, results) 

The fetch call provides for a layer of indirection supporting caching in client and server as the controller actions are executed.

Another technology of note here is the usage of CommonJS, which is used to require modules by Node. The same syntax is used in the client with the help of Stitch, a library written to stitch CommonJS modules in the browser.

The Views and Models extend Backbone.View and Backbone.Model respectively. Each view is associated with a Handlebars template. A getHtml() call in the server pushes all the HTML manipulation to the Handlebars template. The client uses the View#render() to invoke the getHtml() call and update the innerHTML of the template elements.

Rendr is an interesting mix of technologies and a completely new premise in developing mobile web apps using well known JavaScript libraries and frameworks. While it is not completely open sourced yet, the promise it shows is definitely worth a mention in developing real world apps.

Sandeep Chanda is a Director of Solutions at Neudesic, a Microsoft National Systems Integrator and Gold Certified Partner. He has been working on several Microsoft Technologies (including but not limited to .NET, Azure, BizTalk, SharePoint and Dynamics CRM) for the past ten years, building large scale enterprise applications spanning multiple industries. He is a technology enthusiast and a speaker at various corporate events and public webinars. He has authored several articles on Microsoft Dynamics CRM 4.0 in DevX, and is the Author of the books Windows Identity Foundation Cookbook by PacktPub, and Beginning ASP.NET 4.5 Databases by Apress. Most recently he has been involved in evangelizing aspects of Application Lifecycle Management (ALM) and developer collaboration using Team Foundation Server 2012 and was the speaker on the subject at the Great Indian Developer Summit 2012. He is currently co-authoring a book on Dynamics CRM Marketing Automation with PacktPub. Sandeep holds an MS degree in Software Systems from BITS, Pilani and his areas of interest include Service Oriented Computing, Cross Platform Mobility, Pervasive Computing, Haptic Devices and Cloud Computing.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date