Question Quel est le but de backbone.js?


J'ai essayé de comprendre l'utilité de backbone.js depuis son site http://documentcloud.github.com/backbone, mais je ne pouvais toujours pas trouver grand chose.

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


413
2018-03-24 11:26


origine


Réponses:


Backbone.js est essentiellement un framework ultra-léger qui vous permet de structurer votre code Javascript dans un MVC (Modèle, Vue, Contrôleur) mode où ...

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

Vue est la représentation HTML de ce modèle (les vues changent lorsque les modèles changent, etc.)

et optionnel Manette Dans ce cas, vous pouvez enregistrer 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écouvert avec Backbone:

  • Plus de spaghetti Javascript: le code est organisé et décomposé en fichiers .js sémantiquement significatifs qui sont ensuite combinés en utilisant JAMMIT

  • Pas plus jQuery.data(bla, bla): pas besoin de stocker des données dans DOM, stocker des données dans des modèles à la place

  • la liaison d'événements fonctionne simplement

  • bibliothèque utilitaire Underscore extrêmement utile

  • Le code backbone.js est bien documenté et une excellente lecture. J'ai ouvert les yeux sur un certain nombre de techniques de code JS.

Les inconvénients:

  • Ça m'a pris un moment pour envelopper ma tête et comprendre comment l'appliquer à mon code, mais je suis un novice Javascript.

Voici un ensemble de tutoriels sur l'utilisation de Backbone with 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 classe qui vous permet de gérer des collections de modèles et imiter des modèles imbriqués, mais je ne veux pas vous confondre dès le départ.


377
2018-03-26 00:03



Si vous allez construire des interfaces utilisateur complexes dans le navigateur, vous finirez par trouver la plupart des éléments qui composent les frameworks comme Backbone.js et Sammy.js. Donc la question est, construisez-vous quelque chose de suffisamment compliqué dans le navigateur pour mériter de l'utiliser (pour ne pas inventer la même chose par vous-même).

Si ce que vous envisagez de construire est quelque chose où l'interface utilisateur change régulièrement la façon dont il affiche mais ne va pas sur le serveur pour obtenir de nouvelles pages entières alors vous avez probablement besoin de quelque chose comme Backbone.js ou Sammy.js. L'exemple cardinal de quelque chose comme ça est le GMail de Google. Si vous l'avez déjà utilisé, vous remarquerez qu'il télécharge un gros morceau de HTML, CSS et JavaScript lors de votre première connexion, puis après que tout se passe en arrière-plan. Il peut se déplacer entre la lecture d'un e-mail et le traitement de la boîte de réception et la recherche et à nouveau à travers eux tous sans jamais demander une toute nouvelle page à rendre.

C'est ce genre d'application que ces frameworks excellent à rendre plus facile à développer. Sans eux, vous finirez par regrouper un ensemble de bibliothèques pour obtenir une partie des fonctionnalités (par exemple, jQuery BBQ pour la gestion de l'historique, Events.js pour les événements, etc.) ou vous finirez par tout construire vous-même. et avoir à maintenir et tester tout vous-même. Comparez avec quelque chose comme Backbone.js qui a des milliers de personnes le regardant sur Github, des centaines de fourches où les 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 prévoyez de construire n'est pas assez compliqué pour valoir la courbe d'apprentissage associée à un cadre. Si vous construisez encore des sites PHP, Java ou autre, où le serveur back-end fait tout le travail nécessaire pour construire les pages web à la demande de l'utilisateur et JavaScript / jQuery est juste en train de geler ce processus, vous n'êtes plus là. t va avoir besoin ou n'est pas encore prêt pour Backbone.js.


244
2017-08-30 21:32



Backbone est ...

... une très petite bibliothèque de composants que vous pouvez utiliser pour organiser votre code. Il est livré en un seul fichier JavaScript. En excluant les commentaires, il contient moins de 1000 lignes de JavaScript. C'est écrit de façon sensée et vous pouvez lire le tout dans quelques heures.

C'est une bibliothèque frontale, vous l'incluez dans votre page Web avec un tag 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 avez une API, Backbone a 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 ...

... ajouter une 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 au-delà de trivial en JavaScript aura probablement rencontré des questions telles que:

  1. Où vais-je stocker mes données?
  2. Où vais-je mettre mes fonctions?
  3. Comment vais-je câbler mes fonctions ensemble, de sorte qu'elles sont appelées de manière sensée et ne se tournent pas vers les spaghettis?
  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.
  • 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 garde vos composants découplés et empêche la spaghétisation.
  • Un ensemble minimal de conventions raisonnables, 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 optionnels.

Le backbone est la lumière

Malgré les apparences initiales, Backbone est incroyablement 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. Vous pouvez créer un petit objet pour représenter un commentaire par exemple, puis un petit objet de commentaire pour représenter l'affichage du commentaire dans 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, tous ces affichages peuvent écouter le même modèle de commentaire et rester synchronisés.

Cette façon de composer du code aide à vous éviter de vous emmêler même si votre base de code devient très grande avec beaucoup d'interactions.

Des modèles

Au démarrage, il est courant de stocker vos données soit dans une variable globale, soit dans le DOM comme attributs de données. Les deux ont des problèmes. Les variables globales peuvent entrer en conflit les unes avec les autres 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 encore et encore. 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 cela en fournissant un objet Model pour représenter vos données et les méthodes associées. Dites que vous avez 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 pourriez avoir une vue liée à cet objet particulier. La vue est à l'écoute des événements de changement de modèle et se redéfinit elle-même.

Vues

Backbone vous fournit des objets View qui parlent au 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 toute la vue, 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 spécifique du DOM, de sorte que vous pouvez avoir un searchFormView, qui n'écoute que le formulaire de recherche, et un shoppingCartView, qui affiche uniquement le panier.

Les vues sont 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 pourrait les appeler render pour se redessiner.

De même, lorsque vous saisissez un formulaire, votre vue peut mettre à jour un objet de modèle. Toute 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 pourriez juste 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.

Collections

Vous avez également accès à des collections qui stockent des listes de modèles, donc todoCollection serait une liste de modèles de todo. Lorsqu'une collection gagne ou perd un modèle, modifie son ordre ou met à jour un modèle dans une collection, la collection entière déclenche un événement.

Une vue peut écouter une collection et se mettre à jour chaque fois que la collection est mise à jour.

Vous pouvez ajouter des méthodes de tri et de filtrage à votre collection et la trier automatiquement, par exemple.

Et des événements pour tout faire ensemble

Dans la mesure du possible, les composants de l'application sont découplés les uns des autres. Ils communiquent en utilisant des événements, donc un shoppingCartView peut écouter une collection shoppingCart, et se redessiner quand le panier est ajouté.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Bien sûr, d'autres objets peuvent également écouter le shoppingCart, et peuvent faire d'autres choses comme mettre à jour un total, ou enregistrer l'état dans le stockage local.

  • Les vues écoutent les modèles et les rendent lorsque le modèle change.
  • Les vues écoutent les collections et rendent une liste (ou une grille, une carte, etc.) lorsqu'un élément de la collection change.
  • Les modèles écoutent les vues pour pouvoir changer d'état, peut-être lorsqu'un formulaire est édité.

Découpler vos objets comme ça et communiquer en utilisant des événements signifie que vous ne serez jamais emmêlé dans les nœuds, et l'ajout de nouveaux composants et le comportement est facile. Vos nouveaux composants doivent simplement écouter les autres objets déjà dans le système.

Conventions

Le code écrit pour Backbone suit un ensemble de conventions. Le code DOM appartient à une vue. Le code de collection appartient à une collection. La logique métier va 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 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 lui faisant écouter vos objets existants de manière appropriée. Votre code sera plus propre, plus agréable et plus facile à entretenir.

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 divisé le matériel en un court cours en ligne, que vous pouvez trouver ici: http://www.forwardadvance.com/course/backbone. Vous pouvez compléter le cours en environ un jour.


82
2017-07-04 17:28



Voici une présentation intéressante:

Une introduction à Backbone.js

Astuce (à partir des diapositives):

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

32
2018-04-19 19:43



Backbone.js est un framework JavaScript qui vous aide à organiser votre code. C'est littéralement une colonne vertébrale sur laquelle vous construisez votre application. Il ne fournit pas de widgets (comme jQuery UI ou Dojo).

Il vous donne un ensemble de classes de base que vous pouvez étendre pour créer du code JavaScript propre qui s'interface avec les points de terminaison RESTful sur votre serveur.


14
2018-03-24 11:30



JQuery et Mootools sont juste une boîte à outils avec beaucoup d'outils de votre projet. Backbone agit comme une architecture ou un backbone pour votre projet sur lequel vous pouvez construire une application en utilisant JQuery ou Mootools.


14
2018-03-24 12:06



C'est une très bonne vidéo d'introduction: http://vimeo.com/22685608

Si vous cherchez plus sur Rails and Backbone, Thoughtbot a ce très bon livre (pas gratuit): https://workshops.thoughtbot.com/backbone-js-on-rails


11
2018-06-08 20:43