Introduction To Backbone.js

Introduction

A Single-Page Application (SPA), also known as Single-Page Interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience similar to a desktop application.

Definition

The following definition is from Wikipedia:

Providing a fluid user experience it is not a new idea. We all are creating such wonderful user interfaces using jQuery. It is an amazing library for document manipulation. Then the simple question is why we need something like the SPA library or framework? Why an entire new learning curve? Why a new technical stack in application architecture?

We will try to explain every possible point in this series of articles about backbone.js.

jQuery vs MV* framework or library

jQuery is a fantastic tool for document manipulation. Our web based applications are looking better and started performing better, more like a desktop application. I think the only problem was code structure. I mean when we are working on large projects with multiple teams, It is very difficult to manage and maintain the code.

MV* framework or library

The idea of MVC and MV* patterns is to separate the Model, View and Logic that hooks the two; behind that is the controller. The separation of concerns gives you more structure and reusable code. This idea is not new to developers, but a JavaScript based MV* framework and library gives additional functionalities like SPA support. Let us understand the major difference between a framework and a library. Frameworks are generally prescriptive and sometime restrictive, I mean sometimes you will need to follow certain directory structures and some rules to implement the framework.

There is nothing wrong in that, but sometimes it would be a bit painful. Libraries are generally focused and specific.

Introduction of Backbone.js

Backbone.js provides MV* library support for Single-Page Applications. Backbone.js has a very small footprint. Backbone.js provides structure as well as testable code. Underscore.js is the only hardcore dependency for Backbone.js. Underscore.js is not just a dependency but also provides many functionalities like a micro templating engine. We will need to use jQuery or zepto for document manipulation.

Let us start some coding.

Get ready for Backbone.js

Create an empty web application as in the following:



Add a HTML page to the project as in the following:





Create a new folder in the project for JavaScript(s) as in the following:





Add JavaScript file(s) to the project as in the following:



Add a Reference file into the project. Kindly note the sequence of the file. The very first we added was the jQuery library for document manipulation. We have added underscrore.js as the only hardcore dependency of Backbone.js. Finally we added Backbone.js.



We will check our Backbone platform using a browser developer tool. I am using the Chrome browser.

To access the developer tool in Chrome we have multiple options as below.

By clicking the "F12" function key we can view the developer tool.

Right-click on the page and we choose "Inspect element".

We can also use the "Ctrl + Shift + I" keys combination for the developer tool.



Welcome to Backbone. In the next article we will explain the Backbone Model.