Meta Refresh 2014

On the construction of user interface on the web

Creating Single Page Web App using BackboneJS

Submitted by Akshay Mathur (@akshaymathur) on Dec 21, 2013

Section: Workshops Technical level: Advanced Status: Rejected


At the end of the workshop, the attendees will be able to:

  • Understand the concept of client side MVC and its design pattern
  • Implement a fairly complex MVC app using BackboneJS
  • Create a dynamic Pinterest-like user interface


During the workshop, we shall create something that looks like

Following concepts will be demonstrated while doing:

  • Dividing the code into Router, Models and Views
  • Handling nested views
  • Working with Collection of models
  • Handling DOM events within a view
  • Raising and capturing custom events
  • Getting data from server via ajax calls
  • Dynamically creating HTML and attaching it to DOM
  • Using Javascript templates
  • Simplifying Javascript coding using Coffeescript



  • The participants must bring the laptop with Firefox browser installed.
  • Firebug browser plugin should also be installed in Firefox.
  • Internet connection will also be required for including library and making ajax calls.


  • The participants should have good understanding of Javascript, HTML DOM manipulation via Javascript and basics of event handling in Javascript.
  • Knowledge of Cofeescript is a plus

Speaker bio

With 15+ years of industry experience, I am currently consulting a few startups on technical and product management side.

Most of the time I worked with product start-ups in various roles spanning across different departments including development, testing, release management, training, customer support, product management and digital marketing.

Wi-Fi security leader AirTight Networks and Social Shopping pioneer ShopSocially are the notable companies I worked full time. I joined both the companies at their conceptualization stage and worked with them till they became stable.



{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}