Backbone est...
...une toute petite bibliothèque de composants que vous pouvez utiliser pour vous aider à organiser votre code. Elle est fournie sous la forme d'un seul fichier JavaScript. Sans compter les commentaires, il contient moins de 1000 lignes de JavaScript. Il est écrit de manière raisonnable et vous pouvez le lire en quelques heures.
C'est une bibliothèque frontale, vous l'incluez dans votre page web avec une balise script. Elle n'affecte que le navigateur et ne dit pas grand-chose sur votre serveur, si ce n'est qu'elle doit idéalement exposer une API reposante.
Si vous disposez d'une API, Backbone possède quelques fonctionnalités utiles qui vous aideront à lui parler, mais vous pouvez utiliser Backbone pour ajouter de l'interactivité à n'importe quelle page HTML statique.
Backbone est pour...
...en ajoutant une structure à JavaScript.
Parce que JavaScript n'impose aucun modèle particulier, les applications JavaScript peuvent devenir très vite désordonnées. Quiconque a construit quelque chose de plus que trivial en JavaScript s'est probablement heurté à des questions comme celles-ci :
- Où vais-je stocker mes données ?
- Où vais-je mettre mes fonctions ?
- Comment vais-je relier mes fonctions entre elles, de manière à ce qu'elles soient appelées de manière sensée et ne se transforment pas en spaghetti ?
- Comment puis-je rendre ce code maintenable par différents développeurs ?
Backbone cherche à répondre à ces questions en vous donnant :
- Modèles et collections pour vous aider à représenter des données et des collections de données.
- Views, pour vous aider à mettre à jour votre DOM lorsque vos données changent.
- Un système d'événements pour que les composants puissent s'écouter les uns les autres. Cela permet de découpler les composants et d'éviter la spaghettification.
- Un ensemble minimal de conventions judicieuses, afin que les développeurs puissent travailler ensemble sur la même base de code.
Nous appelons cela un modèle MV*. Modèles, vues et options.
L'épine dorsale est légère
Malgré les premières apparences, Backbone est fantastiquement léger, il ne fait presque rien du tout. Ce qu'il fait est très utile.
Il vous donne un ensemble de petits objets que vous pouvez créer, et qui peuvent émettre des événements et s'écouter les uns les autres. Vous pouvez créer un petit objet pour représenter un commentaire par exemple, puis un petit objet commentView pour représenter l'affichage du commentaire à un endroit particulier du navigateur.
Vous pouvez dire à la commentView d'écouter le commentaire et de se redessiner lorsque le commentaire change. Même si vous avez le même commentaire affiché à plusieurs endroits sur votre page, toutes ces vues peuvent écouter le même modèle de commentaire et rester synchronisées.
Cette façon de composer le code permet d'éviter de s'emmêler les pinceaux, même si votre base de code devient très vaste et comporte de nombreuses interactions.
Modèles
Lorsque vous débutez, il est courant de stocker vos données soit dans une variable globale, soit dans le DOM en tant que attributs de données . Ces deux solutions présentent des problèmes. Les variables globales peuvent entrer en conflit les unes avec les autres, et sont généralement de mauvais goût. Les attributs de données stockés dans le DOM ne peuvent être que des chaînes de caractères, vous devrez les analyser à nouveau. Il est difficile de stocker des éléments tels que des tableaux, des dates ou des objets, et d'analyser vos données de manière structurée.
Les attributs de données ressemblent à ceci :
<p data-username="derek" data-age="42"></p>
Backbone résout ce problème en fournissant un objet Modèle pour représenter vos données et les méthodes associées. . Supposons que vous ayez une liste de tâches à faire, vous auriez un modèle représentant chaque élément de cette liste.
Lorsque votre modèle est mis à jour, il déclenche un événement. Vous pouvez avoir une vue liée à cet objet particulier. La vue écoute les événements de changement de modèle et se présente à nouveau.
Vues
Backbone vous fournit des objets View qui communiquent avec le DOM. Toutes les fonctions qui manipulent le DOM ou qui écoutent les événements du DOM vont ici.
Une vue implémente généralement une fonction de rendu qui redessine la vue entière, ou éventuellement une partie de la vue. Il n'y a aucune obligation d'implémenter une fonction de rendu, mais c'est une convention courante.
Chaque vue est liée à une partie particulière du DOM. Vous pouvez donc avoir une searchFormView, qui n'écoute que le formulaire de recherche, et une shoppingCartView, qui n'affiche que le panier.
Les vues sont aussi généralement liées à des modèles ou à des collections spécifiques. Lorsque le modèle est mis à jour, il déclenche un événement que la vue écoute. La vue peut alors appeler render pour se redessiner.
De même, lorsque vous tapez dans un formulaire, votre vue peut mettre à jour un objet modèle. Chaque autre vue écoutant ce modèle appellera alors sa propre fonction de rendu.
Cela nous donne une séparation nette des préoccupations qui permet de garder notre code propre et ordonné.
La fonction de rendu
Vous pouvez implémenter votre fonction de rendu comme bon vous semble. Vous pourriez simplement mettre un peu de jQuery ici pour mettre à jour le DOM manuellement.
Vous pouvez également compiler un modèle et l'utiliser. Un modèle est simplement une chaîne de caractères avec des points d'insertion. Vous le passez à une fonction de compilation avec un objet JSON et vous obtenez en retour une chaîne compilée que vous pouvez insérer dans votre DOM.
Collections
Vous avez également accès aux collections qui stockent des listes de modèles, ainsi une todoCollection serait une liste de modèles de tâches à faire. Lorsqu'une collection gagne ou perd un modèle, change d'ordre ou qu'un modèle d'une collection est mis à jour, la collection entière déclenche un événement.
Une vue peut écouter une collection et se mettre à jour lorsque la collection est mise à jour.
Vous pouvez ajouter des méthodes de tri et de filtrage à votre collection, et faire en sorte qu'elle se trie automatiquement, par exemple.
Et des événements pour lier le tout
Dans la mesure du possible, les composants de l'application sont découplés les uns des autres. Ils communiquent à l'aide d'événements, de sorte qu'un shoppingCartView peut écouter une collection shoppingCart et se redessiner lorsque le panier est ajouté.
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);
Bien sûr, d'autres objets peuvent également être à l'écoute du panier de commande et faire d'autres choses comme mettre à jour un total ou sauvegarder l'état dans un stockage local.
- Les vues écoutent les modèles et effectuent un rendu lorsque le modèle change.
- Les vues écoutent les collections et rendent une liste (ou une grille, ou une carte, etc.) lorsqu'un élément de la collection change.
- Les modèles écoutent les vues pour pouvoir changer d'état, par exemple lorsqu'un formulaire est modifié.
En découplant ainsi vos objets et en communiquant à l'aide d'événements, vous ne vous emmêlerez jamais les pinceaux, et l'ajout de nouveaux composants et de nouveaux comportements est facile. Vos nouveaux composants n'ont qu'à écouter les autres objets déjà présents dans le système.
Conventions
Le code écrit pour Backbone suit un ensemble lâche de conventions. Le code DOM doit être placé dans une vue. Le code de la collection doit être placé dans une collection. La logique métier va dans un modèle. Un autre développeur qui reprend votre base de code sera capable de s'y retrouver.
En résumé
Backbone est une bibliothèque légère qui donne de la structure à votre code. Les composants sont découplés et communiquent par le biais d'événements, de sorte que vous ne vous retrouverez pas dans le désordre. Vous pouvez étendre votre code facilement, simplement en créant un nouvel objet et en lui faisant écouter vos objets existants de manière appropriée. Votre code sera plus propre, plus agréable et plus facile à maintenir.
Mon petit livre
J'ai tellement aimé Backbone que j'ai écrit un petit livre d'introduction à son sujet. Vous pouvez le lire en ligne ici : http://nicholasjohnson.com/backbone-book/
J'ai également décomposé la matière en un court cours en ligne, que vous pouvez trouver à l'adresse suivante aquí (archivé). Vous pouvez suivre le cours en une journée environ.
36 votes
C'est un framework MVC. Il vous encourage à abstraire vos données dans des modèles et votre manipulation du DOM dans des vues et à lier les deux ensemble en utilisant des événements.
0 votes
Comment une "vue" peut-elle gérer des événements dans le contexte de MVC ? C'est ce que prétend Backbonejs.org dans son introduction.
3 votes
Ça vaut la peine d'apprendre. J'ai eu du mal à m'y mettre, mais après avoir surmonté quelques difficultés d'apprentissage, ce n'est vraiment pas si difficile. Commencez par la démo de la cave à vin.
2 votes
Dans le contexte de Backbone, la vue fait en quelque sorte office de contrôleur. Elle écoute les événements DOM et les transmet aux modèles, le cas échéant. Elle écoute également les modifications apportées à vos modèles et collections et redessine le DOM en conséquence. Backbone est un modèle MV, mais le C est implicite. Si Backbone était Rails, le modèle serait la vue, et la vue serait le contrôleur.
0 votes
Je pensais qu'il s'agissait d'un framework MVVM car il ne fournit pas de contrôleurs.
0 votes
Et question complémentaire, qu'est-il arrivé à Backbone ? Pourquoi n'est-il plus à la mode ? C'est plus facile qu'Angular, c'est sûr