454 votes

Quel est l'objectif de backbone.js ?

J'ai essayé de comprendre l'utilité de backbone.js à partir de son site http://documentcloud.github.com/backbone mais je n'ai toujours pas compris grand-chose.

Quelqu'un peut-il m'aider en m'expliquant comment il fonctionne et comment il pourrait être utile pour écrire un meilleur JavaScript ?

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.

396voto

Vladimir Gurovich Points 5408

Backbone.js est en fait un framework ultra-léger qui vous permet de structurer votre code Javascript de manière à ce qu'il soit le plus simple possible. MVC (Modèle, Vue, Contrôleur) mode où...

Modèle est une partie de votre code qui récupère et remplit les données,

Voir est la représentation HTML de ce modèle (les vues changent au fur et à mesure que les modèles changent, etc.)

et facultatif Contrôleur qui, dans ce cas, vous permet de sauvegarder l'état de votre application Javascript via une URL hashbang, par exemple : http://twitter.com/#search?q=backbone.js

Quelques avantages que j'ai découverts avec Backbone :

  • Fini le spaghetti Javascript : le code est organisé et décomposé en fichiers .js sémantiquement significatifs qui sont ensuite combinés à l'aide de JAMMIT.

  • Pas plus jQuery.data(bla, bla) : il n'est pas nécessaire de stocker les données dans le DOM, mais plutôt dans les modèles

  • la liaison par événement fonctionne tout simplement

  • bibliothèque utilitaire Underscore extrêmement utile

  • Le code de backbone.js est bien documenté et constitue une excellente lecture. Il m'a ouvert les yeux sur un certain nombre de techniques de codage JS.

Cons :

  • Il m'a fallu un certain temps pour le comprendre et trouver comment l'appliquer à mon code, mais je suis un novice en Javascript.

Voici un ensemble d'excellents tutoriels sur l'utilisation de Backbone avec Rails comme back-end :

CloudEdit : un tutoriel Backbone.js avec Rails :

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

p.s. Il y a aussi ce merveilleux Collection qui vous permet de traiter des collections de modèles et d'imiter des modèles imbriqués, mais je ne veux pas vous embrouiller dès le départ.

1 votes

Un autre tutoriel utile : coenraets.org/blog/2012/01/

18 votes

Cette réponse est fausse. Backbone n'est pas un framework MVC. Il s'agit d'un framework MV*. Il est important de comprendre les principaux composants. Et il n'y a pas de contrôleurs. Bonne chance.

3 votes

Pour rappel, la bibliothèque Backbone elle-même ne comporte pas de contrôleurs, bien que Jeremy Ashkenas ait déclaré que les objets View les remplacent en quelque sorte puisqu'il s'agit d'objets JavaScript qui possèdent des modèles et brassent des données vers et depuis le front-end. Bien entendu, rien ne vous empêche d'implémenter un contrôleur, un service, voire un ViewModel si vous le souhaitez, il s'agit simplement de JavaScript.

250voto

John Munsch Points 12653

Si vous souhaitez créer des interfaces utilisateur complexes dans le navigateur, vous devrez probablement inventer la plupart des éléments qui composent des frameworks comme Backbone.js et Sammy.js. La question est donc de savoir si vous construisez quelque chose d'assez compliqué dans le navigateur pour mériter de l'utiliser (afin de ne pas finir par inventer la même chose vous-même).

Si ce que vous envisagez de construire est quelque chose dont l'interface utilisateur change régulièrement la façon dont elle s'affiche mais ne va pas au serveur pour obtenir de nouvelles pages entières alors vous avez probablement besoin de quelque chose comme Backbone.js ou Sammy.js. L'exemple par excellence de ce type d'application est GMail de Google. Si vous l'avez déjà utilisé, vous avez remarqué qu'il télécharge un gros morceau de HTML, CSS et JavaScript lorsque vous vous connectez pour la première fois, puis que tout se passe en arrière-plan. Il peut passer de la lecture d'un courrier électronique au traitement de la boîte de réception et à la recherche, puis revenir à tout cela sans jamais demander le rendu d'une nouvelle page entière.

C'est ce genre d'application que ces frameworks facilitent le développement. Sans eux, vous finirez soit par rassembler un ensemble diversifié de bibliothèques individuelles pour obtenir certaines parties de la fonctionnalité (par exemple, jQuery BBQ pour la gestion de l'historique, Events.js pour les événements, etc.), soit par tout construire vous-même et devoir tout maintenir et tester vous-même. Comparez cela à quelque chose comme Backbone.js qui a des milliers de personnes qui le regardent sur Github, des centaines de forks où des gens peuvent travailler dessus, et des centaines de questions déjà posées et répondues ici sur Stack Overflow.

Mais rien de tout cela n'a d'importance si ce que vous envisagez de construire n'est pas assez compliqué pour valoir la courbe d'apprentissage associée à un framework. Si vous construisez encore des sites PHP, Java ou autres, où le serveur dorsal fait encore tout le travail de construction des pages Web à la demande de l'utilisateur et où JavaScript/jQuery n'est que la cerise sur le gâteau, vous n'aurez pas besoin de Backbone.js ou vous n'êtes pas encore prêt à l'utiliser.

21 votes

Merci pour la comparaison avec Gmail. C'était un moyen facile pour moi de me rendre compte que je n'ai pas besoin d'approfondir la question pour le site que je suis en train de développer.

15 votes

+1 pour avoir mentionné que vous finirez de toute façon par écrire vous-même quelque chose comme backbone.js si votre projet devient suffisamment important : re Greenspan's 10th Rule

0 votes

Si vous utilisez PHP ou quelque chose de similaire en tant que point d'accès à un service web, vous n'utilisez pas 80 ou 90 % du cadre de développement web traditionnel de type demande/réponse. Il y a donc une grande différence dans la façon dont ce type d'application est construit par rapport à une application web plus traditionnelle.

97voto

superluminary Points 5496

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 :

  1. Où vais-je stocker mes données ?
  2. Où vais-je mettre mes fonctions ?
  3. 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 ?
  4. 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.

0 votes

Merci Pandit. Vous êtes très gentil.

1 votes

La vue ne rend-elle pas techniquement un modèle, et non pas "elle-même" ? Elle semble jouer davantage le rôle de "présentateur" ou de "ViewModel".

1 votes

Bon point, bien que la vue puisse rendre tout ce que vous lui demandez. Cela peut être un modèle, un jQuery arbitraire, ou même quelque chose de minuscule comme une valeur dans un formulaire, ou un nombre dans un badge.

32voto

dpan Points 3286

Voici une présentation intéressante :

Une introduction à Backbone.js

Indice (tiré des diapositives) :

  • Rails dans le navigateur ? Non .
  • Un framework MVC pour JavaScript ? Sorta .
  • Une grosse machine à états ? OUI !

14voto

sv_in Points 5297

JQuery et Mootools sont juste une boîte à outils avec beaucoup d'outils pour votre projet. Backbone agit comme une architecture ou une colonne vertébrale pour votre projet sur laquelle vous pouvez construire une application en utilisant JQuery ou Mootools.

0 votes

En fait, il est facile de supposer que le nom n'est qu'un nom. Par exemple, "jquery" signifie probablement "requête javascript", ce qui n'implique pas grand-chose en soi. Mais dans ce cas, cela signifie littéralement "colonne vertébrale" :)

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X