Monday, August 3, 2015

Understanding Backbone.js from the lens of a Java programmer

Let me start this blog in favor of backend or server-side programmers by making the following statement:
"A server-side programmer (Java or similar) can understand nuances of javascript client or server-side frameworks or libraries much more quickly than an html developer". 
There are two key reasons behind the above statement:
  • Client-side development is not limited to HTML/CSS rather it has evolved to contain programming & design paradigms, which is complex for an html programmer.
  • Design paradigms including patterns needs to be applied to front-end code to keep it maintainable, performant & scalable - which is greenfield for programmers but not for HTML developers.
Having said that, I am writing this blog to exhibit that how easy it is for java programmers to co-relate concepts from java to javascript. I have chosen Backbone.js for the same, which is a popular library for developing singe-page web applications.

There is a major difference between Backbone and AngularJS, which is a framework & Backbone is a library. Frameworks impose more constraints & assumptions and are considered to make life easier but at the cost of being more restrictive and heavy (particularly from size of javascript). 

"From a java programmer perspective, a JavaScript library is similar to Apache CommonUtils Library (distributable as JAR) whereas framework is Apache Wicket or Spring framework (distributable as set of JARs)."

Backbone.js is an implementation of MVP pattern (similar to MVC pattern with slight deviation), which is not a new concept for a java programmer (might be for an HTML developer).

A matrix below can be handy for co-relating conceptual elements between Java & Backbone based components:

Java JavaScript (Backbone)
Model JPA Entity or POJO Class To create a Model class extend Backbone.Model.extend(). Backbone also has concept of Collection objects, which are nothing but collection of Model objects.
View JSP or XHTML (with scriplet) There are two parts to it:
  • Templates as HTMLs – Backbone leverages own templates or JS templating libraries like Handlebar
  • View Rendering Code as JavaScript – On change of model, invokes relevant code to lookup element in DOM and update HTML using Jquery.
Controller POJO Class manipulating Models & updating View A Backbone Router is similar component but not exactly the same. It maps URLs to Javascript functions.

A logical architecture for a single-page client application can be visualized as below:

I have created a very simple application, which lists employees along with few data elements. 

Source code in terms of javascript for above application is below, which demonstrates simplicity of using backbone library.
  // Namespace our app
   var app = {};

  // define employee model
  app.employee = Backbone.Model.extend({

    defaults: {
      company: "Lorem Ipsum",


  // define view rendering logic for employee
  app.employeeView = Backbone.View.extend({

    tagName: "article",
    template: _.template( $("#employeeElement").html() ),

    render: function() {
      var employeeTemplate = this.template(this.model.toJSON());
      return this;

  // A group (array) of employee models
  app.employeeCollection = Backbone.Collection.extend({
    // What type of models are in this collection?
    model: app.employee

  // defined rendering logic for employee collection
  app.employeeGroupView = Backbone.View.extend({

    tagName: "section",

    render: function() {
      this.collection.each(this.addEmployee, this);
      return this;

    addEmployee: function(employee) {
      var employeeView = new app.employeeView ({ model: employee });

  // action for URLs
  app.Router = Backbone.Router.extend({

  routes :{
    "": "noCopy",
    "firstEmployee" : "firstEmployeeMessage",
    "secondEmployee": "secondEmployeeMessage"

  noCopy: function() {

  firstEmployeeMessage: function() {

Message for First Employee

"); }, secondEmployeeMessage: function() { $(".message").html("

Message for Second Employee

"); } }); // create data for 2 employees var firstEmployee = new app.employee({ name: "Ankur Kumar", location: "Delhi", link: "firstEmployee" }); var secondEmployee = new app.employee({ name: "Jon Garton", location: "Melbourne", link: "secondEmployee" }); var employeeGroup = new app.employeeCollection([ firstEmployee, secondEmployee ]); // render employee view var employeeGroupView = new app.employeeGroupView({ collection: employeeGroup}); $(".allEmployees").html(employeeGroupView.render().el); var employeeRouter = new app.Router(); // for router Backbone.history.start();
All you need now is following HTML snippet in your page to render the view:

All data and information provided on this site is for informational purposes only. This site makes no representations as to accuracy, completeness, correctness, suitability, or validity of any information on this site and will not be liable for any errors, omissions, or delays in this information or any losses, injuries, or damages arising from its display or use. All information is provided on an as-is basis.This is a personal weblog. The opinions expressed here represent my own and not those of my employer or any other organization.


  1. Nice one :),Great post. I am making backbone js application many time. Its very great Javascript.

  2. Very good explanation on Backbone.js

    BackboneJS Training

  3. Website Development Virginia I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post.

  4. Thank you for taking the time to publish this information very useful!
    role of digital marketing

  5. Thanks for sharing this good blog. It's very interesting and useful for students
    Java Online Course

  6. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
    high domain authority relevant backlinks service

  7. Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post.
    Top SEO Agency

  8. Now day, everything is going to find a new but well settled and successful stream for their career. When I came to this blog, I really impressed by all the knowledge points mentioned here. Thank you for this assistance.

  9. This is a great article thanks for sharing this informative information. I will visit your blog regularly for some latest post. I will visit your blog regularly for Some latest post.
    pozycjonowanie gdańsk

  10. Your contents are too straightforward to browse and easy to understand.
    loft conversion Reading

  11. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. Vector Art

  12. I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article... SEO

  13. If you are looking for more information about flat rate locksmith Las Vegas check that right away. mail marketing

    wireless network solutions in dubai

    wireless network solutions in dubai