web-dev-qa-db-fra.com

Backbone.js et jQuery

Il est dit que Backbone gère toutes les abstractions de niveau supérieur, alors que jQuery ou des bibliothèques similaires fonctionnent avec le DOM, normalisent les événements, etc.

Quelqu'un pourrait-il m'aider à comprendre cette affirmation avec un exemple concret simple?.

De plus, une caractéristique importante du framework MVC comme Backbone, Knockout, est qu’il maintient le modèle (données) et la vue synchronisés. Mais cela semble être spécifique au niveau de la page et non à travers toute l'application. Pouvons-nous avoir le modèle/les données et la vue synchronisés sur plusieurs pages? (Type de global)

javascriptjquerybackbone.jsjavascript-framework
81
testndtv

Backbone/Knockout est généralement utilisé pour les applications d'une seule page. Ainsi, alors que jQuery est une boîte à outils pouvant être utilisée avec n’importe quelle page Web, Backbone est destiné à un type d’application spécifique et vous aide à organiser votre code. Au moins, d'après mon expérience, l'un des plus grands défis liés à la création d'une application d'une seule page consiste à maintenir le code propre et modulaire, ce qui aide grandement Backbone.

Les caractéristiques d'une application dorsale typique sont les suivantes:

  • Page html essentiellement statique, avec rien généré sur le serveur
  • Le serveur agit comme un json REST api, qui fournit le contenu de l'application
  • Les éléments dom pour afficher les données sont créés avec javascript dans des vues de réseau principal, en utilisant jQuery et diverses bibliothèques de modèles pour vous aider.
  • La communication avec le serveur ainsi qu'entre différentes parties de l'application se fait via les modèles de dorsale

En ce qui concerne votre question sur la synchronisation des données sur plusieurs pages, ma réponse instinctive est que vous n’avez pas besoin de plusieurs pages: l’utilisateur peut percevoir que la page est en train de changer, l’adresse dans la barre d’URL change grâce à la fonctionnalité pushState, mais techniquement, la toute l'application est une page.

Les principaux avantages de ce type d’approche sont une expérience utilisateur fluide (pas de rechargement de pages), une bonne prise en charge de la mise en cache car tout, sauf les données json, est un contenu statique. Pour les cibles mobiles, la possibilité de transformer l’application Web en application mobile avec phoneGap (car tout sauf JSON est statique).

54
OlliM

Votre phrase d'ouverture était en fait une très bonne déclaration des différences entre Backbone.js et jQuery, alors décompressons-la un peu.

D'une part, les deux bibliothèques ne sont pas du tout en concurrence: elles sont complémentaires.

À titre d'exemple, voici certaines choses que je ferais avec jQuery:

  • Diaporamas animés
  • Améliorations du contrôle de formulaire, comme un numéro de type iOS "spinner"
  • Basculement de la visibilité des éléments en fonction d'un nom de classe

Et certaines choses que je pourrais faire dans Backbone.js:

  • Créez un album photo dans lequel l'utilisateur clique sur une vignette et peut afficher une version plus grande de la photo, ainsi que des données telles que l'appareil photo utilisé, l'emplacement et le nom du photographe.
  • Construisez un type de page maître/détails qui présente une grille de données et permet à l'utilisateur de cliquer sur des éléments individuels et de les mettre à jour dans un formulaire.

jQuery excelle au niveau micro - sélection des éléments de page, lissant les différences dans la manière dont les navigateurs gèrent les événements.

Backbone.js est une image plus grande. Il vous aide à gérer les données et la logique de l'application. Dans l'exemple d'album photo ci-dessus, Backbone fournit plusieurs structures utiles: vous avez quelque chose pour contenir toutes les données relatives aux photos (un modèle), une liste de toutes les photos de l'album (une collection) et un emplacement logique qui détermine ce qui se passe lorsqu'un utilisateur clique sur une vignette (la vue). Ce sont les éléments principaux d’un contrôle ou d’une application Backbone.

Backbone.js tire toutefois parti de jQuery, ou d’un moyen similaire, pour rendre les résultats des données et de la logique de votre application dans le DOM. Par exemple, il est courant d'utiliser jQuery pour sélectionner l'élément de la page qui servira de conteneur pour votre application Backbone. Il est également courant d'utiliser la fonction $(function () {}); de jQuery pour lancer les éléments de votre contrôle Backbone. Vous voudriez probablement également afficher des messages d’erreur de validation de champ de formulaire avec jQuery.

Vous pouvez certainement construire de grandes interfaces utilisateur complexes dans jQuery. Nous en avons quelques-uns dans l'application que je maintiens au travail. Mais ils sont difficiles à utiliser car jQuery n’est pas conçu pour structurer une application. En particulier, l'API de jQuery, basée sur la sélection de groupes d'éléments, puis sur le transfert de fonctions de rappel manipulant ces éléments, n'est pas un bon modèle à utiliser dans une application ou un contrôle complexe et volumineux. Vous vous retrouvez avec beaucoup de fonctions imbriquées et il est très difficile de voir ce qui se passe.

Je suis en train de retravailler l'un de ces contrôles dans Backbone.js. En guise d’exemple final, voici un résumé rapide des différences entre mon processus de pensée lorsque je travaille sur le même contrôle dans les deux bibliothèques.

Dans jQuery, je m'inquiète pour:

  • Est-ce que j'utilise le sélecteur de droite pour saisir le groupe de li éléments que je veux?
  • Dois-je repeupler cette liste de valeurs lorsque cet appel Ajax est terminé?
  • Comment puis-je remettre ces valeurs de tableau dans les éléments input de la page?

Dans Backbone, je suis plus concentré sur:

  • Quelle est la bonne logique pour valider cet ensemble de propriétés sur mon élément de modèle?
  • Lorsque l'utilisateur clique sur le bouton Ajouter, dois-je ajouter immédiatement un nouvel élément à la collection ou dois-je attendre jusqu'à ce qu'il ait rempli toutes les données et qu'il soit "valide"?
  • Comment un élément de ma collection doit-il réagir lorsque l'élément immédiatement avant ou après sa suppression?

jQuery gère les détails essentiels, et Backbone est plus sophistiqué.

En terminant, remarquez que j’ai utilisé les mots "control" et "app" lors de la discussion des exemples Backbone.js. Ce n'est pas vrai que Backbone.js ne concerne que les applications à page unique. Il est vrai, toutefois, que Backbone.js est utile pour la construction d’applications complexes qui manipulent des données et gèrent beaucoup de logique. Il serait stupide de l'utiliser pour des éléments d'interface utilisateur à petite échelle - la structure supplémentaire qu'elle impose n'est pas nécessaire.

Mise à jour: Sur la question des pages multiples, oui, Backbone fournit un mécanisme puissant pour la persistance de vos données. Chaque modèle a une méthode save qui exécutera un appel AJAX pour stocker les modifications sur le serveur. Ainsi, si vous enregistrez vos données au fur et à mesure, vous pouvez Application multi-pages: c'est un modèle très flexible, et c'est ainsi que nous utiliserons probablement Backbone au travail. Bien que j'aimerais créer une application d'une page, nous avons 10 ans de travail dans notre application multi-pages existante. Nous cherchons à reconstruire certains de nos composants d'interface utilisateur les plus intenses dans Backbone, puis à synchroniser les modifications sur le serveur avant que l'utilisateur ne passe à une autre page.

128
Josh Earl

Je n'ai jamais entendu parler de personnes utilisant backbone.js sur plusieurs pages. C'est presque toujours une sorte d'application d'une seule page.

La page unique peut comporter de nombreux modèles, vues et états différents et donner lieu à une application puissante et performante.

Si vous avez déjà un rendu de modèle/vue côté serveur dans Java, alors backbone.js n'est pas pour vous. Pour tirer le meilleur parti de backbone.js, vous devez déplacer ou dupliquer une partie de ce code dans le javascript front end.

Si vous ne souhaitez pas créer une application à une seule page (cela signifie simplement qu'une application sans actualisation ou modification de page, mais que l'URL peut toujours changer et peut ressembler à plusieurs pages pour l'utilisateur), alors vous pouvez conserver l'intégralité de votre MVC. le serveur et vous n'avez pas besoin de backbone.

Modifier:

Le backbone déplace certains des éléments MVC normalement gérés sur le serveur et les transfère vers le client. Pour beaucoup de gens, cela signifie qu’il faut oublier le serveur et écrire votre application comme une application javascript à une seule page. Le serveur devient simplement une source de données JSON/REST. Si vous n'êtes pas prêt à faire cela, alors backbone.js n'est pas très utile.

3
Mark

Backbone est un framework MV *, tandis que jQuery est un toolkit DOM.

Les principales fonctionnalités d’une application MV * sont le routage, la liaison de données, les modèles/vues, les modèles et l’accès aux données. Backbone pourrait dépendre de jQuery partiellement.

jQuery est une API solide pour interroger le DOM avec une prise en charge étendue du navigateur et une communauté dynamique. Il vient avec la gestion des événements, les objets différés et les animations.

Liaison d'événement simple à l'aide de jQuery

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});
2
antonjs