Embarquez pour un voyage Backbone.js

Contrairement à ses homologues du développement web, JavaScript n'a jamais vraiment fourni de structure sous la forme d'un framework. Heureusement, ces dernières années, cela a commencé à changer.

Aujourd'hui, j'aimerais vous présenter Backbone.JS, une jolie petite bibliothèque qui facilite grandement le processus de création d'applications complexes, interactives et basées sur les données. Il fournit un moyen propre de séparer les données de la présentation.

Présentation de Backbone.JS

Créée par Jeremy Ashkenas, le ninja JS qui a construit CoffeeScript, Backbone est une bibliothèque ultra-légère qui vous permet de créer des interfaces faciles à entretenir. Il est indépendant du backend et fonctionne bien avec n'importe quelle bibliothèque JavaScript moderne que vous utilisez déjà.

Backbone est une collection d'objets cohérents, pesant moins de4 Ko, qui structure votre code et vous aide essentiellement à créer des applications MVC appropriées dans le navigateur. Le site officiel décrit son objectif comme ceci :

Backbone fournit une structure pour les applications gourmandes en JavaScript en fournissant des modèles avec des liaisons clé-valeur et des événements personnalisés, une collection avec une riche API de fonctions énumérables, des vues avec gestion déclarative des événements et connecte le tout à votre application existante.

Soyons réalistes : ce qui précède est un peu difficile à analyser et à comprendre. Continuons donc à déconstruire le jargon avec l’aide de Jérémie.

Liaison de valeurs clés et événements personnalisés

Lorsque le contenu ou l'état d'un modèle change, les autres objets abonnés au modèle sont avertis afin qu'ils puissent le gérer en conséquence. Ici, la vue écoute les modifications apportées au modèle et se met à jour en conséquence, au lieu que le modèle doive gérer la vue manuellement.

API riche en fonctions énumérables

Backbone est livré avec de nombreuses fonctions très utiles pour traiter et travailler avec vos données. Contrairement à d’autres implémentations, les tableaux en JavaScript sont assez neutres, ce qui peut vraiment constituer un obstacle lorsque vous devez gérer des données.

Vues avec gestion déclarative des événements

L’époque où vous rédigiez des appels de liaison spaghetti est révolue. Vous pouvez déclarer par programme quel rappel doit être associé à un élément spécifique.

Interface JSON RESTful

Bien que la méthode par défaut consiste à utiliser des appels AJAX standard lorsque vous souhaitez communiquer avec le serveur, vous pouvez facilement basculer cela selon vos besoins. De nombreux adaptateurs ont vu le jour, couvrant la plupart des plus populaires, notamment les Websockets et le stockage local.

Décomposez-le en termes plus simples :

Backbone fournit un moyen propre de séparer les données de la présentation. Le modèle qui gère les données se préoccupe uniquement de la synchronisation avec le serveur, tandis que la principale responsabilité de la vue est d'écouter les modifications apportées au modèle abonné et de restituer le HTML.

FAQ rapide

Je suppose que vous êtes peut-être un peu confus en ce moment, alors clarifions quelques points :

Est-ce que cela remplacera jQuery ?

Non. Leurs domaines d'application sont très complémentaires, avec peu de chevauchement dans les fonctionnalités. Backbone gère toutes les abstractions de niveau supérieur, tandis que jQuery (ou une bibliothèque similaire) gère le DOM, les événements normalisés, etc.

Leur portée et leurs cas d'utilisation sont très différents, et ce n'est pas parce que vous connaissez l'un que vous ne devriez pas apprendre l'autre. En tant que développeur JavaScript, vous devez savoir comment utiliser les deux efficacement.

Pourquoi devrais-je l'utiliser ?

Parce que souvent, le code frontal devient un fouillis de rappels imbriqués, de manipulations DOM, de HTML pour les présentations et d'autres comportements indescriptibles.

Backbone offre une manière très propre et élégante de gérer ce chaos.

Où dois-je l'utiliser ?

Backbone est idéal pour créer des applications frontales lourdes et basées sur les données. Pensez à l'interface GMail, au nouveau Twitter ou à toute autre révélation de ces dernières années. Cela facilite la création d’applications complexes.

Bien que vous puissiez intégrer cela dans despagesWeb plus grand public, il s'agit en fait d'une bibliothèque conçue sur mesure pour les applications Web.

Est-ce similaire au cappuccino ou au sproutcore ?

Oui et non.

Oui, car comme les frameworks mentionnés ci-dessus, celui-ci est principalement utilisé pour créer des frontaux complexes pour les applications Web.

Ce qui le rend différent, c'est que Backbone est très simple et n'est pas livré avec des widgets supplémentaires.

Backbone est très léger, moins de 4 Ko.

Il y a aussi le fait que Cappuccino vous oblige à coder en Objective-J, alors que les vues de Sproutcore doivent être déclarées par programme en JS. Bien qu'il n'y ait rien de mal avec aucune de ces approches, avec Backbone, le JavaScript simple peut faire le travail avec le HTML et le CSS courants, permettant une courbe d'apprentissage plus douce.

Je peux toujours utiliser d'autres bibliothèques sur la page, n'est-ce pas ?

Absolument. Non seulement l'accès DOM typique, les types d'encapsulation AJAX, mais également le reste des types de chargement de modèles et de scripts. Il est très, très faiblement couplé, ce qui signifie que vous pouvez utiliser presque n'importe quel outil avec Backbone.

Est-ce que cela apportera la paix dans le monde ?

Non, désolé. Mais voici de quoi vous remonter le moral.

D’accord, laissons cette question de côté maintenant et commençons !

En savoir plus sur Backbone's Backbone

MVC dans Backbone signifiait à l'origine Modèles, Vues et Collections car il n'y avait aucun contrôleur dans le framework. Les choses ont changé depuis.

Le noyau de Backbone se compose de quatre classes principales :

• Modèle
• Collection
• Voir
• Contrôleur

Comme nous sommes un peu pressés par le temps, nous nous pencherons aujourd'hui uniquement sur les cours de base. Nous allons poursuivre avec une application très simple pour démontrer les concepts enseignés ici, car tout mettre dans un seul article et attendre des lecteurs qu'ils les analysent serait trop.

Veuillez rester vigilants dans les semaines à venir !

Modèle

Le modèle peut avoir des significations différentes dans différentes implémentations MVC. Dans Backbone, un modèle représente une entité unique – un enregistrement dans une base de données, si vous préférez. Mais il n’y a pas de règles strictes ici. Depuis le site Backbone :

Le modèle est au cœur de toute application JavaScript, contenant des données interactives et la plupart de la logique qui les entoure : transformations, validations, propriétés calculées et contrôle d'accès.

Le modèle vous donne simplement un moyen de lire et d'écrire des propriétés ou des propriétés arbitraires sur un ensemble de données. Dans cette optique, la seule ligne de code suivante est tout à fait utilisable :

var Game = Backbone.Model.extend({});

Construisons sur cela.

var Game = Backbone.Model.extend({ initialize: function(){ alert("Oh hey! "); }, defaults: { name: 'Default title', releaseDate: 2011, } });

initializesera déclenché lorsque l'objet est instancié. Ici, j'attire simplement l'attention sur un comportement stupide - vous devriez probablement amorcer les données ou effectuer d'autres tâches ménagères dans votre application. J'ai également défini un tas de valeurs par défaut au cas où aucune donnée ne serait transmise.

Voyons comment lire et écrire des propriétés. Mais d’abord, créons une nouvelle instance.

// Create a new game var portal = new Game({ name: "Portal 2", releaseDate: 2011}); // release will hold the releaseDate value -- 2011 here var release = portal.get('releaseDate'); // Changes the name attribute portal.set({ name: "Portal 2 by Valve"});

Si vous remarquez des mutateurs get/set, mangez un cookie ! Les attributs du modèle ne peuvent pas être lus via le format object.attribute typique. Vous devez implémenter des getters/setters car le risque de modifier les données par erreur est faible.

À ce stade, tous les changements restent uniquement en mémoire. Rendons ces modifications permanentes en discutant avec le serveur.

portal.save();

C'est tout. En attendez-vous plus ? La ligne de code ci-dessus enverra désormais une requête à votre serveur. Gardez à l’esprit que le type de demande change intelligemment. Puisqu'il s'agit d'un nouvel objet, POST sera utilisé. Sinon, utilisez PUT.

Le modèle Backbone est livré avec plus de fonctionnalités par défaut, mais cela devrait certainement vous aider à démarrer. Cliquez sur la documentation pour plus d'informations.

Collection

Les collections dans Backbone ne sont essentiellement que des collections de modèles. Comme dans l’analogie précédente avec la base de données, une collection est le résultat d’une requête, dont le résultat est constitué de nombreux enregistrements [modèles]. Vous pouvez définir une collection comme ceci :

var GamesCollection = Backbone.Collection.extend({ model : Game, } });

La première chose à noter est que nous définissons de quelle collection de modèles il s'agit. En développant notre exemple précédent, j'ai fait de cette collection une collection de jeux.

Vous pouvez désormais continuer à utiliser vos données comme vous le souhaitez. Par exemple, étendons cette collection pour ajouter une méthode qui renvoie uniquement un jeu spécifique.

var GamesCollection = Backbone.Collection.extend({ model : Game, old : function() { return this.filter(function(game) { return game.get('releaseDate') < 2009; }); } } });

C'est facile, n'est-ce pas ? Nous vérifions uniquement si le jeu est sorti avant 2009, et si c'est le cas, nous renvoyons le jeu.

Vous pouvez également manipuler directement le contenu de la collection, comme indiqué ci-dessous :

var games = new GamesCollection games.get(0);

L'extrait de code ci-dessus instancie une nouvelle collection, puis récupère le modèle avec l'ID 0. Vous pouvez trouver un élément à une position spécifique en référençant l'index de la méthodeatcomme ceci :game.at(0);Enfin, vous pouvez remplir dynamiquement votre collection comme ceci :

var GamesCollection = Backbone.Collection.extend({ model : Game, url: '/games' } }); var games = new GamesCollection games.fetch();

Nous laissons simplement Backbone obtenir les données où qu'elles se trouvent via l'attribut

. Une fois cela fait, nous créons simplement un nouvel objet et appelons la méthodefetch, qui déclenche un appel asynchrone au serveur et remplit la collection avec les résultats.Cela devrait couvrir les bases des collections Backbone. Comme je l'ai mentionné, il y a une tonne de bonnes choses ici, avec Backbone alias de nombreux utilitaires astucieux de la bibliothèque Underscore. Une lecture rapide de la documentation officielle devrait vous aider à démarrer.

Les vues dans Backbone peuvent être un peu déroutantes à première vue. Pour les puristes MVC, ils ressemblent à des contrôleurs plutôt qu'à des vues elles-mêmes.

Les vues assument fondamentalement deux responsabilités :

• Affichez l'état et le modèle de données de l'application aux utilisateurs.
Allons-y et créons une vue très simple.

GameView= Backbone.View.extend({ tagName : "div", className: "game", render : function() { // code for rendering the HTML for the view } });

Si vous avez suivi ce tutoriel jusqu'à présent, c'est assez simple. Je précise simplement quel élément HTML doit être utilisé pour envelopper la vue via l'attribut

, et son ID viaclassName.

让我们继续进行渲染部分。

render : function() { this.el.innerHTML = this.model.get('name'); //Or the jQuery way $(this.el).html(this.model.get('name')); }

events: { 'click .name': 'handleClick' }, handleClick: function(){ alert('In the name of science... you monster'); // Other actions as necessary }

GameView= Backbone.View.extend({ initialize: function (args) { _.bindAll(this, 'changeName'); this.model.bind('change:name', this.changeName); }, });

var Hashbangs = Backbone.Controller.extend({ routes: { "!/": "root", "!/games": "games", }, root: function() { // Prep the home page and render stuff }, games: function() { // Re-render views to show a collection of books }, });

// Init the controller like so var ApplicationController = new Controller; Backbone.history.start();