Backbone.js - An Awakening

Backbone.js

Frameworks and Libraries – What's the difference?

Today, we hear a lot about new and emerging frameworks and libraries written over JavaScript such as Backbone.js, AngularJS, and Knockout.js, CanJS etc.
A framework derives the way in which an application is designed, developed and executes. In short, framework calls your code.
Whereas, a library is a set of functions, which your application can use. Simply put, your code will call the library.
One of the advantages of the libraries over the framework is that they are very flexible. Framework offers a rigid way of implementation.

Introduction to Backbone.js

Backbone.js is a library. Backbone is an extremely light-weight and easy to use JavaScript library. The Design pattern that Backbone uses is neither MVC (Model-View-Controller) nor MVVM (Model-View-View Model). Instead it uses MV (Model-View). It’s a new pattern specially designed for the client side web applications (also called as Single Page Application).
Client side web applications is an emerging way of designing light-weight web applications to increase greater user experience, less network consumption, increased usability and a handy turnaround time.
Backbone can also communicate with your existing API over a RESTful JSON interface.

Why Backbone?

There are many production deployed single page apps designed using Backbone. The examples section of the backbone docs lists a lot of big names which proves its worth.
Backbone has a very small library (Just one file...!); a compressed and minified production version just goes about 6.5kb in size.
Backbone is extremely lightweight, which means it’s good for building fast and responsive applications.
An active community extant with free tutorials for getting started with the framework. 
Can work in a small section of your page — doesn’t need to control whole page.

Building blocks of Backbone.js

Backbone is designed to provide a structured way to design and develop client side web applications. To achieve this purpose, Backbone provides following key building blocks:
  • Models
  •  Collections
  •  Views
  •  Routers
Let’s understand these key components in brief.
  • Model
Model is one of the key components of any web application. It contains your application’s state as well as the logic and the behavior. Models are the single point of truth for the data.  Models are created, they are changed over the application life cycle and they are synchronized to their data sources.
Model supports events. Models use these events for communicating state changes to the views as well as to the collection. So, a change in a model can ripple across the application without any direct coupling and redundancy.

  • Collection
Collection is a group of similar models. Collections can synchronize with the server for the containing models. It is similar to arrays with the model objects. It’s a rich API of enumerable functions. They can hold one or more models of the same type. They support custom events. Similar to the models, a change in a collection can ripple across the application without any direct coupling and redundancy.

  • Views
View is an interface for the user. View interacts with DOM and they can handle the events raised by them. Views also possess the ability to listen to the events raised by models and collections. They can change the UI as per the changes in the collection and models. In other words, views are the glue between model and DOM. In many Backbone applications, they comprise most of the code.

  • Router
Routers simulate page changes and are responsible for the page redirections across the application. They support for the browser history and keep track of visited pages. They provide the routing mechanism required in the client side web application.

How Backbone works?

Inter-relationships of Backbone key components
Dependencies of Backbone components
The above diagram explains the different dependencies between the components in a Backbone application.
View is the most important component in a backbone application. View is dependent upon Model, Collection and DOM. Collections are dependent upon Models and Routers depend upon Views.
The different components of a Backbone application are connected via events. Events flow in opposite direction to the dependencies.
View can handle events raised by Model, Collection and DOM. Collections can handle events raised by Model and only Router can handle events raise by View. All the DOM events can be easily listened by View.

Dependencies

In order to use Backbone.js library in your application, you need to also add following dependent libraries:


  1. Underscore.js
  2. jQuery / Zepto.js

  • Underscore.js provides functional programming support to the Backbone. Backbone extensively uses several functions provided by underscore.js.
  • jQuery is required by Backbone for performing DOM manipulations as well as for making Ajax calls.
  • Zepto.js is an alternative to the jQuery with large set of compatible API’s, which are supported by modern browsers.

 Official documentation and downloads


I’ll definitely get deeper into Backbone in my forthcoming posts. 
Sit tight. Stay Tuned! 

Comments

Post a Comment

Popular Posts