Backbone.js est un cadre minimaliste qui vise à fournir un ensemble simple de structures de données et de fonctionnalités que vous pouvez utiliser pour créer le front-end d'une application Web structurée. Prêt à l'emploi, les composants de Backbone.js fournissent un environnement intuitif que vous connaissez peut-être déjà lorsque vous travaillez avec des modèles et des vues sur le back-end. Les modèles et les collections de Backbone.js sont simples, mais ils sont livrés avec des fonctionnalités très utiles, telles que la possibilité de les intégrer facilement avec les API REST JSON. Mais ils sont également suffisamment flexibles pour être adaptés à presque toutes les utilisations pratiques.
Dans ce didacticiel Backbone.js, nous examinerons quelques erreurs courantes souvent commises par développeurs indépendants faire leur premier essai pour apprendre Backbone.js et les éviter.
Backbone.js est peut-être un cadre minimaliste, mais il (avec Underscore.js) fournit une pléthore de fonctionnalités et de fonctionnalités qui peuvent facilement couvrir les besoins les plus basiques et certains des besoins critiques qui surviennent lors du développement d'une application Web moderne. Une erreur courante que font souvent les développeurs débutants est qu'ils considèrent Backbone.js comme un autre framework client de type MVC pour le Web. Bien que cette section parle de quelque chose de très évident, quand il s'agit de Backbone.js, c'est une erreur vraiment critique de ne pas explorer le framework à fond. Le cadre peut être de petite taille, mais c'est ce qui en fait un excellent candidat pour cette exploration approfondie. Surtout sa petite et code source joliment annoté .
comment faire un bot de télégramme
Backbone.js fournit le strict minimum requis pour donner à votre application Web la structure dont elle peut bénéficier. Avec son extensibilité et pléthore de plugins , l'apprentissage de Backbone.js peut être utilisé pour créer des applications Web étonnantes. Certaines des fonctionnalités les plus évidentes de Backbone.js sont exposées à travers des modèles, des collections et des vues. Les composants de routeur et d'historique fournissent un mécanisme simple mais élégant pour prendre en charge le routage côté client. Bien que Underscore.js est une dépendance de Backbone.js, il est plutôt bien intégré dans le framework, car les modèles et les collections bénéficient tous deux beaucoup de cette incroyable ceinture utilitaire pour JavaScript et est également disponible à votre disposition.
Le code source du framework est si bien écrit et annoté que l’on pourrait probablement tout lire en buvant une tasse de café. Les débutants peuvent grandement bénéficier de la lecture des annotations sources, car ils peuvent en apprendre beaucoup sur le fonctionnement du framework en interne, ainsi que adopter un ensemble soigné de bonnes pratiques quand il s'agit de JavaScript.
Ce que nous avons tendance à faire lorsque nous commençons à apprendre Backbone.js est de ne pas faire les choses comme recommandé par Backbone.js. Par exemple, nous avons tendance à gérer les événements et à afficher les mises à jour comme nous le ferions avec jQuery sur de simples sites Web. Backbone.js est destiné à donner à votre application Web une structure rigide grâce à une séparation adéquate des préoccupations. Ce que nous avons souvent tendance à faire avec Backbone.js est de mettre à jour une vue en réponse à des événements DOM arbitraires:
var AudioPlayerControls = Backbone.View.extend({ events: { ‘click .btn-play, .btn-pause’: function(event) { $(event.target).toggleClass(‘btn-play btn-pause’) } }, // ... }) C'est quelque chose qui doit être évité à tout prix. Il peut être possible de trouver des exemples obscurs où cela peut avoir un sens; mais dans la plupart des cas, il existe de bien meilleures façons de le faire. En fait, une façon que je pourrais éventuellement illustrer ici est d'utiliser le modèle pour suivre l'état du lecteur audio et d'utiliser ces informations d'état pour rendre le bouton (ou plus spécifiquement ses noms de classe):
var AudioPlayerControls = Backbone.View.extend({ events: { ‘click .btn-play, .btn-pause’: function(event) { this.model.set(‘playing’, !this.model.get(‘playing’)) } }, initialize: function() { this.listenTo(this.model, ‘change’, this.render) this.render() }, // ... }) Il peut y avoir de rares situations où la manipulation directe du DOM à partir des gestionnaires d'événements aura du sens, mais le coût impliqué par la gestion de manipulations DOM complexes à partir des gestionnaires d'événements n'en vaut presque jamais la peine. C'est quelque chose que Backbone.js vise à résoudre. Utiliser Backbone.js pour faire quelque chose comme ça est une erreur.
Étant donné que Backbone.js facilite le rendu et le rendu du DOM à volonté ou en réponse à des événements, nous négligeons souvent l'impact que cela a sur les performances globales de l'application Web. Il y a de nombreuses façons dont nous pouvons finir par écraser la méthode de rendu sur nos vues. Souvent, cela peut ne pas sembler beaucoup, car les navigateurs Web modernes deviennent des logiciels très performants. Mais à mesure que l'application Web se développe et que la quantité de données qu'elle traite augmente, la baisse des performances devient de plus en plus apparente.
Nous pouvons voir cela en action à travers un exemple artificiel où nous commençons avec une petite collection de modèles et le rendons dans une vue de liste:
var AudioPlayerPlaylist = Backbone.View.extend({ template: _.template(‘
’), initialize: function() { this.listenTo(this.collection, ‘add’, this.render) }, // ... }) Dans cet exemple Backbone.js, nous effectuons un nouveau rendu chaque fois qu'un modèle est ajouté à la collection. Cela fonctionnera très bien. Cependant, puisque l'événement «add» est déclenché chaque fois qu'un modèle est ajouté à la liste, imaginez de récupérer une grande liste de modèles depuis le serveur. La méthode de rendu sera appelée plusieurs fois consécutivement, une fois pour chaque modèle dans la réponse du serveur. Un modèle suffisamment grand suffira pour faire bégayer votre application et ruiner l'expérience utilisateur. Parfois, une petite réponse est suffisante, selon la complexité de la vue rendue.
Une solution très rapide à cela consiste simplement à ne pas appeler la méthode de rendu pour chaque modèle ajouté. Dans des situations comme celles-ci, les modèles seront ajoutés par lots, et vous pouvez réellement faire quelque chose pour que la méthode de rendu ne se déclenche que lorsqu'elle est invoquée mais pas ré-invoquée dans un délai spécifié. La dépendance Underscore.js de Backbone.js est fournie avec une fonction utilitaire pratique pour cela: '_.debounce'. Tout ce dont vous avez besoin pour en profiter est de modifier la ligne JavaScript de liaison d'événement avec ceci:
this.listenTo(this.collection, ‘add’, _.debounce(_.bind(this.render), 128)) Cela provoquera le déclenchement du rappel d'événement à chaque fois que l'événement «add» se produit, cependant, il attendra 128 millisecondes à partir du dernier événement avant d'appeler réellement la méthode de rendu.
Dans la plupart des cas, cela sera considéré comme une solution rapide. En fait, il existe des moyens plus appropriés pour éviter les battements de rendu. Les développeurs derrière Trello une fois a écrit un article de blog discuter de leur expérience et de leur approche pour améliorer les performances de rendu tout en utilisant Backbone.js.
Laisser les écouteurs d'événements inutilisés liés est probablement quelque chose qui peut se produire quel que soit le framework JavaScript que vous utilisez, ou si vous en utilisez un. Même si Backbone.js permet d'éviter facilement ce problème, c'est certainement une erreur de laisser des trous potentiels pour des fuites de mémoire faciles dans votre application Web. Le composant «Event» de Backbone.js est certainement une implémentation assez soignée. Il permet aux objets JavaScript d'implémenter facilement des fonctionnalités basées sur des événements. Étant donné que les vues sont l'endroit où la plupart de notre consommation d'événements se produit généralement, il est facile de faire cette erreur ici:
var AudioPlayerControl = Backbone.View.extend({ initialize: function() { this.model.on(‘change’, _.bind(this.render, this)) // ... }, // ... }) La ligne de liaison d'événement dans cet extrait de code n'est pas très différente de celle du premier exemple. Tout ce que nous avons fait ici, c'est que nous avons changé «this.listenTo (this.model,…)» en «this.model.on (…)». Comme nous sommes très habitués à l'appel «.on ()» pour la liaison d'événement de notre expérience avec d'autres frameworks et bibliothèques JavaScript, lorsque nous commençons à utiliser Backbone.js, nous avons souvent tendance à utiliser les appels «.on ()» pour lier événements. Cela aurait été bien, seulement si nous prenions la peine d'appeler «.off ()» pour dissocier les gestionnaires d'événements lorsqu'ils ne sont plus nécessaires. Mais nous faisons rarement cela, et cela finit par être une source de fuites de mémoire.
Backbone.js offre un moyen simple de résoudre ce problème. C'est grâce à l'utilisation de la méthode «object.listenTo ()». Cela permet à l'objet sur lequel vous appelez «listenTo ()» de garder une trace des événements qu'il écoute, et facilite également la dissociation de tous ces événements à la fois. Les vues, par exemple, cessent automatiquement d'écouter tous les événements liés dès que vous appelez «remove ()» dessus.
Si vous y réfléchissez bien, le minimalisme de Backbone.js offre une énorme flexibilité quant à la manière dont vous souhaitez concevoir le front-end de votre application Web. Les modèles, les collections et les vues étant les éléments constitutifs de vos composants, il est essentiel de les garder aussi légers et spécifiques que possible. Le plus souvent, ce sont les vues qui finissent par devenir l'aspect le plus lourd de votre application Web en termes de code. Mais il est vraiment important que vous ne finissiez pas par faire des vues monolithiques géantes qui finissent par essayer de faire tout ce que votre application a à offrir. Au lieu de créer une vue «AudioPlayer» géante avec toute la logique entassée, divisez-la en un certain nombre de vues logiques telles qu'une vue pour la liste de lecture, une vue pour les commandes, une vue pour le visualiseur, etc. Le type de granularité que vous souhaitez garantir dépend probablement de l'application que vous essayez de créer.
En effet, avec des vues granulaires, où chaque vue fait quelque chose de spécifique et le fait correctement, le développement d'une application Web avec Backbone.js devient un jeu d'enfant. Votre code devrait être plus facile à gérer et à étendre ou à modifier à l'avenir. Ensuite, il y a l'autre extrême, où vous finissez par en faire trop. Les vues Backbone.js sont conçues pour vous permettre de travailler avec un modèle ou une collection, ce qui peut probablement vous indiquer comment structurer votre application. Ian Storm Taylor partagé quelques idées précieuses sur son blog que vous devriez probablement garder à l'esprit lors de la mise en œuvre des vues.
Backbone.js fonctionne avec les API RESTful basées sur JSON prêtes à l'emploi. Tout ce dont vous avez besoin pour cela, c'est jQuery (ou quelque chose qui le remplace, tel que Zepto). Cependant, Backbone.js est extrêmement extensible. En fait, Backbone.js peut être adapté pour utiliser d'autres types d'API et même d'autres types de formats d'encodage.
tailles d'écran de l'appareil pour un design réactif
Le composant de Backbone.js qui traite de l'interaction du front-end avec les services back-end est «Sync». Ce composant expose un certain nombre d'attributs que vous pouvez facilement remplacer pour personnaliser la manière dont Backbone.js interagit avec les points de terminaison de l'API. En fait, il est également possible de remplacer le mécanisme de synchronisation par défaut par quelque chose qui n'est pas si traditionnel pour le moins, comme l'utilisation de localStorage pour conserver les données, au lieu des services back-end.
Nombreux plugins existent qui facilitent la personnalisation du comportement de synchronisation de Backbone.js. Par exemple, un plugin appelé Backbone.dualStorage vous permet d'utiliser à la fois les services back-end et localStorage pour conserver les données. Lorsque votre application est hors ligne, le plug-in utilise localStorage pour continuer à servir les demandes des données mises en cache et suivre les modifications que vous pourrez synchroniser avec le serveur plus tard lorsque vous serez en ligne.
Bien que l'utilisation de Backbone.js avec un back-end conçu pour être REST et compatible avec lui soit plus facile à utiliser, cela ne signifie pas que c'est tout ce que Backbone.js peut utiliser. Avec quelques modifications apportées au mécanisme de synchronisation par défaut de Backbone.js, vous pouvez l'adapter à un large éventail d'API de service back-end et de formats d'encodage.
Il est à noter que d'autres parties de Backbone.js sont également flexibles et facultatives. Par exemple, vous n'avez pas à utiliser le moteur de création de modèles par défaut fourni avec Underscore.js. Vous n'avez même pas besoin d'utiliser le composant de vue de Backbone.js et pouvez le remplacer par autre chose si vous le souhaitez.
Une erreur que nous pouvons souvent commettre en tant que débutant dans l'apprentissage de Backbone.js est de stocker des données directement sur les vues en tant qu'attributs. Ces données peuvent être là pour suivre un état ou une sélection de l'utilisateur. C'est quelque chose qui doit être évité.
var AudioPlayerVisualizer = Backbone.View.extend({ events: { ‘click .btn-color’: function(event) { this.colorHex = $(event.target).data(‘color-hex’) this.render() } }, // ... }) Vous pouvez toujours créer des modèles et des collections supplémentaires sans points de terminaison. Celles-ci peuvent vous aider à stocker des données qui ne doivent pas nécessairement être conservées sur le back-end ou qui peuvent être de nature temporaire. Les stocker dans des modèles vous donne l'avantage d'être en mesure d'écouter les changements. La vue pertinente, ou même plusieurs vues, peuvent observer ces modèles et se restituer si nécessaire.
utiliser powerpivot dans excel 2013
Imaginez si vous stockiez réellement des variables de suivi d'état sur des vues et deviez appeler la méthode de rendu chaque fois que vous les changiez. Manquer un seul appel à cette méthode de rendu pourrait laisser votre application dans un état défectueux, en termes de ce que l'utilisateur vit à l'écran. De plus, avec de petites vues, vous devrez peut-être synchroniser ces variables d'état sur plusieurs objets de vue, puis appeler la méthode de rendu sur eux également.
Backbone.js a, à mon avis, un moyen magnifique de gérer les événements DOM. Ne pas l'utiliser présente de nombreux inconvénients. La fonction de liaison d'événement '.on ()' de jQuery peut sembler pratique, mais s'avère souvent compliquée à long terme. Par exemple, lorsque des éléments sont détachés du DOM, jQuery supprime automatiquement tous les gestionnaires d'événements liés aux éléments à l'aide de «.on ()». Cela signifie que tout événement DOM auquel vous essayez de vous lier à partir d'une vue devra être rebondi si vous détachez l'élément racine du DOM et le rattachez.
var AudioPlayerControls = Backbone.View.extend({ events: { ‘click .btn-play, .btn-pause’: function() { /* ... */ }, ‘click .btn-prev’: function() { /* ... */ }, ‘click .btn-next’: function() { /* ... */ }, ‘click .btn-shuffle’: function() { /* ... */ }, ‘click .btn-repeat’: function() { /* ... */ } }, // ... }) Lorsque l'élément correspondant à cette vue est ré-attaché au DOM, il suffit d'appeler «delegateEvents ()» sur la vue pour lier tous ces événements.
Notez qu'il est important de comprendre comment ces événements sont liés. Au lieu de lier l'événement aux éléments spécifiés par le sélecteur, Backbone.js lie en fait le gestionnaire d'événements à l'élément racine de la vue. Cela fonctionne bien dans presque tous les cas, et en fait fonctionne mieux pour la plupart de nos besoins. La modification ou le remplacement des éléments enfants dans la sous-arborescence DOM de la vue ne nécessite pas que Backbone.js lie à nouveau chaque événement sur les nouveaux éléments. Les auditeurs existants continuent de travailler.
Cependant, cela empêche que certains événements soient écoutés. Un exemple est celui où vous pourriez souhaite écouter les événements de défilement sur 'fenêtre' ou sur un élément déroulant enfant. Dans le cas d'éléments enfants, vous pouvez créer une sous-vue pour cet élément et y gérer les événements.
Backbone.js, étant un framework très compact mais extensible, est un excellent choix pour les applications Web qui exigent beaucoup de flexibilité en arrière-plan. Contrairement aux frameworks tels que Angular.js et Ember.js qui sont toujours là pour vous dire comment faire ce que vous voulez faire, Backbone.js prend du recul, vous offre un ensemble d'outils puissants et vous permet de décider comment utiliser leur. J'espère que ce tutoriel Backbone.js pour les débutants vous aidera à éviter certains des erreurs de développement et construisez quelque chose d'extraordinaire avec.
