Présentation de Backbone.js

Backbone.js est un framework JavaScript basé sur la librairie Underscore.js. Il permet de structurer une application Web, non plus comme une suite d'instructions jQuery, mais comme un assemblage de vues autonomes les unes des autres.
Son but est de poser des bases fortes pour développer des applications riches, sans pour autant imposer une structure applicative.

Il se veut non-contraignant par rapport à ses rivaux, ce qui lui coûte d'être présenté souvent comme moins complet. Son point fort est d'être facilement utilisable avec d'autres bibliothèques ou frameworks.

Backbone.js est basé sur la librairie Underscore.js. Cette dernière propose des fonctionnalités de manipulation d'objets, de collections et de tableaux assez poussées. Comme toute bibliothèque populaire, elle se veut cross-browser et par héritage, Backbone.js l'est aussi.

Pour tout ce qui est manipulation DOMDocument Object Model, plutôt que réinventer la roue, l'équipe en charge de Backbone.js a décidé de sous-traiter cette tâche à jQuery. Il est possible de remplacer jQuery, par exemple avec Zepto, du moment qu'elle respecte l'APIApplication Programming Interface jQuery-compatible.

La classe Backbone.Model est utilisée pour gérer du contenu sous la forme d'un objet JavaScript en l'encapsulant et en proposant des méthodes de type accesseurs.

var Article = Backbone.Model.extend({});
var article = new Article({
  title: 'New Article'
});
 
article.get('title'); // New Article
article.set('title', 'New title');
article.get('title'); // New title

Testez ce code en ligne sur jsfiddle.

La classe Backbone.Collection permet de manipuler des collections de Model. On y retrouve les méthodes habituelles : push, pop, shift, unshift, add, remove, get, sort ou encore length. On retrouve également les fonctions provenant de Underscore.js.

var Article = Backbone.Model.extend({});
var Articles = Backbone.Collection.extend({
  model : Article
});
 
var articles = new Articles([{
  title: 'Article 1'
},{
  title: 'Article 2'
},{
  title: 'Article 3'
}]);
 
articles.push(articles.shift());
articles.models = articles.shuffle();

Testez ce code en ligne sur jsfiddle.

Concrètement, jusque-là, nous avons vu comment manipuler des données. Mais pourquoi s'embêter avec alors que nous pourrions le faire plus simplement ? C'est Sync qui va vous apporter la réponse.

Sync est le composant permettant de synchroniser les objets à travers une API du type « RESTful JSONJavaScript Object Notation ». Pour cela, il suffit de lier les objets Model et Collection à une ressource grâce à l'attribut url.

var urlModel = 'http://ippon.fr/articles/1';
var urlCollection = 'http://ippon.fr/articles';
var Article = Backbone.Model.extend({
  url: urlModel;
});
 
var Articles = Backbone.Collection.extend({
  model: Article,
  url: urlCollection
});

Testez ce code en ligne sur jsfiddle.

Chaque objet Backbone.View est lié à un nœud DOM (el) et pourra le générer à nouveau, à n'importe quel moment. Le but est alors de découper le document en une multitude de vues que l'on pourra régénérer à souhait et individuellement.

var View = Backbone.View.extend({
  render: function() {
    $(this.el).html(new Date().toLocaleTimeString());
    return $(this.el);
  }
});
 
var view = new View();

• Vue liée au DOM : testez en ligne sur jsfiddle.
• DOM lié à la vue : testez en ligne sur jsfiddle.

Ces deux techniques ont leurs avantages et leurs inconvénients. Pour ma part, je préconise la seconde solution.

Backbone.View permet de gérer les événements d'un nœud assez simplement. Munissez-vous de l'action souhaitée et du sélecteur et le tour est joué.

var View = Backbone.View.extend({
  render: function() {
    $(this.el).html(this.template);
    return $(this.el);
  },
  events: {
    'click #button1' : 'onClickButton1',
    'hover .button2' : 'onHoverButton2'
  },
  onClickButton1 : function() {
    alert('button1');
  },
  onHoverButton2: function() {
    alert('button2');
  }
});

Testez en ligne sur jsfiddle.

Maintenant que nous pouvons réaliser des pages Web composées de Backbone.View, peut-on aussi facilement gérer les différents états d'une page et y lier une URL ?

Si j'évoque le sujet, il est évident que la réponse est positive. Backbone.Router permet de mettre en place cette démarche. Une URI est composée d'un nom de domaine (tatami.ippon.fr) et d'une ressource (/tatami/). Il est possible de rajouter à la suite une ancre délimitée par un dièse (#/timeline). C'est cette ancre que Backbone.Router utilise pour déterminer quel est l'état de la page demandée.

Pour illustrer ces propos, une fois authentifié sur la page d'accueil de Tatami, chaque onglet représente un état de la page. Il en existe cinq actuellement :

• "#/timeline", la page avec l'onglet "Status" affiché ;
• "#/favoris", la page avec l'onglet "Favoris" affiché ;
• "#/tags", la page avec l'onglet "Tags" affiché ;
• "#/search", la page avec l'onglet "Recherche" affiché ;
• "#/daily", la page avec l'onglet "Status du jour" affiché.

Source du router home de Tatami.

Il est possible d'utiliser Backbone.js avec un AMD Loader comme RequireJS ou Curl. Ni Backbone.js, ni Underscore ne supportent officiellement AMD. Toutefois, il est possible d'utiliser un fork implémentant cette API.

On trouve sur GitHub des projets templates (boilerplate) qui facilitent la mise en place d'un environnement couplant RequireJS et Backbone. En voici deux parmi tant d'autres :

• BackboneJS-AMD-Boilerplate ;
• Backbone-boilerplate.

Backbone.js se veut léger : il ne fournit que des composants essentiels. Un des gros manquements de Backbone.js par rapport à ses concurrents est l'absence de la fonctionnalité de DataBinding. Mais qu'à cela ne tienne, de nombreux plugins sont présents en libre accès sur GitHub, pour implémenter des fonctionnalités. Voici, quelques plugins que je trouve intéressants :

• Backbone.ModelBinder : implémentation du DataBinding ;
• Backbone.Marionette : collection de composants additionnels ;
• Backbone.localStorage : adaptateur localStorage.