Quel est le but de backbone.js?
J'ai essayé de comprendre l'utilité de backbone.js à partir de son site http://documentcloud.github.com/backbone , mais je ne pouvais toujours pas comprendre grand chose.
Quelqu'un peut-il m'aider en expliquant comment cela fonctionne et comment cela pourrait-il être utile pour mieux écrire du JavaScript?
Backbone.js est fondamentalement un framework ultra léger qui vous permet de structurer votre code Javascript de manière MVC (Modèle, Vue, Contrôleur) où ...
Le modèle fait partie de votre code qui extrait et remplit les données,
View est la représentation HTML de ce modèle (les vues changent à mesure que les modèles changent, etc.).
et optionnel Contrôleur qui vous permet dans ce cas d’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écouverts avec Backbone:
Plus de Javascript Spaghetti: le code est organisé et divisé en fichiers .js significatifs qui sont ensuite combinés à l'aide de JAMMIT
Pas plus
jQuery.data(bla, bla): pas besoin de stocker des données dans DOM, mais de stocker des données dans des modèlesla liaison d'événement ne fonctionne que
bibliothèque utilitaire extrêmement utile Underscore
le code de 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:
- Il m'a fallu un certain temps pour comprendre et appliquer ce code à mon code, mais je suis un débutant en Javascript.
Voici un ensemble d'excellents tutoriels sur l'utilisation de Backbone avec Rails en tant que back-end:
CloudEdit: Un didacticiel 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 cette merveilleuse classe 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 dérouter dès le début. .
Si vous envisagez de créer des interfaces utilisateur complexes dans le navigateur, vous vous retrouverez probablement éventuellement en train d'inventer la plupart des éléments constitutifs de structures telles que Backbone.js et Sammy.js. La question est donc de savoir si vous construisez quelque chose d'assez compliqué dans le navigateur pour pouvoir l'utiliser (pour ne pas inventer vous-même la même chose).
Si ce que vous envisagez de créer est quelque chose où l'interface utilisateur change régulièrement son affichage mais ne va pas au serveur pour obtenir de nouvelles pages alors vous aurez probablement besoin de quelque chose comme Backbone.js ou Sammy.js. L'exemple cardinal de ce genre de chose est le GMail de Google. Si vous l'avez déjà utilisé, vous remarquerez qu'il télécharge une grande quantité 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 se déplacer entre la lecture d'un courrier électronique et le traitement de la boîte de réception et la recherche et le parcourir à nouveau sans jamais demander le rendu d'une nouvelle page.
C’est ce genre d’application que ces frameworks Excel facilitent le développement. Sans eux, vous pourrez soit rassembler un ensemble varié de bibliothèques individuelles pour obtenir des fonctionnalités (par exemple, jQuery BBQ pour la gestion de l'historique, Events.js pour des événements, etc.) ou vous devrez tout construire vous-même. et devoir tout entretenir et tout tester vous-même. Comparez cela à quelque chose comme Backbone.js qui est regardé par des milliers de personnes sur Github, des centaines de fourchettes où des personnes peuvent travailler, et des centaines de questions déjà posées et répondues ici sur Stack Overflow.
Mais cela n’a aucune importance si ce que vous envisagez de construire n’est pas assez compliqué pour valoir la courbe d’apprentissage associée à un cadre. Si vous continuez de créer des sites PHP, Java ou autres, sur lesquels le serveur principal est toujours en train de créer les pages Web à la demande de l'utilisateur et que JavaScript/jQuery ne fait que mettre en valeur ce processus, vous n'êtes pas obligé t va avoir besoin ou ne sont pas encore prêts pour Backbone.js.
La colonne vertébrale est ...
... une très petite bibliothèque de composants que vous pouvez utiliser pour organiser votre code. Il est livré sous forme de fichier JavaScript unique. Hors commentaires, il contient moins de 1000 lignes de code JavaScript. C'est raisonnablement é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 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 possède quelques fonctionnalités utiles qui vous aideront à en parler, mais vous pouvez utiliser Backbone pour ajouter de l’interactivité à toute page HTML statique.
Backbone est pour ...
... ajouter de la structure à JavaScript.
Parce que JavaScript n'impose pas de modèles particuliers, les applications JavaScript peuvent devenir très désordonnées très rapidement. Quiconque a construit quelque chose au-delà de 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 connecter mes fonctions ensemble, de sorte qu'elles soient appelées de manière sensée et ne se tournent pas vers les spaghettis?
- 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 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 permettant aux composants de s'écouter. Ceci maintient vos composants découplés et empêche la spaghettification.
- Un ensemble minimal de conventions judicieuses permettant aux développeurs de travailler ensemble sur la même base de code.
Nous appelons cela un modèle MV *. Modèles, vues et options supplémentaires.
La colonne vertébrale 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 indiquer à commentView d'écouter le commentaire et de se redessiner lorsque le commentaire est modifié. Même si le même commentaire est 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 vous aide à ne pas vous emmêler, même si votre base de code devient très grande avec de nombreuses interactions.
Des modèles
Lors du démarrage, il est courant de stocker vos données dans une variable globale ou dans le DOM sous la forme 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 de nouveau. Il est difficile de stocker des éléments tels que des tableaux, des dates ou des objets, et d'analyser vos données dans un formulaire structuré.
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 représentant 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 pourriez avoir une vue liée à cet objet particulier. La vue écoute les événements de modification de modèle et se redresse elle-même.
Des vues
Backbone vous fournit des objets View qui communiquent avec le DOM. Toutes les fonctions qui manipulent le DOM ou é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 commune.
Chaque vue est liée à une partie particulière du DOM. Vous pouvez donc 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 peut appeler le rendu pour se redessiner.
De même, lorsque vous tapez dans 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 garde 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 quelques 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 transmettez à 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.
Des collections
Vous avez également accès à des collections qui stockent des listes de modèles. Une collection todoCollection serait donc une liste de modèles à exécuter. Lorsqu'une collection gagne ou perd un modèle, modifie son ordre ou qu'un modèle d'une collection est mis à jour, l'ensemble de la collection 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 faire trier automatiquement, par exemple.
Et des événements pour lier tout cela 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. Ainsi, shoppingCartView peut écouter une collection shoppingCart et se redessiner lorsque le panier est ajouté.
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);
Bien entendu, d'autres objets peuvent également écouter le panier d'achat et effectuer d'autres tâches, telles que mettre à jour un total ou enregistrer l'état dans la mémoire de stockage locale.
- Les vues écoutent les modèles et s'affichent lorsque le modèle est modifié.
- Les vues écoutent des collections et rendent une liste (ou une grille, une carte, etc.) lorsqu'un élément de la collection est modifié.
- Les modèles écoutent les vues pour pouvoir changer d'état, par exemple lorsqu'un formulaire est modifié.
Découpler vos objets de cette manière et communiquer à l'aide d'événements signifie que vous ne serez jamais mêlés à des nœuds. 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 de conventions lâches. Le code DOM appartient à une vue. Le code de collection appartient à une collection. La logique commerciale va dans un modèle. Un autre développeur récupérant votre base de code sera en mesure de prendre les devants.
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 pour ne pas vous perdre. Vous pouvez facilement étendre votre base de code, simplement en créant un nouvel objet et en le faisant écouter correctement 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 divisé 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 environ une journée.
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 d'état? OUI!
JQuery et Mootools sont juste une boîte à outils avec beaucoup d'outils de votre projet. Le backbone agit comme une architecture ou un backbone pour votre projet sur lequel vous pouvez construire une application à l'aide de JQuery ou de Mootools.
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.
Je dois admettre que tous les "avantages" de MVC ne m'ont jamais permis de travailler plus facilement, plus vite ou mieux. Cela rend simplement l'expérience de codage plus abstraite et plus longue. La maintenance est un cauchemar lorsque vous essayez de déboguer une autre conception de 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 la mise à jour prend 30 secondes, et prend souvent plus de 2 heures (recherche/traçage/débogage juste pour trouver un événement unique). ). MVC était et est toujours, pour moi, un "avantage" que vous pouvez farcir.
C'est une très bonne vidéo d'introduction: http://vimeo.com/22685608
Si vous recherchez plus d'informations sur Rails et Backbone, Thoughtbot a ce très bon livre (non gratuit): https://workshops.thoughtbot.com/backbone-js-on-Rails
Voici un article rapide de prise en main que j'ai écrit sur BackboneJS. J'espère que ça aide! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx
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 chargé de la structurer en un code cohérent. Underscore.js, la seule dépendance de l’épine dorsale, 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 discipline et structure que dans une logique d'application côté serveur traditionnelle.
Avantages supplémentaires de l’utilisation de Backbone.js
- Voir Backbone comme une bibliothèque, pas comme un framework
- Javascript est en train de s'organiser de manière structurée, le (MVVM) Model
- Grande communauté d'utilisateurs
backbone.js est Modèle-Vue-Contrôleur (MVC) avec JavaScript mais Extjs meilleur que le backbone pour MVC Pattern par Java script
Avec Backbone, vous avez la liberté de faire presque tout ce que vous souhaitez. Plutôt que d'essayer de passer d'une API à une autre et de la 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. Une bibliothèque, un composant
Il ajoute également un routage à l'aide de contrôleurs et de vues avec KVO. Vous pourrez développer des applications "AJAXy" avec.
Voyez-le comme un framework Sproutcore ou Cappuccino léger.
Croyez-moi, il s’agit d’un modèle de conception MVC côté client. Il vous épargnera des tonnes de code, sans parler d’un code plus propre et plus clair, d’un code plus facile à gérer. 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 de la vue automatiquement, ce qui réduit considérablement les frais de développement.
Même si cela 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 pourrait y avoir une fuite de mémoire dans l'application.