In this blog we will be discussing about Backbone.js which is a JavaScript library. This blog will cover the topics required for basic understanding of Backbone.js as well as Hello world example using Backbone.
Before going ahead with this blog let us know the prerequisites of Backbone.JS. To understand Backbone, you are required to have a prior knowledge of HTML, CSS, JavaScript, Document Object Model (DOM) and any text editor of your choice.
Overview of Backbone.js
Backbone.js was created by Jeremy Ashkenas initially released on October 13, 2010, the JS ninja who built CoffeeScript. BackboneJS is a light weight JavaScript library through which you can create easy to maintain frontends.
What is Backbone.js?
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 it is dependent on only one JavaScript library, Underscore.js, plus jQuery for use of the full library. It is designed for developing single-page web applications. (src: Wikipedia)
Backbone.js can be used for creating an application when your app involves many lines of code using JavaScript or jQuery. Backbone.js can be used when you want a better design and tons of code as it helps you provide good, well organized and structured manner for making your application.
Let us now look into some of the advantages of Backbone.js.
Advantages of using Backbone.js are:
- It will help you to develop application in much easier and better way using JavaScript functions.
- BackboneJS has many building blocks which help to develop application such as models, events, views, routers and collections.
- The main purpose of using model in Backbone is that when model changes, the HTML of the application also gets updated automatically.
- It is open source and available for every one and contains over 100 available extensions.
- When a project grows, the jQuery declarations and callbacks gets more complex. The code becomes more cluttered. Backbone.js overcomes this problem by providing an event-driven communication between views and models.
- In the MVC platform, web application depends upon server for getting json data for the logic on how to display it. Here load on server is reduced and it helps in increasing the speed of the website.
How to get Stared with Backbone.JS?
To start working with Backbone you need to download the UI library from http://backbonejs.org/ (official website)
Dependencies
Backbone.js depends on the following JavaScript files:
- Underscore.js
- jQuery.js
- json2.js
The following are the CDN required for Backbone.js as it depends on jQuery & underscore.js
|
1 2 3 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> |
Let us look into a simple example using Backbone.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <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> </head> <body> <div id="container">Loading...</div> </body> <script type="text/javascript"> var FirstApp = Backbone.View.extend({ el: '#container', initialize: function(){ this.render(); }, render: function(){ this.$el.html("Hello World using Backbone.JS!!!"); } }); var firstApp = new FirstApp(); </script> </html> |
Using the above script, we have created a FirstApp which extends a view which later renders a html element that prints “Hello World using Backbone.JS!!”
Conclusion:
Thus we saw that Backbone.JS acts like a backbone for your project and helps you to organize the code. It manages the data model which includes the user data. It allows to create client side web applications in well-structured and organized format.
I hope this short introduction was enough to understand the basics of Backbone.js. If you have any other query do write us at support@acadgild.com
Leave a Reply