L'épine dorsale est ...
... une très petite bibliothèque de composants que vous pouvez utiliser pour organiser votre code. Il est fourni dans un seul fichier JavaScript. À l'exclusion des commentaires, il contient moins de 1 000 lignes de JavaScript réel. C'est sensiblement écrit et vous pouvez lire le tout en quelques heures.
C'est une bibliothèque frontale, vous l'incluez dans votre page Web avec une balise de script. Cela n'affecte que le navigateur et en dit peu sur votre serveur, sauf qu'il devrait 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.
L'épine dorsale est pour ...
... ajout de structure à JavaScript.
Parce que JavaScript n'applique aucun modèle particulier, les applications JavaScript peuvent devenir très désordonnées très rapidement. Quiconque a construit quelque chose de plus trivial en JavaScript se heurtera probablement à des questions telles que:
- Où vais-je stocker mes données?
- Où vais-je mettre mes fonctions?
- Comment vais-je câbler mes fonctions ensemble, afin 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 offrant:
- Modèles et collections pour vous aider à représenter les données et les collections de données.
- Vues, 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 maintient vos composants découplés et empêche la spaghettification.
- Un ensemble minimal de conventions sensées, 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 extras en option.
L'épine dorsale est légère
Malgré les apparences initiales, Backbone est incroyablement léger, il ne fait presque rien. 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 par exemple créer un petit objet pour représenter un commentaire, puis un petit objet commentView pour représenter l'affichage du commentaire à un endroit particulier du navigateur.
Vous pouvez dire à 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 du code vous empêche de vous emmêler même si votre base de code devient très importante avec de nombreuses interactions.
Des modèles
Au début, il est courant de stocker vos données soit dans une variable globale, soit dans le DOM en tant qu'attributs de données . Les deux ont des problèmes. Les variables globales peuvent entrer en conflit et sont généralement de mauvaise forme. Les attributs de données stockés dans le DOM ne peuvent être que des chaînes, 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 sous une forme 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 Model pour représenter vos données et les méthodes associées . Supposons que vous ayez une liste de tâches, 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 modification de modèle et se restitue.
Vues
Backbone vous fournit des objets View qui communiquent avec le DOM. Toutes les fonctions qui manipulent le DOM ou écoutent les événements DOM vont ici.
Une vue implémente généralement une fonction de rendu qui redessine la vue entière ou peut-être 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 un searchFormView, qui écoute uniquement le formulaire de recherche, et un shoppingCartView, qui n'affiche que le panier.
Les vues sont généralement également liées à des modèles ou collections spécifiques. Lorsque le modèle est mis à jour, il déclenche un événement que la vue écoute. La vue pourrait les appeler render pour se redessiner.
De même, lorsque vous tapez dans un formulaire, votre vue peut mettre à jour un objet de 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 maintient notre code propre et bien rangé.
La fonction de rendu
Vous pouvez implémenter votre fonction de rendu comme bon vous semble. Vous pouvez 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 juste une chaîne avec des points d'insertion. Vous le passez à une fonction de compilation avec un objet JSON et récupérez une chaîne compilée que vous pouvez insérer dans votre DOM.
Les collections
Vous avez également accès à des collections qui stockent des listes de modèles, donc une todoCollection serait une liste de modèles de tâches. Lorsqu'une collection gagne ou perd un modèle, change son ordre ou qu'un modèle d'une collection se met à jour, la collection entière déclenche un événement.
Une vue peut écouter une collection et se mettre à jour à chaque mise à jour de la collection.
Vous pouvez ajouter des méthodes de tri et de filtrage à votre collection et la faire trier automatiquement par exemple.
Et des événements pour tout lier ensemble
Autant que 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 écouter le panier d'achat et faire d'autres choses comme mettre à jour un total ou enregistrer l'état dans le stockage local.
- Les vues écoutent les modèles et effectuent un rendu lorsque le modèle change.
- Les vues écoutent les collections et affichent une liste (ou une grille, ou une carte, etc.) lorsqu'un élément de la collection change.
- Les modèles écoutent les vues afin de pouvoir changer d'état, peut-être lorsqu'un formulaire est modifié.
Découpler vos objets comme celui-ci et communiquer en utilisant des événements signifie que vous ne vous enchevêtrerez jamais dans les nœuds, et l'ajout de nouveaux composants et comportements est facile. Vos nouveaux composants doivent simplement é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 appartient à une vue. Le code de collection appartient à une collection. La logique métier s'inscrit dans un modèle. Un autre développeur qui récupérera votre base de code sera en mesure de démarrer.
Pour résumer
Backbone est une bibliothèque légère qui donne une structure à votre code. Les composants sont découplés et communiquent via des événements afin que vous ne vous retrouviez pas dans un désordre. Vous pouvez facilement étendre votre base de code, simplement en créant un nouvel objet et en l'écoutant de manière appropriée à vos objets existants. Votre code sera plus propre, plus agréable et plus facile à gérer.
Mon petit livre
J'ai tellement aimé Backbone que j'ai écrit un petit livre d'introduction à ce sujet. Vous pouvez le lire en ligne ici: http://nicholasjohnson.com/backbone-book/
J'ai également décomposé le matériel en un court cours en ligne, que vous pouvez trouver ici: http://www.forwardadvance.com/course/backbone . Vous pouvez terminer le cours en une journée environ.