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

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

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.coffeemodule.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.

Share the Post:
Heading photo, Metadata.

What is Metadata?

What is metadata? Well, It’s an odd concept to wrap your head around. Metadata is essentially the secondary layer of data that tracks details about the “regular” data. The regular

XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes