backbone.js 2018

Backbone.js is a framework or JavaScript library for creating single page web application in a structured manner. Backbone.js is mainly used for creating single page applications using a RESTful service for persisting data. 

Backbone.js is basically an uber-light framework that allows you to structure your Javascript code in an MV (Model, View, Presenter) fashion.

When to use Backbone.js

• Backbone.js is used to reduce complications. For example: Suppose, you are creating an application having lots of line of codes using jQuery or JavaScript. The application generally becomes complicated when you add or replace DOM elements to the application or make some requests or show animation in the application or add extra lines to your code, the application may become complicated. So, Backbone.js provides an easy way to overcome with these complications.
• If your application is having lots of codes and you want a better design then Backbone.js library can be used for good functionality. It provides a well organized and structured way to develop your application.
• Backbone communicates via events, so you will get a fast application and your code will be cleaner, nicer and more maintainable.

Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only hard dependency is on one JavaScript library,^[2] Underscore.js, plus jQuery for use of the full library.^[3] It is designed for developing single-page web applications,^[4] and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized.^[5] Backbone was created by Jeremy Ashkenas,^[6] who is also known for CoffeeScript and Underscore.js.^[7]

When handling the DOM Backbone.js adopts an imperative programming style, in contrast with a declarative programming style (common in AngularJS using data-attributes).^[8]

Trying to provide "the minimal set of data-structuring (models and collections) and user interface (views and URLs)",^[9] leaves to the developer the choice of extensions for enhanced functionality. For example, one can use nested views with Backbone Layout Manager or model-view binding with ReSTbasis.

Backbone.js Features

Following is a list of the most prominent features of Backbone.js:

• Backbone.js allows developers to develop one page applications and front-end much easier and better using JavaScript functions.
• Backbone provides different types of building blocks like models, views, events, routers and collections for assembling client side web applications.
• In Backbone.js when model changes, it automatically updates the HTML of your application.
• Backbone.js is a simple library used to separate business and user interface logic.
• Backbone.js is a free and open source library and contains over 100 available extensions.
• Backbone.js makes your code simple, systematic and organized. It acts like a backbone for your project.
• Backbone.js manages the data model which includes the user data and display that data at the server side with the same format written at client side.
• Backbone.js has soft dependency with jQuery and hard dependency with Underscore.js.
• Backbone.js allows developers to create client side web applications or mobile applications in well structured and organized format.

The single most important thing that Backbone can help you with is keeping your business logic separate from your user interface. When the two are entangled, change is hard; when logic doesn't depend on UI, your interface becomes easier to work with.

Model

• Orchestrates data and business logic.
• Loads and saves from the server.
• Emits events when data changes.

View

• Listens for changes and renders UI.
• Handles user input and interactivity.
• Sends captured input to the model.

A Model manages an internal table of data attributes, and triggers "change" events when any of its data is modified. Models handle syncing data with a persistence layer — usually a REST API with a backing database. Design your models as the atomic reusable objects containing all of the helpful functions for manipulating their particular bit of data. Models should be able to be passed around throughout your app, and used anywhere that bit of data is needed.

A View is an atomic chunk of user interface. It often renders the data from a specific model, or number of models — but views can also be data-less chunks of UI that stand alone. Models should be generally unaware of views. Instead, views listen to the model "change" events, and react or re-render themselves appropriately.

A Collection helps you deal with a group of related models, handling the loading and saving of new models to the server and providing helper functions for performing aggregations or computations against a list of models. Aside from their own events, collections also proxy through all of the events that occur to models within them, allowing you to listen in one place for any change that might happen to any model in the collection.

When do you require Backbone.js?

Backbone.js is required in following conditions:

• When you are developing a web application that requires a lot of JavaScript.
• It is required when you want to give structure to your code, if your application needs to be scalable.
• Backbone is useful when a web application has to work with jQuery to traverse the DOM or give animations.

Backbone.js First Example

The Backbone.js application is the mix of HTML and JavaScript. The first thing you need is an HTML page.

1. <!DOCTYPE html>    
2. <html>    
3. <head>    
4. .    
5. .    
6. </head>    
7. <body>    
8. .    
9. .    
10. </body>    
11. </html>    

Second, you need to add Backbone.js library:

1. <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>  
2. <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>  
3. <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>   

Add the JavaScript file:

1. <script type="text/javascript">  
2. var  Person = Backbone.Model.extend();  
3. var person = new Person();  
4. person.set({ fname: "Sheela", lname:"Sharma"});  
5. document.write("What's my name: ", person.get('fname'));  
6. </script>  

First Backbone.js Example

1. <!DOCTYPE html>  
2.    <head>  
3.       <title>Model Example</title>  
4.          <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>  
5.          <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>  
6.          <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>  
7.          <script type="text/javascript">  
8.             var  Person = Backbone.Model.extend();  
9.             var person = new Person();  
10.             person.set({ fname: "Mahesh", lname:"Sharma"});  
11.             document.write("What's my name: ", person.get('fname'));  
12.          </script>  
13.    </head>  
14. </html>