Quelles sont les forces et les faiblesses de la de nombreux cadres basé sur backbone.js?

Question

Espérons que quelqu'un peut partager son expérience avec certains des plus récents backbone.js les variantes. J'ai une bonne expérience avec backbone/souligner/exiger dans plusieurs projets et j'aimerai prendre la prochaine étape vers des solutions les plus avancées pour les applications complexes de la structure.

Je sais que les cadres suivants sont disponibles:

• Marionnette
• Geppetto (basé sur la Marionnette)
• Chaplin, Chaplin - charlie chaplin-réutilisable
• Vertèbres
• LayoutManager
• Thorax
• Aura
• Luca
• Singool
• backstack
• Épine dorsale de l'INTERFACE utilisateur

• hulk

• BTW - excellent point de départ pour un projet de grande ampleur

Et probablement que j'ai manqué un peu.

Il y a une courte introduction sur les différences ici:

• https://speakerdeck.com/u/molily/p/application-frameworks-on-top-of-backbonejs-talk-at-appsberlinjs

mais c'est très général. Je me demandais si quelqu'un peut partager son expérience avec la vie réelle des applications à l'aide de ces cadres.

Quel est l'avantage de choisir l'un plutôt que l'autre? Quand la marionnette être une meilleure solution, plus de chaplin, ou pourquoi est-vetebrae mieux pour certaines applications, par exemple.

Bien sûr, la réponse la plus évidente sera "utilisez quoi de mieux pour vos besoins", mais je manque d'expérience avec ces cadres de connaitre leur force/but/avantages ou privilégiées scénarios.

Merci!

Edit 1: trouvé ce post: De la colonne vertébrale.Marionnette vs épine Dorsale Standard

Edit 2: *Réponse de Mathias schafer (Chaplin) par mail:*

En bref, la structure actuelle est proche de la version 1.0, puisqu'elle est déjà utilisée dans la production. Nous ne sommes pas l'intention d'ajouter de nouvelles fonctionnalité ou de la rupture de changements de l'API jusqu'à 1.0.

La marionnette est certainement le plus complet et stable de la bibliothèque. Il aborde plusieurs aspects de la JS développement d'une application avec la colonne vertébrale. Par exemple, il a une forte couche de la vue qui épine Dorsale elle-même se laisse complètement vide. Bien sûr, vous allez trouver que certains aspects ne seront pas répondre à vos demandes et vous pourriez vous sentir la nécessité de mettre en place une structure autour de la Marionnette.

En revanche, Chaplin met l'accent sur une assez petite, mais très important aspect de l'épine Dorsale apps, à savoir l'ensemble de l'application de la structure et du module du cycle de vie. À cet égard, Chaplin est très opionated et est plus comme un cadre qu'une bibliothèque (comme dans "votre code appelle une bibliothèque, d'un cadre d'appels de votre code"). Chaplin fournit certaines classes qui se situent au-dessus individuelle des modules de l'application et de contrôle de l'ensemble de l'état d'application. Ce qui donne à votre application une structure classique comme Ruby on Rails-t-il pour exemple.

Dans Chaplin, vous déclarez certaines routes de la carte pour les contrôleurs, et Chaplin commence le contrôleur une fois l'itinéraire de match. Il s'occupe aussi de l'élimination des anciens contrôleurs, et de le montrer et de cacher des principaux points de vue, un contrôleur est censé créer. C'est l'idée de base, mais Chaplin prend soin de le laid détails pour faire de cette course en douceur.

Il existe deux principaux qui viennent avec cette structure: - La modularisation, le découplage et le bac à sable - Croix-module de communication à l'aide de Publier/Souscrire et de Médiateur(s)

Bien sûr, ces modèles ne sont pas nouvelles dans le développement de logiciels du monde, et Chaplin n'est pas la seule bibliothèque qui s'applique à Backbone.js des apps.

Chaplin fournit également des améliorations pour la couche de la Vue, par exemple un très sophistiqué CollectionView, mais pas autant que la Marionnette avec ses Régions et de ses Mises en page. Mais il est relativement facile d'écrire de telles méta-classes, en utilisant les moyens Chaplin Vues.

Answer 1

Je suis actuellement en utilisant la colonne vertébrale avec le gestionnaire de configuration de module et le guidon comme moteur de template et je l'ai trouvé vraiment facile à mettre en place une petite application à l'aide d'un déjà existant Graal backend. Avant de commencer à l'aide de gestionnaire de présentation que j'ai lu sur la Marionnette et Chaplin et les deux me semblait vraiment puissant, mais complexe. Puis je me suis souvenu pourquoi j'ai d'abord choisi backbone.js: la simplicité. Tous ces cadres sont l'ajout de ce squelette a laissé de côté par la conception. Je ne dis pas qu'un cadre est mauvais, mais si j'ai besoin de quelque chose de plus complexe, je vais essayer d'autres projets, comme ember.js ou sproutcore, car ils ont une base de code unique, écrit avec un but dans l'esprit de leurs concepteurs. Ici, nous avons des cadres sur le dessus de l'autre. Bien sûr, la charpente est l'ossature, non seulement pour les applications du bâtiment, mais aussi pour l'écriture de certains plus puissant de la bibliothèque, mais la seule chose que je pense est vraiment pauvre, c'est de la couche de la vue, car il manque un gestionnaire de mise en page et la possibilité de nidification des points de vue. Avec le gestionnaire de configuration qui n'est pas comblé assez bien.

Donc, ma réponse à votre question est: début de l'utilisation de la dorsale est, et demandez-vous quelle est manquant, et quelles sont vos attentes sur le cadre. Si vous trouvez qu'il y a trop de choses à gauche par colonne vertébrale, puis aller les chercher dans les autres cadres et de choisir celui qui est le plus proche de vos besoins. Et Si vous n'êtes toujours pas convaincu dans le choix, peut-être l'épine dorsale n'est pas pour vous et vous devez chercher une autre solution (ember.js, sproutcore, ExtJs, JavaScript MVC sont tous bons). Si vous avez de l'expérience dans l'écriture d'applications clients, vous n'avez pas vraiment besoin de l'expérience sur tout le framework là-bas pour choisir celui de droite (pour vous, bien sûr)

Answer 2

J'ai étudié les différents cadres de construire avec Backbone.js et construit les Vertèbres pour un projet à HauteLook. Les objectifs du projet sont inclus... dynamique script de chargement, AMD module de format, de gestion de la dépendance, de construire avec la plupart des bibliothèques open source, organiser le code en paquets, d'optimiser et de construire pour une ou plusieurs single page apps, hôte sur la pleine mise en cache du serveur, par exemple, pas de script côté serveur en utilisant seulement une API pour les données, et le plus amusant, pour moi, l'utilisation de comportement conduit au développement du projet. Il y a une description du projet : http://www.hautelooktech.com/2012/05/24/vertebrae-front-end-framework-built-with-backbone-js-and-requirejs-using-amd/

Notre Problème:

Sélectionné librairies (jQuery, Underscore.js, Backbone.js, RequireJS, Moustache) fournir le module de chargement, de la gestion de la dépendance, de la structure de la demande (pour les modèles, des collections, des vues et des routes), asynchrone interactions avec les API, les différents services publics et des objets pour gérer les comportements asynchrones, par exemple (Promesses) Deferreds, les Callbacks. Le reste logique nécessaire pour compléter le cadre comprend:

• un objet (model) pour la gestion de l'état de la seule page de l'application;
• un gestionnaire de présentation pour présenter, organiser/transition et de points de vue clairement, et
• les contrôleurs qui répondent aux itinéraires, obtenir/définir l'état de l'application, et de la main d'un arrêt de travail à la disposition du gestionnaire.

Nos Solutions (mise en œuvre dans les Vertèbres):

L'État De L'Application Manager -

Le gestionnaire de l'application stocke les données en mémoire et persiste également des données dans le navigateur de stockage pour fournir une ressource pour la commune de données/métadonnées. Fournit également des données (état) afin de reconstruire la page des vues basées sur les interactions (par exemple, l'onglet sélectionné, les filtres appliqués). L'état de l'application manager fournit une stratégie pour les ressources à récupérer de l'etat. Conçu pour agir comme une machine d'état.

Le Gestionnaire De Configuration -

Le layout manager dispose d'un ou de plusieurs points de vue ainsi que le document (DOM) les destinations pour chaque (rendu). Une page de transition entre le nombre de vues, de sorte que le gestionnaire de mise en page permet de suivre des états d'affichage, par exemple, rendu, pas-rendus, affiche, pas affichées. Vous pouvez utiliser le gestionnaire de présentation charge paresseux et render (détaché) qu'un visiteur du site est très probablement à la demande, par exemple, l'onglet modifications sur une page. La transition entre les états d'affichage est gérée par cet objet. Toute une mise en page peut être désactivée afin que la vue des objets et de leurs liaisons sont supprimés, la préparation de ces objets pour la collecte des déchets (prévention des fuites de mémoire). Le layout manager communique aussi de l'état d'affichage avec le contrôleur(s).

Contrôleur -

Un objet contrôleur est appelé par un itinéraire en fonction de gestionnaire, et est responsable de l'obtention de l'état concernés (modèles d'application) pour générer une page (layout), (également responsable de la mise en état lors de la modification de parcours). Le contrôleur transmet les données dépendantes (modèles/collections) et construit de visualiser les objets pour une demande de page à la disposition du gestionnaire. Comme un effet secondaire de l'utilisation de contrôleurs empêche les routes de l'objet de devenir pléthorique et emmêlés. Un itinéraire doit correspondre à un contrôleur qui intervient puis désactiver l'affichage de la page, en gardant la route des fonctions de gestion lean.

Todos application est hébergée à la fois en dev mode et optimisé sur Heroku...

• http://vertebrae-framework.herokuapp.com/
• http://vertebrae-optimized.herokuapp.com/

De nombreux concepts dans les autres cadres sont empruntés, par exemple la nécessité de destory vues pour afficher l'aperçu des fuites de mémoire, comme l'a souligné Derick Bailey - http://lostechies.com/derickbailey/ ; le Layout Manager par Tim Branyen http://tbranyen.github.com/backbone.layoutmanager/

En résumé, Backbone.js est destiné à être un outil dans votre demande Backbone.js la bibliothèque ne fournissent pas toute l'architecture, vous aurez besoin de construire une application, mais ne fournissent de grandes interactions avec une API et une solide structure de code pour... Vues (loi comme les contrôleurs trop) et votre couche de données des Modèles et des Collections, et enfin les Routes. Nous avons construit des Vertèbres de la viande que les objectifs de notre projet, et a décidé d'extraire le code comme un cadre à utiliser pour les autres, d'apprendre, ou de quoi que ce soit.

La réponse à votre question, à mon avis, est d'apprendre de tous les cadres et utiliser ce que vous avez besoin pour atteindre vos objectifs, si vous trouvez que votre projet objectifs ajustement en étroite collaboration avec l'un des cadres construits avec l'épine Dorsale, puis une grande, sinon à construire votre propre cadre il y a de grands exemples partagé par la communauté. Ou si vous trouvez vous-même un peu perdu dans la direction de votre application, puis choisissez quelque chose de plus opiniâtre et structurée peut-être Ember.js. La grande chose est, il ya une bonne gamme de choix pour vous aider à code à l'aide d'un (MVX) comme le modèle MVC avec JavaScript.

Answer 3

J'ai développé le Luca cadre tout en travaillant à BenchPrep où nous l'avons utilisé pour développer plusieurs grandes single page apps sur le dessus de la backbone.js de la bibliothèque.

J'avais travaillé avec ExtJS pour plusieurs années auparavant et qui ont volé mon préféré des concepts à partir de ce cadre comme le composant driven architecture où vous développez votre point de vue comme composants autonomes et ensuite de se joindre à eux avec d'autres composants à l'aide de contenants points de vue. Et depuis, il est fortement basée sur la configuration, le développement d'une application de Luca se sent beaucoup comme décrivant un objet JSON.

Un avantage de cette approche est la possibilité de réutiliser des composants à travers plusieurs applications ou à des endroits différents dans votre application, avec seulement des modifications mineures à l'aide épine Dorsale de l'étendre. Il est également très facile d'expérimenter avec différentes mises en page / présentations de composants en faisant seulement quelques changements mineurs à l'JSON de configuration.

En plus d'une large gamme de helper / fonctions de l'utilitaire, Luca est livré avec de nombreux niveau supérieur de la Dorsale de produits dérivés que vous pouvez regrouper en quelque sorte imagineable de construire une INTERFACE utilisateur complexe.

Points De Vue, Des Composants, Des Conteneurs

• Augmentée Modèle, la Vue, la Collecte, le Routeur classes
• Les options de Configuration de faciliter la communication entre les Modèles, des Collections, de Vues, de l'Application et de ses directeurs.
• Les Conteneurs ( Split / Mise En Page En Colonnes, Grille De Mise En Page, Onglet Affichage, La Carte De L'Assistant De Vue )
• FormView avec tous de la norme sur le terrain, et des aides pour la synchronisation avec une colonne vertébrale.Modèle
• GridView, pour la génération de grille de défilement des éléments à partir d'un Luca.Collection
• CollectionView, pour générer des vues basées sur une collection
• Barres D'Outils / Boutons

Twitter Bootstrap Styles et de Balisage Pour Libre

• Luca joue très bien avec le Twitter bootstrap cadre. Tout simplement en définissant Luca.enableBootstrap = true, et notamment le CSS, vos composants ( tels que l'onglet points de vue, les barres d'outils, les boutons, les formulaires, les champs, les grilles, etc ) va automatiquement utiliser Twitter Bootstrap compatible balisage et de la classe CSS conventions.
• Utilise le système de Grille de mise en page, et répond à la plupart de l'amorçage de la base de classes css dans une manière intelligente
• Luca.Fenêtre d'affichage et GridLayout composants sont configurés pour fonctionner avec bootstrap réactif, fluide, ou statique des systèmes de grille.
• Vise à fournir un-à-un match pour twitter bootstrap composants, de les représenter comme configurable épine Dorsale Vues

Le Composant De L'Application

• De la colonne vertébrale.Modèle de l'état de l'appareil permet de getter / setter et la modification de l'attribut d'événements comme un style de demande de contrôle de flux
• Le Contrôleur intégré de composants qui cache / montre des pages de l'application en réponse à la colonne vertébrale.Routeur ou de l'État de la Machine événements
• Intégré un Gestionnaire de Collection qui garde la trace des collections que vous avez créé, vous permet de portée eux, de les grouper, de les assigner les paramètres par défaut pour eux
• Une Prise Manager qui est une couche d'abstraction sur websocket services qui fait pousser aussi facile que l'épine Dorsale.L'événement
• Un Événement de Clavier routeur qui déclenche nommé événements importants composants de soins pour répondre à de tels événements

De collecte et d'Améliorations apportées au Modèle

• Les Collections sont basées sur l' épine dorsale de la requête, qui fournit une interrogation de l'interface très similaire à mongoDb
• permettre à un local de stockage de la colonne vertébrale.synchroniser simplement par la mise en collection.localStorage = true
• remplissage automatique des collections dont les données est amorcé au chargement de la page
• mise en cache des méthodes / propriétés calculées. mettre en cache le résultat de méthodes de collecte, et viennent à échéance le cache en réponse à modifier / ajouter / supprimer des événements sur la collecte ou de ses modèles
• les propriétés calculées sur les modèles. construire des attributs basés sur des complexes de la fonction, et mettre à jour automatiquement la valeur calculée en réponse à des changements

Les événements et les Crochets

Luca composants sont plus libéraux, les événements qu'ils émettent par rapport au stock épine Dorsale des composants. Ils émettent des événements comme avant:initialiser, après:initialiser, avant d':render, après:render, d'activation, d'abord:l'activation, la désactivation, la première:la désactivation, et cela vous permet de régler finement le comportement de vos composants. De Plus, par la définition d'un événement dans l' @crochets de propriété sur votre point de vue, il appelle automatiquement un même nom que la fonction pour vous si il existe. Cela empêche beaucoup de rappel style code, qui améliore la lisibilité.

Vous pouvez également configurer le Luca.Les événements de la classe de publier les événements mondiaux de la publication / abonnement canal, ce qui rend la construction d'une grande application plus facile et le sida dans les inter module de communication.

Le Ruby Gem

Luca a été développé spécifiquement tout en travaillant contre les Rails et Sinatra Api et de ce fait est actuellement optimisé pour une pile, mais en aucune manière, vous enferme dans un serveur spécifique.

Luca vient distribué dans le cadre d'un Rubis Gemme configuré pour fonctionner sur l'asset pipeline, ou de télécharger un fichier JS.

Vous n'êtes pas obligé d'utiliser des Rails, ou Sinatra. Mais si vous le faites, j'ai compris beaucoup de choses utiles:

• Les fichiers avec l' .luca extension se faire traiter comme HAML avec JST style interpolation de variable. ( l'équivalent d' .jst.ejs.haml ) par l'asset pipeline
• Un Harnais de Test pour le navigateur, ou sans tête de Jasmin en fonction des Tests Unitaires avec beaucoup d'épine Dorsale et le trait de Soulignement de test des aides.
• Une API de point de terminaison pour l'ensemble d'outils de développement qui est livré avec Luca ( plus sur cela plus tard )
• Une API d'extrémité qui permet d'utiliser le Redis comme un schemaless moteur de stockage pour Luca.Collection avec une configuration minimale

Les Outils De Développement

• Luca applications peuvent permettre à un dans le navigateur coffeescript console avec Luca spécifiques d'aides et de commandes que l'aide à la surveillance, l'inspection, le débogage de Luca des applications et des composants

• Avec l'aide de la Gem Rails, et Luca est CodeMirror composant en fonction de l'éditeur, vous pouvez modifier le code source de l'Luca Cadre de l'application des composants spécifiques directement dans le navigateur, à l'aide de Coffeescript. Vous verrez une rétroaction immédiate en réponse à vos modifications, avec les instances de l'effectuées objets en cours d'actualisation avec la mise à jour de prototype, et vous pouvez enregistrer vos modifications sur le disque.

• Le Composant Testeur est un bac à sable pour jouer avec les composants de votre application dans l'isolement. Il vous fournit des outils pour la modification de la composante du prototype, la mise en place de ses dépendances, et la configuration du composant. Le composant va re-rendre immédiatement chaque fois que vous apportez une modification. Vous pouvez afficher et modifier le balisage que le composant génère, ainsi que le CSS directement dans le navigateur et de voir vos modifications immédiatement. Cela en fait un très précieux de l'expérimentation de l'outil.

• Le Composant Testeur va bientôt intégrer avec le Jasmin, vous pouvez visualiser les résultats de votre composant des tests unitaires en temps réel à mesure que vous modifiez le code de leurs

Luca est un travail en cours, mais maintient une API stable ( pas encore 1.0 ) et a été utilisé dans plusieurs grandes production des applications. C'est certainement un très opiniâtre cadre, mais je suis en train de le rendre plus modulaire. Je travaille activement sur la documentation et des échantillons de composants.

Answer 4

Je suis un co-auteur de Chaplin et j'ai écrit une comparaison approfondie entre les Chaplin.js et Marionette.js:

http://9elements.com/io/index.php/comparison-of-marionette-and-chaplin/

Ce n'est pas un "échange de tirs", mais tente d'expliquer les deux approches de façon équilibrée.