Was sind die wirklichen Stärken und Schwächen der vielen Frameworks, die auf backbone.js basieren?

Meisten (alle?) die Rahmenbedingungen, die Sie suchen, auf die gleichen Probleme lösen, aber Sie tun es in leicht unterschiedlicher Weise mit leicht unterschiedlichen Zielen.

Ich denke, es ist fair zu sagen, dass all diese Projekte würden die Probleme lösen, die in diese Kategorien:

• Eine vernünftige Standardwerte
• Verringern, boilerplate code
• Anwendung Struktur auf der Oberseite der BackboneJS Bausteine
• Extrahieren von mustern, die die Autoren verwenden in Ihren apps

Marionette, die ich habe, baut seit Dezember 2011, hat ein paar sehr unterschiedliche Ziele und ideale im Sinn, als gut:

• Composite application architecture
• Enterprise-messaging-Muster Einfluss
• Modularisierung Optionen
• Inkrementelle nutzen (kein alles-oder-nichts-Forderung)
• Keine server-lock-in
• Machen es einfach, ändern Sie die Standardeinstellungen
• Code configuration /Konfiguration

Ich sage nicht, dass keines der anderen frameworks haben die gleichen Ziele. Aber ich denke Marionette Einzigartigkeit kommt aus der Kombination dieser Ziele.

Composite Application Architecture

Ich verbrachte mehr als 5 Jahre Arbeitserfahrung in der thick-client, verteilte software-Systeme mit WinForms und C#. Ich integrierte apps für desktop, Notebook (smart-client), mobile Geräte und web-Anwendungen, die alle teilen ein Kern-Funktionsumfang und arbeitet mit den gleichen server-back-end mehrmals. In dieser Zeit habe ich gelernt, den Wert der Modularisierung und sehr schnell nach unten Weg von composite-application-design.

Ist die Grundidee zu "Komponieren" Ihre Anwendung runtime erleben und verarbeiten, aus vielen kleineren, einzelnen Stücke, die nicht unbedingt voneinander wissen. Sie registrieren sich mit der gesamten composite-Anwendung system, und legen Sie kommunizieren durch verschiedene Mittel der entkoppelten Nachrichten und Anrufe.

Ich geschrieben habe ein wenig über diese auf meinem blog, die Einführung Marionette als composite application architecture for Backbone:

• http://lostechies.com/derickbailey/2011/11/17/introduction-to-composite-javascript-apps/
• http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

Message Queues /Muster

Derselben großen Maßstab, verteilte Systeme nahm auch die Vorteile der message queuing, enterprise integration patterns (messaging patterns), und service-Busse, die Nachrichten verarbeiten. Dies, mehr als alles andere, hatte einen enormen Einfluss auf mein Ansatz für entkoppelte software-Entwicklung. Ich begann zu sehen, single-process, in-memory-WinForms-Anwendungen aus dieser Perspektive, und bald ist mein server-Seite und web-Anwendungs-Entwicklung nahm Einfluss aus.

Dieser hat direkt übersetzt sich in zu wie ich schauen Backbone-Applikation zu entwerfen. Ich biete ein event aggregator in Marionette, die sowohl für die high-level-Application-Objekt, und für jedes Modul, das Sie erstellen innerhalb der Anwendung.

Ich denke, über die Nachrichten, die ich schicken kann zwischen meine Module: Kommando-Nachrichten, event-Nachrichten, und vieles mehr. Ich denke auch über die server-Seite der Kommunikation Nachrichten mit dieser gleichen Muster. Einige der Muster haben Ihren Weg in Marionette schon, aber einige noch nicht.

• http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/
• http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/
• http://lostechies.com/derickbailey/2009/12/23/understanding-the-application-controller-through-object-messaging-patterns/ (WinForms code, aber immer noch zutreffend)

Modularisierung

Modularisierung von code ist enorm wichtig. Die kleinen, gut gekapselten Pakete, die einen einzigartigen Fokus mit gut definierten ein-und Ausspeisepunkte, ist ein muss für jedes system erheblicher Größe und Komplexität.

Marionette bietet die Modularisierung direkt durch module Definitionen. Aber ich habe auch erkennen, dass einige Leute wie RequireJS und verwenden möchten. So habe ich sowohl einen standard-build und ein RequireJS kompatible Version.

MyApp = new Backbone.Marionette.Application();

MyApp.module("MyModule", function(MyModule, MyApp, Backbone, Marionette, $, _){

  //your module code goes here

});

(Kein blog-post, die sich noch)

Inkrementelle Nutzen

Dies ist eine der zentralen Philosophien, die ich Backen in jedem Teil der Marionette, die ich kann: keine "alles-oder-nichts" Voraussetzung für die Nutzung von Marionette.

Rückgrat selbst dauert sehr inkrementellen und modularen Ansatz mit all seinen Baustein-Objekte. Sie sind frei zu wählen, welche Sie verwenden möchten, wenn. Ich glaube fest an dieses Prinzip, und danach Streben, um sicherzustellen Marionette funktioniert auf die gleiche Weise.

Zu diesem Zweck, die Mehrzahl der Stücke, die ich gebaut habe, in Marionette gebaut werden, allein zu stehen, um die Arbeit mit dem Kern Stück der Wirbelsäule, und zu arbeiten, gemeinsam noch besser.

Beispielsweise fast jeder Backbone-Anwendung muss dynamisch zeigen eine Backbone-view an einer bestimmten Stelle auf dem Bildschirm. Die apps müssen auch behandeln schließen von alten Ansichten und Reinigung-Speicher, wenn eine neue in Kraft gesetzt. Dies ist, wo die Marionette ist Region kommt ins Spiel. Eine region behandelt, die boilerplate-code zu ergreifen, ruft render auf es, und stopfte das Ergebnis in den DOM für Sie. Dann schließen, dass die anzeigen und reinigen Sie es für Sie, wenn Ihr Blick hat eine "close-Methode" auf.

MyApp.addRegions({
  someRegion: "#some-div"
});

MyApp.someRegion.show(new MyView());

Aber Sie sind nicht erforderlich, um Marionette, die Ansichten zur Nutzung einer region. Die einzige Voraussetzung ist, dass Sie den ausbau von Backbone.Ansicht an einem gewissen Punkt in der Prototypkette des Objekts ist. Wenn Sie wählen, um eine close Methode, eine onShow Methode oder eine andere Marionette der Region rufen für Sie an der richtigen Zeit.

• http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/
• http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

Keine Server-Lock-in

Ich Baue Backbone /Marionette apps auf einer breiten Vielzahl von server-Technologien:

• ASP.NET MVC
• Ruby on Rails
• Ruby /Sinatra
• NodeJS /ExpressJS
• PHP /Slim
• Java
• Erlang
• ... und mehr

JavaScript ist JavaScript, wenn es um die in einem browser ausgeführt wird. Server-side JavaScript ist Super, aber es hat null Auswirkung auf, wie Schreibe ich meine browser-basierte JavaScript.

Aufgrund der Vielfalt an Projekten, die ich gebaut und back-end-Technologien, die meine Kunden benutzen, ich kann nicht und wird nicht gesperrt Marionette in einem einzigen server-side-Technologie-stack aus irgendeinem Grund. Ich werde keinen boilerplate-Projekt. I nicht bieten ein ruby-gem oder ein npm-Paket. Ich möchte den Leuten zu verstehen, dass die Marionette nicht erforderlich, einen bestimmten back-end-server. Es ist browser-basierte JavaScript-back-end ist egal.

Natürlich unterstütze ich anderen Menschen, indem Sie Pakete für Ihre Sprache und framework. Ich Liste dieser Pakete im Wiki und hoffe, dass die Leute weiter bauen mehr Pakete, wie Sie sehen müssen. Das ist aber die Unterstützung der Gemeinschaft, nicht die direkte Unterstützung von Marionette.

• https://github.com/derickbailey/backbone.marionette/wiki/Available-packages

Einfach Die Standardwerte Zu Ändern,

In meinem Aufwand zu verringern, boilerplate code und geben vernünftige Standardwerte zu definieren (das ist eine Idee, die ich direkt "ausgeliehen" von Tim Branyen ist LayoutManager), erkenne ich die Notwendigkeit für andere Entwickler zu verwenden leicht unterschiedliche Implementierungen als ich.

Ich bieten rendering basierend auf inline - <script> tags für templates, mit Underscore.js Template standardmäßig. Aber Sie können ersetzen, die diesem durch die änderung der Renderer - und/oder TempalteCache Objekte in Marionette. Diese beiden Objekte stellen den Kern des rendering-Funktionen, und es gibt wiki-Seiten, die zeigen, wie dies zu ändern, für bestimmte Template-engines und unterschiedlichen Möglichkeiten zum laden von Vorlagen.

Mit v0.9 der Marionette, wird es sogar noch einfacher. Zum Beispiel, wenn Sie möchten, ersetzen Sie die Verwendung von inline-template-script blocks mit vor-kompilierten Vorlagen, die Sie nur zu ersetzen, eine Methode der Renderer:

Backbone.Marionette.Renderer.render = function(template, data){
  return template(data);
};

und nun auch die gesamte Anwendung vor-kompilierten Vorlagen, die Sie befestigen, um Ihre Ansicht template Attribut.

Ich auch eine Marionette.Async-add-on mit v0.9 zur Unterstützung von asynchron Rendern von views zu automatisieren. Ich ständig darum bemühen, dass es so einfach wie möglich zu ersetzen, um die Standard-Verhaltensweisen, die in der Marionette.

Code Als Konfiguration

Ich bin ein fan von "convention over configuration" in bestimmten Kontexten. Es ist eine leistungsstarke Möglichkeit, Sachen zu erledigen, und Marionette bietet ein wenig von diesem - wenn auch nicht allzu viel, ehrlich gesagt. Viele andere frameworks auch - vor allem-LayoutManager - mehr-Konvention über Konfiguration als Marionette tut.

Ist dies mit Zweck und Absicht.

Habe ich genug gebaut JavaScript-plugins, frameworks, add-ons und Applikationen zu wissen, die Schmerzen zu versuchen, um Konventionen zu arbeiten, in eine sinnvolle und schnelle Art und Weise. Dies kann mit der Geschwindigkeit, in der Regel aber auf Kosten des seins in der Lage, es zu ändern.

Zu diesem Zweck habe ich einen "code-Konfiguration" - Ansatz zur Marionette. Ich glaube nicht, eine Menge "Konfiguration" - APIs, wo man ein Objekt-literal mit statischen Werten, ändern Sie eine Schneise der Verhaltensweisen. Stattdessen dokumentieren Sie die Methoden, die jedes Objekt hat - sowohl durch die kommentierten source-code und über die tatsächlichen API-Dokumentation - mit der Absicht, Ihnen zu sagen, wie ändern Marionette zu arbeiten, wie Sie wollen.

Indem Sie eine saubere und klare API für die Marionette Gegenstände, die ich eine situation schaffen, wo Austausch, das Verhalten von einem bestimmten Objekt oder einer Marionette als ganzes ist relativ einfach und sehr flexibel. Opfere ich die "einfache" Konfiguration-API-Aufrufe für die Flexibilität der Bereitstellung Ihrer eigenen code, um Dinge zu machen, arbeiten in der Weise, dass Sie wollen.

Werden Sie nicht finden, eine "Konfiguration" oder "Optionen" - API, die Marionette. Aber Sie finden eine große Anzahl von Methoden, die alle dienen einem bestimmten Zweck, mit sauberen Signaturen, die es einfach zu ändern, wie Marionette funktioniert.

InformationsquelleAutor der Antwort Derick Bailey

Ich studiert habe die verschiedenen frameworks bauen mit Backbone.js und gebaut die Wirbel für ein Projekt bei HauteLook. Das Projekt Ziele enthalten... dynamisches Skript laden, AMD-Modul-format, dependency management, bauen mit meist open-source-Bibliotheken, organisieren-code in Pakete, zu optimieren und zu bauen für eine oder viele single-page-apps, - host an voll-Cache-server, z.B. keine server-side-scripting verwenden nur eine API für die Daten, und das lustigste für mich Verhalten driven development für das Projekt. Es ist eine Beschreibung des Projekts an : http://www.hautelooktech.com/2012/05/24/vertebrae-front-end-framework-built-with-backbone-js-and-requirejs-using-amd/

Unser Problem:

Ausgewählten Bibliotheken (jQuery, Underscore.js, Backbone.js, RequireJS, Schnurrbart) bieten das Modul geladen wird, dependency management, Applikations-Struktur (für Modelle, Sammlungen, Ansichten und Routen), asynchrone Interaktionen mit API, verschiedene Werkzeuge und Objekte zu verwalten asynchrone Verhalten, z.B. (Verspricht) Deferreds, Rückrufe. Die Verbleibende Logik zu vervollständigen, benötigen das framework umfasst:

• ein Objekt (Modell) für die Verwaltung der Zustand des single-page-Anwendung;
• layout-manager zum präsentieren, ordnen/übergangs-und klare Ansichten, und
• Steuerungen, die die Antworten zu den Strecken, die get/set-Status der Anwendung und die hand von arbeiten zu layout-manager.

Unsere Lösungen (implementiert in der Wirbelsäule):

Application State Manager -

Application manager speichert die Daten im Speicher und auch weiterhin Daten im browser Speicher zu einer Ressource für gemeinsame Daten/Metadaten. Auch stellt Daten (Zustand) zu rekonstruieren, die Seite Ansichten auf Basis der bisherigen Interaktionen (z.B. ausgewählte Registerkarte Filter angewendet). Die Anwendung Status-manager stellt eine Strategie für Ressourcen abrufen Staat. Bedeutete, zu handeln wie eine state machine.

Layout-Manager -

Den layout-manager hat einen oder viele Ansichten, als auch als Dokument (DOM) Reiseziele für jeden (gerendert) sehen. Eine Seite kann der übergang zwischen verschiedenen Ansichten, so dass der layout-manager keeps track of view Staaten, z.B. Leistungen, die nicht gerendert wird, angezeigt, nicht angezeigt. Sie können die layout-manager zu faul laden und Rendern (detached) Ansichten, die ein Website-Besucher ist sehr wahrscheinlich auf Anfrage, z.B. Registerkarte änderungen auf einer Seite. Der übergang zwischen den view states verwaltet wird dieses Objekt. Eine ganze Layouts können gelöscht werden, damit die view-Objekte und deren Bindungen werden entfernt, der Vorbereitung von Objekten für die garbage-collection (Vermeidung von memory-leaks). Der layout-manager kommuniziert auch view state mit controller(s).

Controller -

Einem controller-Objekt aufgerufen wird, eine route-handler-Funktion, und ist verantwortlich für das abrufen von relevanten staatlichen (Anwendung von Modellen) zum generieren einer Seite (layout), (auch verantwortlich für die Einrichtung des Staates, wenn sich Routen ändern). Der controller übergibt abhängigen Daten (Modelle/Kollektionen) und konstruiert Objekte anzeigen, die für eine angeforderte Seite auf dem layout-manager. Als ein Nebeneffekt der Verwendung von Controllern verhindert, dass die Routen-Objekt aus immer aufgedunsen und verwirrt. Eine route in der Karte ein controller, dann startet die Seite anzuzeigen, halten Sie die route-handling-Funktionen lehnen.

Todos app gehostet ist sowohl im dev-Modus und optimiert auf Heroku...

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

Viele der Konzepte, die in anderen Kontexten entliehen sind, so z.B. die Notwendigkeit zu destory Ansichten zur Vorschau von Speicher-Lecks wie bereits von Derick Bailey - http://lostechies.com/derickbailey/ ; die Layout-Manager von Tim Branyen http://tbranyen.github.com/backbone.layoutmanager/

In der Zusammenfassung, Backbone.js gemeint ist ein Werkzeug in Ihrer Anwendung der Backbone.js Bibliothek nicht alle der Architektur, die Sie benötigen, um eine Anwendung zu erstellen, aber Sie bietet tolle Interaktionen mit einer API und solide code-Struktur für... Views (act wie der Controller auch) und deine Daten-layer-Modelle und-Sammlungen, und schließlich Routen. Wir Bauten Wirbel Fleisch der Ziele unseres Projekts und beschlossen, extrahieren Sie den code als framework für andere einzusetzen, lernen, oder was auch immer.

Die Antwort auf deine Frage ist meiner Meinung nach zu lernen, aus aller frameworks und verwenden, was Sie brauchen, um Ihre Ziele zu erreichen, wenn Sie feststellen, dass Ihre Projektziele eng mit einem der frameworks gebaut, mit Rückgrat, dann Super, ansonsten Ihr eigenes framework gibt es tolle Beispiele werden mit der Gemeinschaft geteilt. Oder wenn Sie sich ein wenig verloren in der Richtung von Ihre Anwendung dann wählen Sie etwas mehr rechthaberisch und strukturierte vielleicht Ember.js. Das tolle ist, es gibt eine Menge von Möglichkeiten zu helfen, geben Sie den code mithilfe einer (MVX) MVC-Muster mit JavaScript.

InformationsquelleAutor der Antwort pixelhandler

Ich bin ein co-Autor von Chaplin und ich habe geschrieben einen umfangreichen Vergleich zwischen Chaplin.js und Marionette.js:

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

Dies ist nicht ein "shootout", sondern versucht zu erklären, beide Ansätze in einer ausgewogenen Weise.

InformationsquelleAutor der Antwort