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

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

Backbone.js est essentiellement un framework uber-light qui vous permet de structurer votre code Javascript de manière MVC (Model, View, Controller) où ...

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

La vue est la représentation HTML de ce modèle (les vues changent à mesure que les modèles changent, etc.)

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

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

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

• Plus jQuery.data(bla, bla)besoin: pas besoin de stocker les données dans DOM, stockez plutôt les données dans les modèles

• la liaison d'événement fonctionne

• bibliothèque d'utilitaires 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:

• Cela m'a pris un certain temps pour envelopper ma tête autour de lui et comprendre comment l'appliquer à mon code, mais je suis un débutant Javascript.

Voici un ensemble de super 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/

ps Il y a aussi cette merveilleuse classe Collection qui vous permet de gérer des collections de modèles et d'imiter des modèles imbriqués, mais je ne veux pas vous dérouter dès le départ.

Si vous allez créer des interfaces utilisateur complexes dans le navigateur, vous vous retrouverez probablement à inventer la plupart des éléments qui composent des cadres tels que 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 (donc vous ne finissez pas par inventer la même chose vous-même).

Si ce que vous prévoyez de créer est quelque chose où 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, 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 lorsque vous vous connectez pour la première fois, puis que tout se passe en arrière-plan. Il peut basculer entre la lecture d'un e-mail et le traitement de la boîte de réception et la recherche et le retour dans chacun d'eux sans jamais demander le rendu d'une toute nouvelle page.

C'est ce type d'application que ces frameworks excellent à faciliter le développement. Sans eux, vous finirez par rassembler un ensemble diversifié de bibliothèques individuelles pour obtenir des parties de la fonctionnalité (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 d'avoir à tout maintenir et à tester également. Comparez cela avec quelque chose comme Backbone.js qui a des milliers de personnes qui le regardent sur Github, des centaines de fourches où les gens peuvent y travailler, 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 êtes toujours en train de créer des sites PHP, Java ou autre chose où le serveur principal continue de faire tout le gros du travail de construction des pages Web à la demande de l'utilisateur et que JavaScript / jQuery ne fait que givrer ce processus, vous n'êtes pas ' t va avoir besoin ou ne sont pas encore prêts pour Backbone.js.

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:

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

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 à états gras? OUI !

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 sympa 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.

JQuery et Mootools ne sont qu'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 créer une application à l'aide de JQuery ou de Mootools.

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

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

Je dois admettre que tous les "avantages" de MVC n'ont jamais rendu mon travail plus facile, plus rapide ou meilleur. Cela rend l'expérience de codage plus abstraite et prend plus de temps. L'entretien est un cauchemar quand on essaie de déboguer la conception de quelqu'un d'autre de ce que signifie la séparation. Je ne sais pas combien d'entre vous ont déjà essayé de mettre à jour un site FLEX qui utilisait Cairngorm comme modèle MVC mais ce qui devrait prendre 30 secondes pour mettre à jour peut souvent prendre plus de 2 heures (recherche / traçage / débogage juste pour trouver un seul événement ). MVC était et est toujours, pour moi, un "avantage" que vous pouvez farcir.

Voici un petit article de mise en route que j'ai écrit sur BackboneJS. J'espère que cela aide! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

backbone.js est Model-View-Controller (MVC) avec JavaScript mais Extjs mieux que backbone pour MVC Pattern par java script

Avec l'épine dorsale, vous avez la liberté de faire presque tout ce que vous souhaitez. Plutôt que d'essayer de parcourir l'API et de personnaliser, j'utiliserais Backbonejs pour sa simplicité et sa facilité de mise en œuvre. Encore une fois, il est difficile de dire ce dont vous avez besoin des deux: une bibliothèque une autre un composant

Backbone a été créé par Jeremy Ashkenas qui a également écrit CoffeeScript. En tant qu'application JavaScript lourde, ce que nous connaissons maintenant sous le nom de Backbone était responsable de la structuration de l'application en une base de code cohérente. Underscore.js, la seule dépendance du backbone, faisait également partie de l'application DocumentCloud.

Backbone aide les développeurs à gérer un modèle de données dans leur application Web côté client avec autant de discipline et de structure que vous obtiendriez dans une logique d'application côté serveur traditionnelle.

Avantages supplémentaires de l'utilisation de Backbone.js

1. Voir Backbone comme une bibliothèque, pas comme un framework
2. Javascript s'organise désormais de manière structurée, le modèle (MVVM)
3. Grande communauté d'utilisateurs

Il ajoute également le routage à l'aide de contrôleurs et de vues avec KVO. Vous pourrez développer des applications "AJAXy" avec.

Voyez-le comme un cadre léger Sproutcore ou Cappuccino.

Est un modèle de conception MVC du côté client, croyez-moi. Cela vous fera économiser des tonnes de code, sans parler d'un code plus propre et plus clair, un code plus facile à entretenir. Cela pourrait être un peu délicat au début, mais croyez-moi, c'est une excellente bibliothèque.

Tant de bonnes réponses déjà. Backbone js aide à garder le code organisé. La modification du modèle / de la collection prend en charge le rendu automatique de la vue, ce qui réduit les frais généraux de développement.

Même s'il offre une flexibilité maximale pour le développement, les développeurs doivent veiller à détruire les modèles et à supprimer correctement les vues. Sinon, il peut y avoir une fuite de mémoire dans l'application.

Une application Web impliquant beaucoup d'interaction utilisateur avec de nombreuses requêtes AJAX, qui doit être modifiée de temps en temps et qui s'exécute en temps réel (comme Facebook ou StackOverflow) devrait utiliser un framework MVC tel que Backbone.js. C'est le meilleur moyen de construire un bon code.

Si l'application n'est que petite, alors Backbone.js est exagéré, en particulier pour les nouveaux utilisateurs.

Backbone vous offre MVC côté client et tous les avantages que cela implique.