BackboneJS Environment Setup - Backbone.js

What is BackboneJS Environment Setup?

BackboneJS is precisely cool to setup and work. This section will debate the download and setup of the BackboneJS Library.

BackboneJS can be used in the resulting two ways −

  • Downloading UI library from its official website.
  • Downloading UI library from CDNs.

Downloading the UI library from its official website

Once you open the link, you will get to see a screenshot as exposed below –


For example you can see, there are three options for download of this library −

  • Development Version − Right click on this button and save as and you get the full source JavaScript library.
  • Production Version − Right click on this button and save as and you get the Backbone-min.js library file which is packed and gzipped.
  • Edge Version − Right click on this button and save as and you get an unreleased version, i.e., development is going on; hence you need to use it at your own risk.


BackboneJS depends on the resulting JavaScript files −

  • Underscore.js − this is the merely hard reliance which wants to be included. jQuery.js − Include this file for RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View.
  • json2.js − Include this file for older Internet Explorer support.

Download UI Library from CDNs

A CDN or Content Delivery Network is a network of servers intended to serve files to users. If you use a CDN link in your web page, it changes the accountability of holding files from your own servers to a sequence of external ones. This also deals an advantage that if the visitor to your webpage has previously downloaded a copy of BackboneJS from the same CDN, it won't have to be re-downloaded.

As said above, BackboneJS has a dependency of the resulting JavaScript −

  • jQuery
  • Underscore

Therefore CDN for all the above is as follows –

Note − We are using the CDN versions of the library through this lesson.


Let's make a simple instance using BackboneJS.

The code comments are self-explanatory. A few more particulars are given below −

There's a html code at the start of body tag

This prints Loading...

Following, we have added the resulting CDNs

Next, we have the resulting script –

The comments are self-explanatory. In the last line, we are initializing new AppView(). This will print the "Hello Wisdomjobs" in the div with id = "container"

Save this page as myFirstExample.html. Open this in your browser and the screen will show the resulting text.

Hello Wisdomjobs!!!

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Backbone.js Topics