Introduction to Backbone.js

Introduction

This article is an introduction to backbone.js. It is a JavaScript library. Backbone.js is another JavaScript framework for creating MVC applications. It provides the structure to the web application through the model with the key value and custom events.

Backbone.js is used for client-side web applications that manage web applications. It is a JavaScript framework. It is gaining attention in the web development community among other frameworks. It uses the structure that is given by the JavaScript application.

Benefits of backbone.js

The following are the main benefits of the Backbone.js JavaScript library:

• Organizes the structure of the web application.
• Simplifies server-side persistence.
• Decouples the DOM from the web page's data.
• There are Views, Routers and Model data, all concisely organized.
• It provies Model, DOM and collection synchronization.

The following are the various core concepts of backbone.js:

1. Models
2. Collections
3. Routers
4. Views
5. Namespaces

 

1. Model

Models in backbone contain the interactive data and logic of this data for the web application. We use the backbone model to represent the concept of the object by including its attributes. To create the model we extend the "Backbone.Model". There are two model methods:

• Model.get(): It is used for easily accessing the model attribute.
• Model.Set(): It is used for allowing the attribute to be passed in the instance of the Model, it can be passed during initialization or at any time afterward.

2. Collections

The sets of models are called the collections; it is created by extending the "Backbone.collection". When we create a collection then we can pass the property specification for the models that are used by the collection as well as an instance property.

• Collection.get():  There are some various ways for getting the model from the cpllection. The first is straightforward, by using the "Collction.get()" and the second is by getting the model by the id such as "collection.get(id)". The backbone collection doesn't have a set method, but is support for adding a new model using the add() method and removing the model using remove().

3. Routers

In the backbone, routers are used for connecting the URLs with the application event and managing the state of the application. For this we use the # (hash) tag with the URL fragment or we can use the browser push state and history API.

4. Views

In backbone the view is not for containing the the markup for the application but they are to support the models. These models provide the logic for how they are to be represented to the user. This is done using JavaScript. For creating the view we use the straightforward way, like other sections, such as "Backbone.Views" .

5. Namespaces

When we learn about the Backbone there is the common area of namespaces. The basic idea behind the namespaces is that it avoids name collision with other objects or variables, These are in the global namespaces. These are important because they work as safeguards for your code from breaking the event of another page using the same variable as you are.

There are some namespaces for your models, views, routers and other components specially. The patterns are:

• Single global variable
• Object literals
• Nesting namespaces