10 applications Web créées avec Backbone.js [Étude de cas]

Avez-vous déjà été mêlé au code des spaghettis? Préféreriez-vous nourrir votre application quelque chose de plus sain? Si tel est le cas, jetez un coup d’œil à ce qui peut être accompli avec Backbone.js. Colonne vertébrale est une bibliothèque JavaScript qui est vaguement basée sur le modèle de conception Model-View-Controller mais comme il lui manque l'élément Controller, il est préférable de l'appeler un framework MV *.

Cela vous aide à construire rapide, élégant et riche en données applications Web d'une seule page, conserve votre logique de données séparée de votre interface utilisateur, vous évite d’attacher vos données au DOM, et balance à mesure que votre application grandit. Comme Backbone se synchronise avec toute API RESTful par défaut, vous pouvez facilement connecter votre application côté client à votre API existante côté serveur via une interface JSON RESTful..

Dans cet article, nous étudierons 10 applications Web qui utilisent les fonctionnalités de la bibliothèque Backbone pour vous aider à saisir le potentiel de Backbone.js pour vos futurs projets d'applications Web..

1. Trello

Trello est une application de collaboration en ligne et de gestion de projets qui vous aide à organiser vos projets en tableaux, listes de contrôle, cartes, listes de cartes et vous fournit des outils tels que des conversations pour la communication entre membres de l'équipe..

Trello a été construit à partir de zéro avec Backbone.js. Backbone fonctionne avec l'API de l'historique HTML5 et le langage de modélisation sans logique Moustache sur le front-end. Tous les éléments de la pile Trello Tech ont été conçus de manière à créer une client maintenable qui gère facilement les mises à jour, et se synchronise dynamiquement avec le serveur chaque fois qu'un événement DOM est déclenché.

Trello utilise le modèle de réseau principal et les vues pour ses objets tels que les cartes ou les membres et les collections de réseau principal pour les modèles associés, par exemple les cartes dans une liste. Les développeurs ont également construit leur propre cache modèle côté client pour mises à jour plus rapides et plus réutilisation efficace du code.

2. Foursquare

Vous avez probablement déjà entendu parler de Foursquare, l'application de réseautage social populaire basée sur la localisation qui vous permet de partager des lieux avec vos amis à travers le monde.

L’API JavaScript de base de Foursquare s’articule autour de modèles Backbone, dans lesquels Classes modèles de l'API Foursquare (tels que Utilisateurs, Lieux et Archivages) sont les sous-classes des classes Backbone Model et hériter de leurs méthodes et propriétés.

L'implémentation du code peut être esquissée comme ceci: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Oui, c'est vrai, Backbone permet aux développeurs de écrire de jolis JavaScript orienté objet.

Les vues de réseau ont également leur rôle dans l'application Foursquare, car elles améliorent l'expérience utilisateur avec des fonctionnalités telles que cartes et listes de la page d'accueil. Outre Backbone, l’API JavaScript de Foursquare utilise également jQuery, Underscore.js (qui est la seule dépendance dure de Backbone), et le compilateur Closure.

3. Calendrier Basecamp

Camp de base, la célèbre application de gestion de projet utilise Backbone.js pour sa fonctionnalité Agenda.

Le principal objectif de Basecamp Calendar en matière de conception était de créer une interface interactive planification de groupe intuitive possible, et se met à jour en millisecondes. Dans Basecamp Calendar Backbone convertit les vues en modèles ECO (Embedded CoffeeScript) à chaque mise à jour des modèles (données côté client)..

Il est intéressant de noter que l'équipe de développeurs n'a pas fait de Basecamp tout entier une application d'une seule page, ce qui constitue le principal cas d'utilisation de Backbone.js, mais qu'elle n'a utilisé que la bibliothèque de la fonction Calendrier, où elle pourrait vraiment exploiter ses avantages. Cela montre simplement que vous n'avez pas nécessairement besoin de créer une application complète d'une page avec Backbone; il est préférable de bien réfléchir à l'endroit où il peut être appliqué.

En savoir plus sur les anti-modèles de Backbone pour décider si vous avez besoin ou non de Backbone pour l'ensemble de votre application..

4. Flowdock

Flowdock est une application de communication d'équipe en temps réel qui vous fournit des fonctionnalités telles que la discussion en groupe, les boîtes de réception des équipes et les flux de travail en temps réel.

Flowdock a été construit à partir du sol sur Backbone.js. Le principal défi de l’équipe de développement consistait à activer les messages et les flux de travail en temps réel. Par défaut, Backbone.js se connecte au serveur via une interface RESTful, ce qui ne permet pas le flux de données en temps réel. Donc les devs décidé de sauvegarder les messages via le moteur temps réel Socket.io au lieu de l'API REST.

Pour y parvenir, ils a écrit une méthode personnalisée appelé Backbone.sync. Comme Socket.io est également une bibliothèque JavaScript, la communication entre l’interface et le backend (Node.js) gérée par JavaScript est transparente. Flowdock est principalement une application Rails côté serveur, mais ils ont un backend Node.js distinct qui gère les connexions Socket.io..

Flowdock améliore l'expérience utilisateur en temps réel encore plus avec Bacon.js, une bibliothèque JavaScript très pratique qui permet une programmation réactive fonctionnelle. La fonctionnalité EventStreams de Bacon.js aide Flowdock à mettre à jour son modèle de base et ses collections.

5. Recherche de cocktail

Recherche de cocktail est une application open source qui vous donne l'occasion de jeter un coup d'œil sur le code d'une implémentation très simple de Backbone.js. Le backend est alimenté par Python, mais ce qui nous intéresse, c’est le fichier script.js de l'application.

Si vous examinez le code, vous pouvez voir une structure très basique du framework Model-View- *: il en contient un Modèle défini dans le Cocktail classe qui ne modifie pas les paramètres par défaut de la classe parente Backbone.Model, une Collection dorsale pour les résultats de recherche et 3 vues de réseau principal, chacune ajoute de nouvelles méthodes à la Backbone.View classe parent.

Si vous examinez le fichier index.html, vous pourrez découvrir comment le développeur a ajouté Backbone.js et ses dépendances., Underscore.js et jQuery dans la section principale. Underscore.js est la seule dépendance difficile de Backbone alors que jQuery est nécessaire si vous voulez manipuler le DOM avec l'aide de Backbone Views (ce qui est le cas de l'application Cocktail Search).

6. Bitbucket

Bitbucket est une application d'hébergement et de gestion de code source similaire à Github. Atlassian, la société derrière elle, utilise Backbone dans le logiciel de suivi des problèmes commerciaux de JIRA, leur autre produit principal.

Au cours de l'utilisation approfondie de Backbone.js dans leurs applications, l'équipe de développement a découvert un ou deux éléments manquants dans Backbone. Ils ont rencontré beaucoup d'échecs silencieux causés par les conventions de définition lâches de Backbone.js. Cela signifie essentiellement que les modèles, collections et vues ne définissent pas nécessairement les événements personnalisés qu'ils exposent. Et si cela ne suffisait pas, les modèles ne définissent même pas toujours la les attributs ils exposent.

Cette nature permissive est une fonctionnalité appréciée de nombreux développeurs mais non de l'équipe d'Atlassian. Ils ont donc développé leur propre extension Backbone, appelée Backbone.Brace ajoute des mixins et des attributs et événements auto-documentés à la bibliothèque.

Si vous êtes agacé par la même chose, vous pouvez ajouter Backbone.Brace à votre propre application, car il s'agit d'un projet open-source hébergé sur Bitbucket lui-même. BitBucket utilise le langage de gabarit Moustache, tout comme Trello, pour le rendu des vues Backbone sur le front-end..

7. SoundCloud

SoundCloud est une plate-forme de distribution audio populaire sur laquelle vous pouvez enregistrer, télécharger et partager vos propres fichiers audio ou écouter de la musique gratuitement.

Les développeurs de SoundCloud ont d'abord utilisé Backbone.js comme cadre frontal de leur application mobile, mais ils l'aimaient tellement qu'ils l'utilisaient également du côté client de leur site Web. Dans leur blog Backstage, ils expliquent leur choix de framework avec la capacité de Backbone à fournir une base structurelle solide tout en restant flexible.

La mise à l'échelle est une préoccupation majeure pour une application de diffusion audio en continu, et SoundCloud reconnaît “a plus à voir avec l'organisation que la mise en œuvre” ce qui rend le Backbone bien organisé mais léger un choix idéal pour eux.

SoundCloud utilise le système de modèles sémantiques du guidon pour restituer des vues de circuit principal sur le front-end.

8. AirBnB

AirBnB est un marché communautaire au succès incroyable où vous pouvez trouver et réserver différents types d'hébergement dans près de 200 pays du monde entier

AirBnB a tout d’abord utilisé Backbone.js dans son application mobile, à l’instar de SoundCloud, avant de l’utiliser de plus en plus dans ses applications Web telles que Wishlists, Match, Recherche, Communautés et Paiements. AirBnB a tellement aimé Backbone qu’ils ne se sont pas contentés de l’utiliser sur le front-end, mais ont également voulu rendre possible l’exploitation de la bibliothèque sur le backend..

Ils plus tard ont créé leur bibliothèque Backbone côté serveur, Rendr, open source et disponible sur leur page Github. Rendr est écrit en Node.js et suit la philosophie de “structure minimale imposante, permettant au développeur d'utiliser la bibliothèque de la manière la plus appropriée pour son application” tout comme Backbone

Si vous êtes plus intéressé par la technologie d'AirBnB, lisez leur billet de blog sur leur voyage depuis le backend de Rails jusqu'au Saint Graal du Utilisation simultanée de Backbone côté client et côté serveur.

9. Hulu

Hulu est une application de streaming vidéo qui vous permet de regarder des émissions de télévision et des films gratuitement, si vous vous trouvez aux États-Unis..

Hulu a utilisé Backbone.js pour créer une expérience utilisateur transparente et rapide pour les cinéphiles. L'interface vous permet de naviguer rapidement dans l'application avec des transitions douces lorsque vous naviguez. Colonne vertébrale économise de la bande passante pour les utilisateurs comme des scripts et des vidéos intégrées ne pas se recharger tout le temps.

Hulu exécute un moteur Rails sur le backend, et si vous aimez les discussions amusantes mais instructives, vous pouvez en savoir plus sur comment l'équipe de développeurs s'est empêtrée dans jQuery avant de finalement décider de passer à la cadre Backbone plus organisé.

Backbone.js a autorisé Hulu à convertir progressivement leur rendu côté serveur en côté client au lieu de faire une réécriture risquée de leur backend Rails existant.

10. Contre

Comte est une application d'analyse mobile en temps réel qui vous permet de suivre les performances de votre application iPhone, Android ou Windows Phone directement depuis la fenêtre du navigateur..

Jetez un coup d'œil à la liste remarquable de logiciels open source utilisés pour développer la plate-forme, y compris les superstars de ces dernières années: Nginx, MongoDB, Node.js pour le côté serveur et bien sûr Backbone.js pour l'interface.

Countly utilise la bibliothèque de modèles sémantiques Handlebars pour restituer des vues Backbone qui affichent des données préparées et chargées avec des modèles Backbone. Countly est une application conviviale pour les développeurs: non seulement elle est facilement extensible, mais sa documentation fournit également aux développeurs des tutoriels comme celui-ci sur: comment construire des plugins personnalisés sur le client principal Backbone.

Note de l'éditeur: Ceci est écrit par Anna Monus pour Hongkiat.com. Anna est une développeur Web et une rédactrice de code qui s'intéresse à la science, à l'intelligence artificielle et aux technologies perturbatrices..