Découverte de Backbone.JS et Underscore.JS

2012-05-02

Parcequ'il est bon de se faire un peu la main sur toutes les différentes technologies web, j'ai décidé de m'entraîner un peu ce week-end à deux librairies : Backbone.JS et Underscore.JS.

J'ai ainsi développé une petite web-app (basée également sur jQuery Mobile pour l'interface mobile) du nom de Spoticheck (disponible sur mon compte Github) qui utilise ces deux librairies.

Backbone.JS se décrit ainsi :
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.

En bref, Backbone.JS vous apporte une réelle structure quasiment comparable à l'architecture MVC, le tout en JavaScript.

Nous pouvons ainsi créer des modèles de données, ici, un exemple avec une classe "app.models.song" et 2 méthodes custom qui me permettent d'obtenir la liste des artistes sous forme de chaîne de caractères ainsi qu'une méthode getPopularity() qui me retourne la largeur de la barre de progression qui est affichée sur l'interface :


app.models.song = Backbone.Model.extend({
    barWidth: 200,

    getArtists: function () {
        var artists = Array();

        _(this.get('artists')).each(function (artist) {
            artists.push(artist.name);
        });

        return artists.join(' & ');
    },

    getPopularity: function () {
        return (this.get('popularity') * this.barWidth);
    }
});
Ces données du modèle peuvent ensuite être appelées très simplement. Ici par exemple, on envoie des données du modèlee au template, par l'intermédiaire d'une classe de vue (équivaut à un controller dans l'architecture MVC) :

app.views.entry = Backbone.View.extend({
    render: function () {
        $(this.el).append(
            _.template($('#entry').html(), {
                cid: this.model.cid,
                artists: this.model.getArtists(),
                track: this.model.get('track'),
                link: this.model.get('link'),
                listen: this.model.get('listen'),
                popularity: this.model.getPopularity()
            })
        );
    }
});
On notera également ici l'utilisation du framework Underscore.JS (objet _) sur lequel nous appelons la méthode template(). En effet, Underscore.JS est une librairie qui nous fournit principalement des méthodes qui peuvent s'avérer très utiles. Je vous invite à aller faire un tour sur la documentation de la librairie qui vous permettra d'obtenir la liste complète des méthodes disponibles.

Enfin, j'aimerais apporter une petite précision, si comme moi vous souhaitez utiliser jQuery Mobile et Backbone.JS (qui utilise la navigation via le hash d'URL) dans un même projet, il vous faut désactiver le fait que jQuery Mobile change les hash en URL concrètes en initialisant avant l'appel à la librairie JS de jQuery Mobile :

$(document).bind('mobileinit', function () {
    $.extend($.mobile, {
        pushStateEnabled: false,
        hashListeningEnabled: false
    });
});

Comments