Demonstrating Backbone.js: An Introduction

Introduction

This is the first article of the ”Demonstrate Backbone.js” article series. In this article we will see various concepts of Backbone.js from the beginning. This article requires a basic understanding of JavaScript and of course an advanced understnding of JavaScript, including classes, function, callback functions and so on. 

According to Backbonejs.org, Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a Restful JSON interface.

What Backbone.js is

Backbone.js provides us an extremely simple way to create models and views that organize our code into a logical separation of the code that creates the interface that the user sees and interacts with (the view) from the data and the processing of that data (the model). This separation allows us to switch models and/or views without requiring changes to the other. So we can use the same model with any other view or we can modify the way the model stores data without requiring any modifications in the view.

You might have noticed that I haven’t mentioned anything about controllers. This is because Backbone.js isn’t a true MVC framework and lacks controllers, but has routers instead of controllers. A controller tends to be most useful for client-server relationships because the controllers on the server intercept the requests from the view on the client machine and dictate the actions that should be done, but when everything is run in the client, the view can communicate directly with the model.

Features of Backbone.js

Backbone.js automatically makes use of the observer pattern on its models, so the views can listen directly to any modifications that happen to a model (such as a value changing) and immediately update the view to reflect those changes. Backbone.js also comes with built-in support for jQuery and Zepto for DOM manipulation. Another bit of the library that can be handy is their collections, “with a rich API of enumerable functions“ that contain multiple models for simpler maintenance, rather than the necessity of your view being concerned with multiple models itself. Finally, Backbone connects everything to your existing back-end API through a Restful JSON interface, and can even synchronize with back ends that don’t support REST and JSON.

Why do we need Backbone.js?

Building single-page web apps or complicated user interfaces can become extremely difficult when simply using jQuery. The drawback is standard JavaScript libraries are great at what they do and without realizing it we can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements.

How does Backbone.js help?

Backbone is an incredibly small library for the amount of functionality and structure it gives us. It is essentially MVC for the client and allows us to make our code modular.

Backbone.js creates a Backbone. The Model for each TODO object holds the authoritative version of the data. Whenever we change an attribute on the model, no matter where you change it from, it notifies all the Views of that object to re-render. And you can sync an entire collection of models to a Restful server with a single function call. Your app will be much more maintainable, and you'll be able to add arbitrary features much more easily.

Components of Backbone.js

Here we will explain various sections of Backbone.js. Basically to get an idea of the components of Backbone.js and we will get an understanding of the topics we need to get started with Backbone.js.

Model

In MVC “Model” is a business entity, or we can say it’s a class in C#. In Backbone.js we can implement a class in JavaScript.

Here is a small snippet of a class in Backbone.js:

<script>
var Product = Backbone.Model.extend({
});
</script>

The class in Backbone.js inherits from the base class “Model”. In this snippet we have created a Product class that extends from the Model class in the Backbone.js library. In the future articles of this series we will learn more about it.

View

Backbone views are used to reflect what your application's data models look like. They are also used to listen to events and react accordingly.

<script>
var View = Backbone.View.extend({
});
</script>

In the preceding snippet we have created one empty view that is very similar to mode creation. The view extends from “View” from Backbone’s class library.

Routers:

Backbone routers are used for routing your applications URLs when using hash tags (#).

<script>
var Router = Backbone.Router.extend({
}
</script>

Collections

Backbone collections are simply an ordered set of models such that it can be used in situations such as:

Model: Student, Collection: ClassStudents
Model: Todo Item, Collection: Todo List
Model: Persons, Collection: Meeting

<script>
var People = Backbone.Collection.extend({
model: person
});
</script>

In the above snippet we have created a “peopleCollection” that will contain a set of “person” class objects.

Conclusion

In this article we have learned the basic concepts of Backbone.js..In future articles we will see more on this series.