Have you heard about Backbone.js? Many web applications are being developed using this JavaScript framework. This article may help if you want to know more about what Backbone.js can do for you and where you can use it.
We are going to explore various aspects of Backbone.js framework, including feature, popularity and learning resources.
What is Backbone.js
Backbone – it’s a Javascript library for heavy frontent javascripts applications. The perfect examples of using Backbone are Gmail and Twitter. Such applications are using browser for logical interface, which gives a significant advantage in users interface, though. But how to organize code for such large projects? Because such code is not a set of global variable and jquery – DOM connections. As for me, backend transfer was always unusual.
Backbone is very similar to one of the library called «knockout», but as you can see the title and overall conception are different.
Why Learn Backbone.js
Below are some reasons why you may want to learn Backbone.js
- Backbone.js is being used by many fortune 500 listed companies. This exposes career opportunity for Backbone.js developers.
- There are many jobs available for backbone.js developers. More and more JavaScript experts are learning Backbone.js and using it in their applications.
- Many Java and PHP based applications can be easily converted to Backbone.js based UI. This is an ongoing trend and all companies are trying to constantly get the modern look and feel.
- Many companies are looking for Backbone.js developers. Mainly to stay up to date with current UI trends.
How To Learn Backbone.js
You can find some useful Backbone.js tutorials and resources on web absolutely free. There are many discussion forums and message boards that will make it easy to find help on Backbone.js.
However, online tutorials and documentation may not be sufficient for everyone therefore you can use Backbone.js Books to learn it from scratch. We recommend Backbone.js Essentials by Jeremy Walker.
Backbone.js Essentials
(By: Jeremy Walker )
This is the latest published book on Backbone.js it covers all aspects of Backbone.js library. This is a good book for developers who already know JavaScript.
Main Classes
Classes we are using for kernel:
- Router and History – accept URL and tells what “view” you need to execute;
- View – attached to dom elements and regarding to nesting is charged with data. View is executed from Route in order to open last status. View reacts on user through events subscription.
- Collection – model array (not mandatory identical), can be attached to View and alert about any changes.
- Model – main classes entity, have URL to receive and change data using RESTful http from backend.
As the end result and the most loaded class depends on JS template from underscore library. The template has almost got no difference – the only difference is that all templates are loaded directly into the script-tags and variables are highlighted using <% = foobar%> tags with a mini logic. The beginning looks smth like this:
MyApp.EditableSpanView = Backbone.View.extend({
template: _.template($('#span_wrapper').html()),
initialize: function(){
this.render();
},
render:function(){
$(this.el).html(this.template(this.model.toJSON()));
}
});
It’s a view declaration with 1-1 DOM element relation #span_wrapper where we take html construction and model «this.model» with data, which is not specified. Backbone documentation is not really sparkled with details about «model» or «collection» if it’s not common:
realSpanView = new MyApp.EditableSpanView({model: ItemModel, id:’output’ });
It’s a «View» embedding. It’s a construction inherit of «Initialize» and drawing in render. The result will be included in the element with «id output». If it’s located on page then it will be included there, if it’s not – then it will appear.
Events
Backbone has its own representation method how events should be extended. So, generally «Events» extended using 2 ways:
- From DOM-element through View.events to the relevant written View-method
- From model and collection through added objects (see the chart above)
What concerns the first point, I can add that it is makes sense to make embedded View-objects (DOM-like trees groups). For example, MyBodyView for globally positioned layers, MyListView with collection and MyItemView for a particular element.
What concerns the second point – there is magic method «this.bind», which connects two types of objects, usually in «Initialize». For example MyListView.initialize it makes sense to associate «View» with a collection. So any collection changes cause changes in “View”.
this.collection.bind (‘add’, this.add, this);
this.collection.bind (‘remove’, this.remove, this);
It seems so obvious and simple, but it does not setup anywhere by default, you have to determine for yourself what should notify someone. And the worst part is that sometimes do not understand the platform mechanism. Models don’t need to know anything about imaging, control goes from the above – «View» should bind itself to the destruction and every model changes.
Problems
Getting data on the backend from models doesn’t come in POST, but exotically:
$ Params = (array) json_decode (file_get_contents ('php: // input'));
For example, you need to constantly maintain the freshness of collection. The collection is loaded on the URL parameter from «Fetch» and then call «Reset» where collection is filled with models again.
So to make data processing without overwriting the actual «Reset» method, I hanging «Bind» to «Reset», but the results of the argument are not json-list and not a list of converted models where properties can be only printed through the .get (). It’s an obscure format, but there is a «models» parameter which can be used for understanding.
And this unusual behavior is enough to unsettle. The same keyword «this» – when «bind» is lost and actually used the associated object (collection), there is a third parameter or «bindAll» from underscore.
Why Backbone.js Is So Popular?
Backbone is very light MVC library, which gives an opportunity to create interfaces, single-page and multi-page applications for your website.
There several reasons why Backbone.js is so popular and here are some advantages:
- Powerful API – easy to understand and quality-written documentation to use library functions.
- RESTful JSON interface – advanced capabilities for server requests.
- Structured and readable source code, which is understandable to any experienced front-end developer. It gives a big advantage to connect team easily and start your work on single project.
Popularity of Backbone.js on Google
Google search trends show that Backbone.js is one of the popular libraries in recent years. The below graph shows a simple comparison of search volume for backbone.js with other popular frameworks like angular and meteor.
Sites Using Backbone.js
These any many other Backbone.js advantages makes this library one of the most popular among front-end developers in the whole world. Here are some websites which were developed using Backbone:
- USAToday – first nation-wide daily newspaper in the US
- BitBucket – source code hosting for Git and Mercurial (github.com alternative)
- Document Cloud – platform, created for journalists, which allows to search, analyze and publish documents, used in journalism.
That’s just a few examples but it gives a notion about why backbone is so desirable and popular.
Conclusion
Backbone Library it’s an interesting, but limiting programmers accustomed to lax jQuery approach. You are forced to write frontend almost the same quality as the backend. Therefore, it should be used in limited circumstances, when you have to write more JS code than usual. Alternatives to Backbone.js are Spine.js, Sproutcore, Cappuccino, EJS.