On our project, we use Backbone.js as our main JavaScript framework.

We have just released an open source plugin for Backbone which we would like to share with you: Backbone.Component.

Backbone.Component plugin adds component concept to Backbone. If you are familiar with web components draft or components in Ember, the idea of Backbone.Component is very similar.

You can think of component as of isolated view-like object controlling some typical UI elements.

The problem

Say you have a date picker element controlled by some jQuery plugin. It is used in some of your views, so every time you render a view you need to initialize your date pickers, and probably also deinitialize on exit. Thus you need to write a lot of duplicate code.

In the general case you can’t solve this issue with inheritance, since you may need to use the same plugin in the views having different parents, while you don’t want to execute that code in every single view. Creating a subview for that element is a bit better, but you still have to manually handle all these subviews.

That’s the problem Backbone.Component solves.

Source code, documentation, installation

You can find the source code in Bakcbone.Component repository on GitHub:

https://github.com/malroc/backbone-component

The complete documentation is located there as well.

Backbone.Component is also available in Bower as backbone_component, so if you use Bower you can install it with the following command in your bash terminal:

bower install backbone_component

Or you can set an appropriate dependency in your bower.json (if your project has one).

Hope this plugin will help you developing rich web applications!

SourceTalk team