Utilisez Backbone.js pour accélérer les interactions

Auteur: Monica Porter

Date De Création: 13 Mars 2021

Date De Mise À Jour: 15 Peut 2024

Utilisez Backbone.js pour accélérer les interactions - Créatif

Contenu

Commençons alors
Notre premier modèle
Une collection d'images
Le FlickrBombImage
Le calque de vue
Le FlickrBombImageView
L'étirement à la maison
Fonctionne également très bien avec les grandes applications Web
Ressources supplémentaires

Si vous cherchez à créer rapidement un petit outil JavaScript, vous n’envisagez probablement pas d’utiliser un framework. Il est plus facile de pirater du code jQuery plutôt que d'installer et d'apprendre un nouveau framework, non? Faux, Backbone.js est un framework de colle super léger qui ressemble à l'ancien JavaScript habituel que vous avez l'habitude d'écrire.

Nous faisons beaucoup de prototypes statiques ici chez ZURB, car nous aimons pouvoir cliquer sur des pages sans avoir à écrire de code backend. Souvent, nous ajoutions des images d'espace réservé gris terne, ou parfois nous allions chercher sur Flickr des exemples d'images pour nous aider à visualiser ce qui pourrait figurer dans le brouillon final. C'est jusqu'à un vendredi magique, quand nous avons décidé que ce serait génial d'écrire du JavaScript pour résoudre nos problèmes. Nous voulions pouvoir rechercher et sélectionner des photos sur Flickr, directement à partir des images d'espace réservé elles-mêmes. Nous l'appellerions FlickrBomb, et voici comment nous l'avons construit en utilisant Backbone.js.

Il est fortement recommandé de jeter un coup d'œil à FlickrBomb avant de lire. Il s'agit de l'un de ces accords de type "un clic vaut mille mots". Allez-y, nous attendrons.

Il y a beaucoup de frameworks JavaScript sur le bloc ces jours-ci, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Mais nous avons aimé Backbone.js pour ce projet particulier pour plusieurs raisons différentes:

1. C'est léger (100% sans gras en fait)

en poids, la dernière version emballée étant d'environ 4,6 ko
dans le code, soit un peu plus de 1000 lignes de code, il n'est pas très difficile de suivre une trace de pile jusque dans les composants internes sans perdre la tête

2. Cela ressemble à du JavaScript

parce que c’est JavaScript, c’est tout et c’est tout
il utilise jQuery, que même votre grand-mère connaît ces jours-ci

3. Persistance super simple

prêt à l'emploi, il persiste les données dans un backend (via REST), mais en déposant un seul plug-in, il les sauvegardera sur le stockage local à la place
parce qu'il fait abstraction de l'API de persistance, nous pourrions la faire persister dans un backend REST en supprimant simplement le plug-in de stockage local

Commençons alors

Parce que Backbone.js n'est que JavaScript, tout ce que nous devons faire est de l'inclure avec Underscore.js sur la page. jQuery n'est pas une dépendance stricte pour Backbone en soi, mais nous allons l'utiliser, nous allons donc l'inclure ici. Nous allons également associer le plug-in de stockage local, car nous ne voulons pas nous soucier de la configuration d'un backend. Notez que les fichiers étaient directement liés ici pour plus de simplicité, mais vous devez toujours héberger vos propres actifs en production.

script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / script> script src = "http://documentcloud.github.com/backbone/ backbone-min.js "> / script> script src =" http://documentcloud.github.com/underscore/underscore-min.js "> / script> script src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / script>

Tout le code suivant dans cet article est spécifique à notre application, nous pouvons donc l'inclure dans un fichier app.js, ou simplement en ligne si c'est votre truc. N'oubliez pas de l'inclure après Backbone. Backbone permet d'abstraire des parties de notre application, de les rendre à la fois modulaires pour une réutilisation facile et plus lisibles pour les autres. Pour illustrer au mieux cette abstraction, nous allions expliquer la conception de FlickrBomb de bas en haut, en commençant par les modèles et en terminant par les vues.

Notre premier modèle

La première tâche à accomplir est de tirer les photos de Flickr. Modéliser une image Flickr dans le backbone est assez simple, nous allons créer un nouveau modèle appelé FlickrImage et ajouter quelques méthodes pour nous aider à obtenir des pouces de tailles différentes.

Les modèles dans Backbone sont des objets qui peuvent être persistants et auxquels certaines fonctions leur sont associées, tout comme les modèles d'autres frameworks MVC. La partie magique des modèles Backbone est que nous pouvons lier des événements à des attributs, de sorte que lorsque cet attribut change, nous pouvons mettre à jour nos vues pour refléter cela. Mais nous prenons un peu d’avance sur nous-mêmes.

Lorsque nous tirons les photos de Flickr, nous allons obtenir suffisamment d'informations pour créer des URL pour toutes les tailles. Cependant, cet assemblage nous est laissé, nous avons donc implémenté la fonction .image_url () qui prend un paramètre de taille et renvoie un lien public. Comme il s'agit d'un modèle de base, nous pouvons utiliser this.get () pour accéder aux attributs du modèle. Donc, avec ce modèle, nous pouvons faire ce qui suit ailleurs dans le code pour obtenir l'URL d'une image Flickr.

flickrImage.image_url ("large")

Assez concis, hein? Étant donné que ce modèle est spécifique à notre application, nous ajouterons des fonctions d'encapsulation pour les tailles d'image pleine grandeur et miniature.

Une collection d'images

FlickrBomb traite des collections d'images, pas des images uniques, et Backbone a un moyen pratique de modéliser cela. La collection bien nommée est ce que nous utiliserons pour regrouper les images Flickr pour un seul espace réservé.

Il y a quelques choses à noter ici. Tout d'abord, le maquette L'attribut indique aux collections le type de modèle qu'elles collectent. Nous avons également certains attributs que nous avons initialisés pour une utilisation ultérieure: key est notre clé API Flickr, vous voudrez remplacer flickrbombAPIkey par la chaîne de votre propre clé API Flickr. Obtenir une clé API Flickr est gratuit et facile, il suffit de suivre ce lien: www.flickr.com/services/api/misc.api_keys.html. L'attribut de page est la page actuelle des photos Flickr sur lesquelles nous sommes.

La grande méthode ici est .fetch (), qui fait abstraction des détails de l'extraction de photos de l'API Flickr. Pour éviter les problèmes avec les demandes inter-domaines, nous utilisons JSONP, qui est compatible avec l'API Flickr et jQuery. Les autres paramètres que nous transmettons à l'API devraient être explicites. Les fonctions Backbone qui sont appelées ici sont particulièrement intéressantes. Dans le rappel de réussite, nous utilisons .add (), une fonction qui prend un tableau d'attributs de modèle, crée des instances de modèle à partir de ces attributs, puis les ajoute à la collection.

Les fonctions .nextPage () et .prevPage () changent d'abord la page que nous voulons afficher,
utilisez la fonction de collecte .remove (), pour supprimer tous les modèles existants du
collection, puis appelez fetch pour obtenir les photos de la page en cours (que nous venons de
modifié).

Le FlickrBombImage

En remontant, nous avons besoin d'un autre modèle pour représenter l'image d'espace réservé, qui consistera en une collection d'images Flickr, et l'image Flickr actuelle qui a été sélectionnée. Nous appellerons ce modèle FlickrBombImage.

Étant donné que ce modèle est responsable du suivi de l'image actuellement sélectionnée entre les chargements de page, il doit savoir quel magasin de stockage local utiliser.La première ligne garantira la prise en charge du stockage local, puis créera le magasin que nous utiliserons pour conserver l'image sélectionnée.

Backbone nous permet de définir une fonction .initialize () qui sera appelée lors de la création d'une instance du modèle. Nous utilisons cette fonction dans FlickrBombImage pour créer une nouvelle instance de la collection FlickrImages, transmettre les mots-clés qui seront utilisés pour cette image, puis récupérer les images de Flickr.

La fonction .loadFirstImage () a été passée comme rappel à exécuter lorsque les images ont été chargées depuis Flickr. Comme vous pouvez probablement le deviner, cette fonction définit l'image actuelle comme la première de la collection de Flickr. Il ne le fait pas si l'image actuelle a déjà été définie.

Nous allons également utiliser les rappels d'attributs de Backbone pour déclencher notre fonction .changeSrc () lorsque l'attribut src de ce modèle change. Tout ce que fait ce rappel est d'appeler .save (), une fonction de modèle de Backbone qui persiste les attributs du modèle à n'importe quelle couche de stockage a été implémentée (dans notre cas, localstore). De cette façon, chaque fois que l'image sélectionnée est modifiée, elle est immédiatement conservée.

Le calque de vue

Maintenant que nous avons écrit tout le code backend (enfin, frontend backend), nous pouvons rassembler les vues. Les vues dans Backbone sont un peu différentes de celles des autres frameworks MVC traditionnels. Alors qu'une vue ne concerne généralement que la présentation, une vue Backbone est également responsable du comportement. Cela signifie que votre vue définit non seulement à quoi ressemble quelque chose, mais également ce qu'il doit faire en cas d'interaction.

Une vue est généralement (mais pas toujours) liée à certaines données et passe par trois phases pour générer un balisage de présentation à partir de ces données:

1. L'objet View est initialisé et un élément vide est créé.
2. La fonction de rendu est appelée, générant le balisage de la vue en l'insérant dans l'élément créé à l'étape précédente.
3. L'élément est attaché au DOM.

Cela peut sembler beaucoup de travail pour générer du balisage, et nous n'en sommes même pas encore à la partie comportement de la vue, mais c'est important, et voici pourquoi. Chaque fois que vous modifiez des éléments qui se trouvent dans le DOM, vous déclenchez quelque chose appelé une redistribution du navigateur. Une redistribution est le navigateur qui recalcule la façon dont chaque élément de la page est positionné. Les redistributions du navigateur peuvent nuire aux performances si elles sont appelées dans un événement de glisser ou de redimensionner, qui se déclenche à un intervalle très court, mais pire, elles semblent bâclées. Avec une manipulation de page complexe, vous pouvez en fait voir les éléments ajoutés à la page et effectuer le repositionnement des éléments. En suivant le modèle d'initialisation, de rendu et d'attachement de Backbone, vous garantissez une seule redistribution et les modifications apportées à la page seront instantanément perceptibles, quelle que soit la complexité de la manipulation des éléments.

Le FlickrBombImageView

Les fonctions de cette vue ont été omises par souci de concision, le code source dans son intégralité est disponible sur GitHub: github.com/zurb/flickrbomb

En haut de la vue, nous avons quelques attributs spécifiques à Backbone. tagName et className sont utilisés pour définir la balise et la classe qui seront appliquées à l'élément de cette vue. N'oubliez pas que la première étape de la création de View consiste à créer un objet, et puisque cette création est gérée par Backbone, nous devons spécifier l'élément et la classe. Notez que Backbone a des valeurs par défaut sensibles; si nous omettons ces attributs, un div est utilisé par défaut, et aucune classe ne sera appliquée à moins que vous n'en spécifiiez un.

L'attribut de modèle est une convention, mais pas obligatoire. Nous l'utilisons ici pour spécifier la fonction de modèle JavaScript que nous utiliserons pour générer notre balisage pour cette vue. Nous utilisons la fonction _.template () incluse dans Underscore.js, mais vous pouvez utiliser le moteur de création de modèles que vous préférez, nous ne vous jugerons pas.

Dans notre fonction .initialize (), nous extrayons la chaîne de mots-clés de la balise d'image, puis créons un modèle FlickrBombImage en utilisant ces mots-clés. Nous lions également la fonction .addImage () à exécuter lorsqu'une FlickrImage est ajoutée à la collection FlickrImages. Cette fonction ajoutera la FlickrImage nouvellement ajoutée à notre menu déroulant de sélection d'image. La dernière et la plus importante ligne lie la fonction .updateSrc () à se déclencher lorsque l'image Flickr actuellement sélectionnée est modifiée. Lorsque l'image actuelle est modifiée dans le modèle, cette fonction s'exécute, met à jour l'attribut src de l'élément d'image, et redimensionne et recadre l'image CSS pour qu'elle corresponde aux dimensions de l'image spécifiées par l'utilisateur.

événements: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}

Après .initialize (), nous avons la partie comportement de la vue. Backbone fournit un moyen pratique de lier des événements à l'aide d'un objet d'événements. L'objet events utilise la méthode jQuery .delegate () pour effectuer la liaison réelle avec l'élément View, de sorte que, quelle que soit la manipulation que vous effectuez sur l'élément à l'intérieur de la vue, tous vos événements liés fonctionnent toujours. Cela fonctionne exactement comme jQuery .live (), sauf qu'au lieu de lier des événements à l'ensemble du document, vous pouvez les lier dans la portée de n'importe quel élément. La clé de chaque entrée dans l'objet d'événements se compose de l'événement et du sélecteur, la valeur indique la fonction qui doit être liée à cet événement. Notez que .delegate () ne fonctionne pas avec certains événements comme submit, consultez la documentation de jQuery .live () pour une liste complète des événements pris en charge.

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); renvoyer ceci;}

Enfin, nous avons la fonction .render () qui est responsable de la création de notre balisage et de tout travail supplémentaire qui ne peut pas être effectué tant que le balisage View n'a pas été ajouté à l'élément View. Après avoir rendu notre modèle, nous devons appeler .fetch () sur notre FlickrBombImage. .fetch () est une fonction Backbone qui récupère la dernière copie du modèle à partir de la couche de persistance. Si nous avions enregistré ce modèle auparavant, .fetch () récupérerait ces données maintenant. Une fois l'image récupérée, nous devons appeler resize pour la positionner correctement.

L'étirement à la maison

Avec toutes les pièces en place, tout ce que nous devons faire maintenant est de trouver les images d'espace réservé sur la page et de les remplacer par les vues FlickrBombImage rendues.

$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});

Ce petit extrait doit être exécuté au bas de la page, ou dans un rappel de document prêt, pour s'assurer qu'il peut trouver les images d'espace réservé qu'il remplacera. Nous utilisons la convention de spécifier flickr: // [KEYWORD] dans l'attribut src d'une balise d'image pour indiquer qu'elle doit être remplie avec des images de Flickr. Nous trouvons des éléments d'image avec un attribut src correspondant, créons un nouveau FlickrBombImageView, puis remplaçons l'image par la nôtre. Nous récupérons une copie de l'image originale et la passons à notre FlickrBombView, afin de pouvoir extraire des options de configuration supplémentaires qui peuvent avoir été spécifiées sur l'élément.

Le résultat final de tout ce travail acharné est une API très simple pour les utilisateurs de la bibliothèque. Ils peuvent simplement définir des balises d'image à l'aide de la convention flickr: //, déposer le code FlickrBomb au bas de leur page, et bam, ils ont des images d'espace réservé de Flickr.

Fonctionne également très bien avec les grandes applications Web

Nous avons une grande application Web appelée Notable, qui a été écrite sans souci de générer du contenu côté client. Lorsque nous voulions rendre des sections de l'application turbo chargées en générant du contenu côté client, nous avons choisi Backbone. Les raisons étaient les mêmes: nous voulions un framework léger pour aider à garder le code organisé, mais pas nous forcer à repenser l'ensemble de l'application.

Nous avons lancé les changements plus tôt cette année avec un grand succès, et depuis lors, nous avons fait l'éloge de Backbones.

Ressources supplémentaires

Il y a beaucoup plus à Backbone que ce que j'ai couvert dans cet article, la partie C (contrôleur) de MVC (contrôleur de vue modèle) pour les débutants, qui est en fait un R (routeur) dans la dernière version. Et tout est couvert dans la documentation de Backbone, un samedi matin léger:
documentcloud.github.com/backbone/

Si vous préférez des didacticiels plus traditionnels, consultez le code très bien documenté de cette application todo écrite en Backbone:
documentcloud.github.com/backbone/docs/todos.html

Article Précédent