Backbone.js for Your Application: Weighing Up The Pros And Cons

Today is Backbone.js on the agenda. This is a controversial JavaScript library, as it can be praised by some developers and recommended not to be used by others.

Let’s clear out the reason for such a spread, see what backbone.js does and determine the cases, where the library will provide benefits being used for web app development, and where some other library (or framework) is better to be chosen.

We will not once again go into details of the popularity of JavaScript programming language and its related frameworks and libraries. See our previous articles for more information on details and tricks of the programming world.

Just to remind you, JavaScript at the moment keeps the position of one of the most popular programming languages. And in many cases, this is JavaScript that is recommended as the best language for learning.

ADVANTAGES OFFERED BY JAVASCRIPT LIBRARIES AND FRAMEWORKS

• frameworks and libraries are designed to accelerate the development process through ready-made templates and solutions and elaborated structure;
• the developed community of developers has been formed around JavaScript, whose members share the experience with each other and at the same time act as the testers;
• mostly, frameworks and libraries have the open source code, so that they can be used for free. Accordingly, the total cost of developing applications will decrease as well.

As you see, the positive aspects are obvious.

BACKBONE.JS: WHAT’S WHAT AND A BIT MORE

Now, let’s take a closer look at Backbone.

The first thing to fix is that Backbone.js is a JavaScript library.

A library in programming is a set of subprograms or objects used in software development.

Backbone, as JavaScript library, includes classes (descriptions of data types and their implementation) and functions (code fragments that can be addressed to from any place in the program).

Example of Backbone.js Usage: Groupon.com

Backbone belongs to libraries of MVC type. Therefore we suggest clearing out, what MVC is: the pattern applied to create applications (Model + View + Controller).

In what way does MVC work?

• The user interacts with the application system through the controller. The controller perceives user actions, interprets them and informs the model of changes required in accordance with the actions.
• The model is in charge of providing access to the data available in the system, receives a change request from the controller, and executes it.
• All these processes are invisible to the user: his/her task is to press a button (or perform some other action with the interface) and get the result. And as for the presentation of the result, this is the task of the view.

Upon receiving the data from the model, the view displays them for the user.

The pattern sets no fixed relationship between the data and their presentation. That is, the same data can be displayed, for example, in the form of text, a table, a diagram – depending on the user’s action and the way controller interprets them.

This is a brief description, in fact, the process can be implemented in many ways, but we will not go further into details. Instead, we turn back to Backbone.js.

Example of Backbone.js Usage: WordPress.org

Backbone.js uses:

• Models;
• Collections (sets of models);
• Views;
• Routers.

All the data are presented on the client side in the form of models. They can be created, deleted, validated, and stored on the server. Such data operations are triggered through changing the model attribute in the interface.

The view receives information about the model (data) change and changes, accordingly. Thereby the presentation is modified in every place, where the model appears in the app.

Every view can be updated independently of the others since it is based on a specific model. And such views collectively form the interface of your application.

The router in Backbone.js provides for routing methods on the client side. In simple words, the router is in charge of the way the app will change with altering URL in the browser.

For more detailed information on the library, its classes and functions and tutorial visit its official site Backbone.js.

The main task of this library is to organize the client part of your application in a logical way and to synchronize the changes with the server part.

Example of Backbone.js Usage: USAtoday.com

BACKBONE.JS CHARACTERISTICS

Backbone.js offers certain advantages:

• the library has annotated open source code.  This means any developer can study it and use for development.
• Backbone.js weighs 7.6 КВ gzipped (Backbone + Jquery + Underscore = 41.6 KB). That is, it can be referred to the lightweight sets of tools.

Some data for other frameworks and libraries to compare:

Source

• a very compact library: the simplest minimalist set of classes and functions that covers all the most significant components for building a web application.
• aimed to serve as the foundation for the application, and provides options for subsequent extending through the usage of other libraries and tools (implied with the name of the library itself: the backbone).
• very flexible and well combined with other tools. The choice of the tools and plug-ins to be used remains for the developer (the only fixed dependency is Underscore.js library. Backbone.js does not work without it).

“Hidden pitfalls” for those, who use Backbone.js:

• free choice of tools for extending the app built on the basis of Backbone.js may present a serious challenge for beginners. Therefore prior to commencing the work, it is recommended to think over the libraries to be used and to study their possibilities.
• As the application extends, views can become heavy in terms of code. In some cases, this problem can be eliminated by dividing one view into several ones in accordance with the logic.

Conclusion:

Whether the library will be effective for developing your app, depends on the app specific features, and developers’ experience and qualification.

BACKBONE.JS IN PRACTICE

Based on the above description, the takeaway offers itself.

The library can be used in the following cases:

• a single-page web application is required to be developed, and you are looking for the simple set of tools;

You shall admit that it will never come into your mind to use a complex automatic device to hammer a nail if you have a hammer at hand.

• web application with a complex (interactive and multifunctional) interface needs to be developed;
• developers have sufficient experience in using various libraries and combining them. In this case, using Backbone.js as the foundation allows extending it and creating any application you need;

In this context, the larger frameworks (Angular, React, etc.) give less freedom of action, and the main point here is to be able to use this freedom in a right way.

• required is a clear structure of the web application to be formed, in order to get rid of spaghetti code (complex, confusing code) and facilitate application support and scaling.

Example of Backbone.js Usage: Airbnb.com

Backbone.js has been applied for several years already (since 2010) and has quite successfully proved its benefits. On the other hand, technologies do not stand still; new libraries and frameworks appear. This variety of choice has both its pros (you can always search for the best variant) and cons (you risk to get stuck in endless comparisons of various toolsets).

The key takeaway:

Any library and framework shall be used for the purposes it is intended for.

For example,

Knockout.js – used to create complex user interfaces, where various browsers support is significant.

View.js – used to automatically create interactive interfaces.

Angular.js – specializes in single-page applications (provides easier navigation and optimizes user experience).

This is for the developers to decide, what to choose. And subject to proper use, any JavaScript framework and library will be the best assistant in the development.

Any questions left? Need more detailed information on other frameworks or libraries? Have already made up your mind and are looking for developers now?

In any case – contact Umbrella right now, we are ready to answer any questions, to discuss prospects and to start collaboration.

Photo: Shutterstock.com