434 votes

Quel est le but de backbone.js ?

<p>J’ai essayé de comprendre l’utilité de backbone.js de son site <a href="http://documentcloud.github.com/backbone">http://documentcloud.github.com/backbone</a>, mais je ne pouvais pas encore comprendre une grande partie.</p> <p>Quelqu'un peut-il m’aider en expliquant comment il fonctionne et comment il pourrait être utile pour écrire mieux JavaScript ?</p>

391voto

Vladimir Gurovich Points 5408

Backbone.js est fondamentalement un uber-lumière cadre qui permet de structurer votre code Javascript dans un MVC(Modèle, Vue, Contrôleur) de la mode...

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

La vue est la représentation HTML de ce modèle(considère le changement comme des modèles, etc)

et en option Contrôleur qui dans ce cas permet d'enregistrer l'état de votre application javascript via un hashbang url, par exemple: http://twitter.com/#search?q=backbone.js

Certains pros que j'ai découvert avec Dorsale:

  • Pas plus de Javascript Spaghetti: le code est organisé et se décompose en sémantiquement significatifs .js fichiers qui sont ensuite combinés en utilisant JAMMIT

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

  • cas de la liaison fonctionne, tout simplement

  • extrêmement utile de souligner bibliothèque utilitaire

  • backbone.js le code est bien documenté et une bonne lecture. ouvert les yeux sur un certain nombre de code JS techniques.

Inconvénients:

  • M'a fallu un certain temps pour envelopper ma tête autour de lui et de comprendre comment l'appliquer à mon code, mais im un Javascript Newb.

Voici un ensemble de didacticiels sur l'utilisation de la colonne vertébrale avec des Rails en tant que back-end:

CloudEdit: Backbone.js Tutoriel avec des 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 cette magnifique Collection de classe qui permet de gérer les collections de modèles et d'imiter les modèles imbriqués, mais je ne veux pas vous embrouiller dès le début.

250voto

John Munsch Points 12653

Si vous allez construire des interfaces utilisateur dans le navigateur, vous trouverez probablement vous-même finit par inventer la plupart des pièces qui composent les cadres comme Backbone.js et Sammy.js. La question est donc, vous construisez quelque chose d'assez compliqué dans le navigateur pour le mérite de l'utiliser (si vous n'avez pas fini d'inventer la même chose vous-même).

Si ce que vous envisagez de faire construire est quelque chose où l'INTERFACE change régulièrement de la façon dont il affiche , mais ne pas aller vers le serveur de télécharger l'intégralité des nouvelles pages, alors vous avez probablement besoin de quelque chose comme Backbone.js ou Sammy.js. Le cardinal exemple de quelque chose comme ça, c'est le service GMail de Google. Si vous avez déjà utilisé, vous remarquerez qu'il télécharge un gros morceau de HTML, CSS et JavaScript lorsque vous vous connectez et 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 à l'arrière à travers chacun d'eux à nouveau, sans jamais demander pour une toute nouvelle page pour le rendu.

C'est le genre d'application que ces cadres excel à rendre plus facile à développer. Sans eux, vous aurez finissent soit glomming ensemble un large ensemble de bibliothèques, d'obtenir des pièces de la fonctionnalité (par exemple, jQuery BARBECUE pour la gestion de l'historique, Events.js pour les événements, etc.) ou vous finirez bâtiment tout vous-même et d'avoir à maintenir et à tester tout ce que vous-même ainsi. Voilà qui contraste avec quelque chose comme Backbone.js qui a des milliers de gens qui regardent sur Github, des centaines de forks où les gens peuvent travailler sur elle, et des centaines de questions déjà posées et répondues ici, sur un Débordement de Pile.

Mais rien de tout cela est de toute importance, si ce que vous envisagez de construire n'est pas assez compliqué pour être en vaut la courbe d'apprentissage associée à un cadre. Si vous êtes encore en construction PHP, Java, ou quelque chose d'autre sites où le serveur back-end est encore en train de faire tout le levage lourd de construction de pages web à la demande de l'utilisateur et JavaScript/jQuery est juste la cerise sur le processus, vous n'allez pas avoir besoin ou ne sont pas encore prêts pour Backbone.js.

95voto

superluminary Points 5496

La dorsale est...

...une très petite bibliothèque de composants que vous pouvez utiliser pour vous aider à organiser votre code. Il est emballé comme un seul fichier JavaScript avec moins de 1000 lignes de JavaScript qui vous inclure dans votre page web.

C'est un front-end de la bibliothèque, il n'affecte le navigateur, et dit peu de choses sur votre serveur, sauf que est, idéalement, devrait exposer une API restful.

La dorsale est pour...

...ajouter de la structure à JavaScript.

Parce que JavaScript n'est pas à appliquer tout particulièrement les modèles, applications JavaScript peut devenir très salissant très rapidement. N'importe qui qui a construit quelque chose de plus trivial en JavaScript aurez probablement aller à l'encontre de questions telles que:

  1. Où vais-je stocker mes données?
  2. Où vais-je mettre mes fonctions?
  3. Comment vais-je fil de mes fonctions, de sorte qu'ils sont appelés d'une façon raisonnable et de ne pas tourner à spaghetti?
  4. Comment puis-je faire de ce code maintenable par différents développeurs?

Épine dorsale cherche à répondre à ces questions en vous donnant:

  • Des modèles et des Collections pour vous aider à représenter des données et des collections de données.
  • Points de vue, pour vous aider à mettre à jour votre DOM lorsque vos modifications de données.
  • Un événement système, de sorte que les composants peuvent écouter les uns les autres. Cela permet à vos composants de-couplés, et empêche la spaghettification.
  • Un ensemble minimal de sensible conventions, afin que les développeurs peuvent travailler ensemble sur la même base de code.

Modèles

Lors du démarrage, il est courant pour stocker vos données dans une variable globale, ou dans les DOM comme des attributs de données [http://ejohn.org/blog/html-5-data-attributes/]. Ces deux ont des questions. Les variables globales peuvent entrer en conflit les uns avec les autres, et sont généralement une mauvaise forme. Attributs de données stockées dans les DOM ne peuvent être des chaînes, vous devrez analyser et de sortir à nouveau. Il est difficile de stocker des choses comme des tableaux, des dates ou des objets, et d'analyser vos données dans un format structuré.

Attributs de données ressembler à ceci:

<p data-username="derek" data-age="42"></p>

Épine dorsale résout ce problème en fournissant un Modèle de l'objet à représenter vos données et les méthodes associées. Disons que vous avez une liste de choses à faire, vous avez un modèle de représentation de chaque élément de cette liste.

Lorsque votre modèle est mis à jour, il déclenche un événement. Vous pouvez avoir votre point de vue à l'écoute de cet événement et de mettre à jour votre page web. Vous pourriez avoir un autre Modèle écouter pour un événement, et de mettre à jour lui-même.

Vues

Épine dorsale vous offre la Vue des objets qui parlent pour les DOM. Toutes les fonctions permettant de manipuler le DOM ou écouter les événements DOM rendez-vous ici.

Vue implémente généralement une fonction rendu qui retrace l'ensemble de la vue, ou, éventuellement, une partie de la vue.

Chaque point de vue est lié à une partie particulière de la DOM, alors vous pourriez avoir un searchFormView, qui n'écoute que pour le formulaire de recherche, et un shoppingCartView, qui n'affiche que le panier d'achat.

Les vues sont généralement aussi lié à des Modèles spécifiques ou des Collections. Lorsque le Modèle est mis à jour, il déclenche un événement où la vue est à l'écoute. Le point de vue pourrait les appeler rendre à redessiner lui-même.

Collections

Vous avez également accès à des collections qui stocker des listes de modèles, une todoCollection serait une liste de todo modèles. Lorsqu'une collection gagne ou perd un modèle, les changements de votre commande, ou d'un modèle dans une collection de mises à jour, l'ensemble de la collection déclenche un événement. Une vue peut écouter une collecte et la mise à jour de lui-même lors de la collecte des mises à jour.

Vous pouvez ajouter de tri et de filtre de méthodes pour votre collection, et d'en faire le tri lui-même automatiquement par exemple.

Les événements

Autant que possible, les composants de l'application sont découplés les uns des autres. Ils communiquent par le biais d'événements, de sorte qu'un shoppingCartView pourrait listenTo un shoppingCart de collecte et de redessiner lui-même lorsque le chariot est ajouté. (shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);)

Bien sûr, d'autres objets peuvent aussi être à l'écoute de la shoppingCart ainsi, et peut faire d'autres choses comme la mise à jour de total, ou économiser de l'état dans le stockage local.

Le découplage vos objets de ce genre et la communication par le biais d'événements, c'est que vous n'aurez jamais de s'emmêler dans les noeuds, et de nouveaux composants est facile, il suffit juste d'écouter les autres objets du système.

Conventions

Le Code écrit pour la colonne vertébrale suit un lâche et d'un ensemble de conventions. DOM code va dans une vue. Collection code se place dans une collection. La logique d'entreprise va dans un modèle. Un autre développeur de ramasser votre base de code sera en mesure de frapper le fonctionnement au sol.

Pour résumer

Épine dorsale renforce la structure de votre code. Les composants sont découplées et de communiquer via des événements de sorte que vous ne finissent pas dans un désordre. Vous pouvez étendre votre base de code facilement, simplement en créant un nouvel objet et de l'avoir écouter vos objets existants de façon appropriée. Votre code sera plus propre, plus agréable, et plus maintenable.

Mon petit livre

J'ai aimé épine Dorsale tellement que j'ai écrit un petit livre sur le sujet. Vous pouvez le lire en ligne ici: http://nicholasjohnson.com/backbone-book/

32voto

dpan Points 3286
<p>Voici une présentation intéressante :</p> <p><a href="http://backbone-dot-js-intro.heroku.com/#welcome.md"><strong>Une intro de Backbone.js</strong></a></p> <p>Astuce (à partir de diapositives) :</p> <ul> <li>Rails dans le navigateur ? <strong>No</strong>.</li> <li>Un framework MVC pour JavaScript ? <strong>Sorta</strong>.</li> <li>Une machine de grand État grasse ? <strong>Oui</strong>!</li> </ul>

14voto

sv_in Points 5297
<p>JQuery et Mootools sont juste une boîte à outils avec beaucoup d’outils de votre projet. Colonne vertébrale agit comme une architecture ou une épine dorsale pour votre projet sur lequel vous pouvez construire une application à l’aide de JQuery ou Mootools.</p>

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: