What is Backbone.js?
It is a lightweight library for structuring JavaScript code. It is also regarded as the MVC/MV* kind of framework. If you are not familiar with MVC, it is basically an architecture pattern for implementing user interfaces. It separates the application into three kinds of components:
- Model
- View
- Controller
The intention is to promote separation of concerns which results in better structured and more maintainable application. Backbone.js does provide the concept of model and views but Backbone.js views are like controllers in MVC. So it’s more way of the MV* kind of framework. And to be more accurate it is not even a framework it is just a library that you can use anywhere you want.
Backbone.js also provides the concept called a router. It is used for developing single-page applications. A single-page application is a kind of web application that fits on a single web page. Aiming to provide a rich user experience similar to desktop applications.
In a single-page application, all the necessary code such as HTML, CSS, and JavaScript is retrieved with a single page load. It provides the following features:
- Rich and smooth UX
- All the necessary code is retrieved initially
- Other resources loaded on the same page on demand
- An example of a single-page application is Gmail
With Backbone.js we can create a single-page application. Backbone works perfectly in building a rich-client application over a set of REST APIs.
Features of Backbone.js: There are the following advantages of Backbone.js:
- Allow building applications and their frontend easily through JavaScript functions
- Provides different building blocks for example model, view, and controller
- Update the HTML code of your application automatically
- Provides free and open-source library
- Allow developing the client-side web or mobile applications in a structured and well-organized format
- Its library provides good organization and structure for designing the application
- It’s clear, readable, and well commented
- The Backbone.js models could be tied easily to a backend
- Allows to develop small web applications using the jQuery framework
- It’s simple and more powerful.
- Community and ecosystem is huge
- It separates the business and user interface logic
- Code is simple, systematic, and organized
Installation process: You can use Backbone.js with the following methods:
- Download from the official website
- using the CDNs.
Downloading from the official website: Open the http://backbonejs.org/ and there you will find three options as shown below:
- Development version: You can right-click on it and saved the link, you will get the JavaScript library.
- Production version: Right-click on it and saved the link. Once saved you will get the Backbone-min.js library file
- Edge version: It is an unreleased version means development for it is still going on. It is packed and gzipped
Using the CDN Link: A content delivery network is a network that serves files to users. Here are the CDNs for Backbone.js
<script src=”https://code.jquery.com/jquery-2.1.3.min.js” type=”text/javascript”></script>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js” type=”text/javascript”></script>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js” type=”text/javascript”></script>
Example:
HTML
<!DOCTYPE html><html><head> <title>Example of Backbone.js</title> type="text/javascript"></script> <script src= type="text/javascript"></script> <script src= type="text/javascript"></script> <script type="text/javascript"> var Company = Backbone.Model.extend(); var company = new Company(); company.set ({ name: "GFG", category: "Education" }); document.write("Company name is: ", company.get('name')); document.write(" and category is: ", company.get('category')); </script></head><body></body></html> |
Output:
Backbone.js example
In this case, we are using Backbone.js and we have used CDNs for this. Here we are creating a model named Company. And we have created an instance of a model Company which is a company. We have set two attributes to it:
- name and
- category
We can set attributes using a set keyword with an instance of the model created. And printing it on the document using a model.get( ) method. So we will get output as:
Company name is: GFG and category is: Education
Major components of Backbone.js: The major components of Backbone.js are:
- Views
- Events
- Models
- Collections
- Routers
Application of Backbone.js: There are the following application of Backbone.js
- It is mainly used to develop single-page web applications.
- It is also used to synchronize various parts of web applications.
- It gives structure to our web page.
Advantages of Backbone.js: There are the following advantages of Backbone.js:
- Allow building applications and their frontend easily through JavaScript functions
- Provides different building blocks for example model, view, and controller
- Update the HTML code of your application automatically
- Provides free and open-source library
- Allow developing the client-side web or mobile applications in a structured and well-organized format
- Its library provides good organization and structure for designing the application
- It’s clear, readable, and well commented
- The Backbone.js models could be tied easily to a backend
- Allows more to develop small web applications using the jQuery framework
- It’s simple and more powerful.
- Community and ecosystem is huge
- It separates the business and user interface logic
- Code is simple, systematic, and organized
Disadvantages of Backbone.js: It requires a longer development time
- Need to have a greater understanding of the inner workings
- Debugging may be painful
- It could be slow
