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


Answers

Momentan verwende ich Backbone mit dem Layout-Manager-Modul und dem Lenker als Templating-Engine. Ich fand es sehr einfach, eine kleine Anwendung mit einem bereits vorhandenen Grails-Backend einzurichten. Bevor ich mit dem Layout-Manager begann, las ich über Marionette und Chaplin und beide schienen mir sehr mächtig, aber komplex. Dann fiel mir ein, warum ich ursprünglich backbone.js gewählt habe: Einfachheit. All diese Frameworks fügen hinzu, welches Backbone vom Design ausgeschlossen wurde. Ich sage nicht, dass ein Framework schlecht ist, aber wenn ich etwas Komplexeres brauche, probiere ich andere Projekte wie ember.js oder sproutcore aus, da sie eine einzigartige Codebase haben, geschrieben mit einem Ziel in den Köpfen ihrer Entwickler. Hier haben wir Frameworks über einem anderen. Natürlich ist das Backbone ein Rückgrat nicht nur für die Erstellung von Anwendungen, sondern auch für das Schreiben einer leistungsfähigeren Bibliothek, aber das einzige, was ich wirklich schlecht finde, ist die Ansichtsebene, da ein Layoutmanager und die Möglichkeit, Ansichten zu verschachteln, fehlt . Mit Layout-Manager ist diese Lücke recht gut gefüllt.

Meine Antwort auf Ihre Frage lautet also: Beginnen Sie damit, das Backbone zu verwenden, und fragen Sie sich, was fehlt und welche Erwartungen Sie an das Framework haben. Wenn Sie feststellen, dass zu viele Dinge vom Backbone ausgeschlossen sind, suchen Sie in den anderen Frameworks nach ihnen und wählen Sie dann die, die Ihren Anforderungen am nächsten kommt. Und wenn Sie immer noch nicht sicher in der Wahl sind, ist vielleicht Backbone nicht für Sie und Sie müssen eine andere Lösung suchen (ember.js, sproutcore, ExtJs, JavaScript MVC sind alle gut). Wenn Sie Erfahrung beim Schreiben von Client-Apps haben, brauchen Sie nicht wirklich Erfahrung im gesamten Framework, um den richtigen zu wählen (natürlich für Sie)

Question

Ich hoffe, dass jemand seine Erfahrung mit einigen der neuesten aufkommenden backbone.js-Varianten da draußen teilen kann. Ich habe einige gute Erfahrungen mit Backbone / Underscore / in mehreren Projekten gemacht und möchte den nächsten Schritt in Richtung fortgeschrittener Lösungen für komplexe Anwendungsstrukturen gehen.

Ich weiß, dass folgende Frameworks verfügbar sind:

Und wahrscheinlich habe ich ein paar verpasst.

Es gibt eine kurze Einführung über die Unterschiede hier:

aber es ist sehr allgemein. Ich habe mich gefragt, ob jemand seine Erfahrungen mit realen Anwendungen unter Verwendung dieser Frameworks teilen kann.

Was ist der Vorteil, wenn man sich für einen anderen entscheidet? Wann wird Marionette eine bessere Lösung als Chaplin sein, oder warum sind Veteranen besser für bestimmte Anwendungen, zum Beispiel.

Sicher, die offensichtliche Antwort lautet: " Nutze das Beste für deine Bedürfnisse ", aber ich habe keine Erfahrung mit diesen Frameworks, um ihre Stärke / ihren Zweck / ihre Vorteile oder bevorzugten Szenarien zu kennen.

Vielen Dank!

Edit 1: diesen Beitrag gefunden: Backbone.Marionette vs Backbone-Boilerplate

Edit 2: Antwort von Mathias schafer (Chaplin) per Post:

Kurz gesagt, die aktuelle Struktur ist der Version 1.0 nahe, da sie bereits in der Produktion verwendet wird. Wir planen nicht, große neue Features hinzuzufügen oder API-Änderungen bis 1.0 zu ändern.

Marionette ist mit Sicherheit die umfangreichste und stabilste Bibliothek auf dem Markt. Es behandelt mehrere Aspekte der JS-App-Entwicklung mit Backbone. Zum Beispiel hat es eine starke Sichtschicht, die Backbone selbst völlig leer lässt. Natürlich werden Sie feststellen, dass einige der Aspekte Ihren Anforderungen nicht gerecht werden und Sie vielleicht das Bedürfnis haben, eine Struktur um Marionette aufzubauen.

Im Gegensatz dazu konzentriert sich Chaplin auf einen eher kleinen, aber sehr wichtigen Aspekt von Backbone-Apps, nämlich die gesamte App-Struktur und den Modullebenszyklus. In dieser Hinsicht ist Chaplin sehr opioniert und ähnelt eher einem Framework als einer Bibliothek (wie in "Ihr Code ruft eine Bibliothek auf, ein Framework nennt Ihren Code"). Chaplin bietet einige zentrale Klassen, die über einzelnen Anwendungsmodulen liegen und den gesamten App-Status steuern. Dadurch erhält Ihre App eine herkömmliche Struktur wie zum Beispiel Ruby on Rails.

In Chaplin deklarieren Sie einige Routen, die Controllern zugeordnet sind, und Chaplin startet den Controller, sobald die Route übereinstimmt. Es kümmert sich auch um die Entsorgung von alten Controllern und das Anzeigen und Verbergen von Hauptansichten, die ein Controller erstellen soll. Das ist die Grundidee, aber Chaplin kümmert sich um die hässlichen Details, um den reibungslosen Ablauf zu gewährleisten.

Es gibt zwei Prinzipien, die mit dieser Struktur einhergehen: - Modularisierung, Entkopplung und Sandboxing - Modulübergreifende Kommunikation mit Publish / Subscribe und Mediator (s)

Natürlich sind diese Muster in der Softwareentwicklungswelt nicht neu, und Chaplin ist nicht die einzige Bibliothek, die sie auf Backbone.js Apps anwendet.

Chaplin bietet auch Verbesserungen für den View-Layer, zum Beispiel ein hochentwickeltes CollectionView, aber insgesamt nicht so viel wie Marionette mit seinen Regionen und Layouts. Aber es ist relativ einfach, solche Meta-Klassen mit den von Chaplin Views bereitgestellten Mitteln zu schreiben.




Ich habe das Luca Framework während der Arbeit bei BenchPrep entwickelt, wo wir es verwendet haben, um mehrere große Single-Page-Apps auf der Backbone.js Bibliothek zu entwickeln.

Ich hatte mehrere Jahre mit ExtJS gearbeitet und habe meine Lieblingskonzepte aus diesem Framework gestohlen, wie beispielsweise die komponentengesteuerte Architektur, in der Sie Ihre Ansichten als eigenständige Komponenten entwickeln und diese dann mithilfe von Containeransichten mit anderen Komponenten verbinden. Und da es stark auf der Konfiguration basiert, fühlt sich das Entwickeln einer App in Luca ähnlich wie das Beschreiben eines Objekts mit JSON an.

Ein Vorteil dieses Ansatzes ist die Möglichkeit, Komponenten in mehreren Apps oder an verschiedenen Orten in Ihrer App wiederzuverwenden, wobei nur geringfügige Änderungen mit der Erweiterung von Backbone möglich sind. Es ist auch sehr einfach, mit vielen verschiedenen Layouts / Präsentationen von Komponenten zu experimentieren, indem nur kleine Änderungen an der JSON-Konfiguration vorgenommen werden.

Zusätzlich zu einer breiten Palette an Hilfs- und Hilfsfunktionen bietet Luca viele Backbone-Derivate auf höherer Ebene, die Sie in beliebiger Weise miteinander kombinieren können, um eine komplexe Benutzeroberfläche zu erstellen.

Ansichten, Komponenten, Container

  • Augmented Model, View, Collection, Router-Klassen
  • Konfigurationsoptionen, die die Kommunikation zwischen Modellen, Sammlungen, Ansichten, der Anwendung und ihren jeweiligen Managern erleichtern.
  • Container (Split / Spaltenlayout, Rasterlayout, Registerkartenansicht, Karten- / Assistentenansicht)
  • FormView mit allen Standardfeldkomponenten und Helfern für die Synchronisation mit einem Backbone.Model
  • GridView, zum Erzeugen scrollbarer Rasterelemente aus einer Luca.Collection
  • CollectionView, um auf einer Sammlung basierende Ansichten zu generieren
  • Symbolleisten / Schaltflächen

Twitter Bootstrap Styles und Markup kostenlos

  • Luca spielt sehr gut mit dem Twitter-Bootstrap-Framework. Indem Sie Luca.enableBootstrap = true setzen und CSS einbinden, werden Ihre Komponenten (wie die Registerkartenansichten, Symbolleisten, Schaltflächen, Formulare, Felder, Raster usw.) automatisch die Bootstrap-kompatiblen Markup- und CSS-Klassenkonventionen von Twitter verwenden.
  • Verwendet das Grid-System für das Layout und reagiert auf die meisten Bootstrap-Basis-CSS-Klassen auf intelligente Weise
  • Luca.Viewport- und GridLayout-Komponenten sind so eingerichtet, dass sie mit den responsiven, flüssigen oder statischen Grid-Systemen des Bootstrap funktionieren.
  • Ziel ist es, eine Eins-zu-Eins-Übereinstimmung für Twitter-Bootstrap-Komponenten bereitzustellen, um sie als konfigurierbare Backbone-Ansichten darzustellen

Die Anwendungskomponente

  • Backbone.Model-basierte Zustandsmaschine bietet Getter / Setter-Methoden und Attributänderungsereignisse als Stil des Anwendungssteuerungsflusses
  • Integrierte Controller-Komponente, die Seiten der App als Reaktion auf Backbone.Router- oder State Machine-Ereignisse versteckt / anzeigt
  • Integrated Collection Manager, der die von Ihnen erstellten Sammlungen verfolgt, ermöglicht es Ihnen, sie zu umgrenzen, sie zu gruppieren und ihnen Standardparameter zuzuweisen
  • Ein Socket Manager, der eine Abstraktionsschicht über Websocket-Diensten ist, die Push so einfach macht wie Backbone.Event
  • Ein Keyboard-Event-Router, der benannte Schlüsselereignisse für Komponenten auslöst, die auf solche Ereignisse reagieren möchten

Sammlung und Modellverbesserungen

  • Sammlungen basieren auf backbone-query , die eine sehr ähnliche Abfrage-Schnittstelle wie MongoDb bietet
  • Aktivieren Sie einen lokalen Speicher Backbone.sync, indem Sie einfach collection.localStorage = true setzen
  • Automatisches Auffüllen von Sammlungen, deren Daten beim Laden der Seite geladen werden
  • zwischengespeicherte Methoden / berechnete Eigenschaften. Zwischenspeichern des Ergebnisses der Erfassungsmethoden und Verfallen des Zwischenspeichers als Reaktion auf das Ändern / Hinzufügen / Entfernen von Ereignissen in der Sammlung oder ihren Modellen
  • berechnete Eigenschaften auf den Modellen. Erstellen von Attributen basierend auf komplexen Funktionen und automatisches Aktualisieren des berechneten Werts als Reaktion auf Änderungen

Ereignisse und Haken

Luca-Komponenten sind liberaler mit den Ereignissen, die sie im Vergleich zu den Standard-Backbone-Komponenten ausstrahlen. Sie werden Ereignisse wie zuvor ausgeben: initialisieren, nach: initialisieren, vor: rendern, nach: rendern, aktivieren, zuerst: aktivieren, deaktivieren, zuerst: deaktivieren, und damit können Sie das Verhalten Ihrer Komponenten genauer einstellen. Wenn Sie in Ihrer Ansicht ein Ereignis in der @hooks-Datei definieren, ruft es automatisch eine ähnlich benannte Funktion für Sie auf, sofern diese vorhanden ist. Dies verhindert eine Menge Callback-Stil-Code, der die Lesbarkeit verbessert.

Sie können die Luca.Events-Klasse auch so konfigurieren, dass die Ereignisse in einem globalen Publish / Subscribe-Kanal veröffentlicht werden, was die Erstellung einer großen Anwendung erleichtert und die Kommunikation zwischen den Modulen erleichtert.

Der Rubin-Edelstein

Luca wurde speziell während der Arbeit mit Rails- und Sinatra-APIs entwickelt und ist daher derzeit für einen bestimmten Stack optimiert, aber es sperrt Sie nicht in einen bestimmten Server.

Luca wird als Teil eines Ruby Gems verteilt, der für die Asset-Pipeline oder als herunterladbare JS-Datei konfiguriert ist.

Sie sind nicht verpflichtet, Rails oder Sinatra zu verwenden. Aber wenn Sie das tun, habe ich viele nützliche Dinge enthalten:

  • Dateien mit der Erweiterung .luca werden als HAML mit variabler Interpolation im JST-Stil verarbeitet. (äquivalent zu .jst.ejs.haml) durch die Asset-Pipeline
  • Ein Test Harness für browser- oder kopflose Jasmine-basierte Unit-Tests sowie viele Backbone- und Underscore-Testhelfer.
  • Ein API-Endpunkt für das Entwicklungstoolset, das mit Luca ausgeliefert wird (mehr dazu später)
  • Ein API-Endpunkt, mit dem Sie Redis als schemalose Speicher-Engine für Luca.Collection mit minimaler Konfiguration verwenden können

Die Entwicklungstools

  • Luca-Anwendungen können eine in der Browser-Konsole installierte coffescript-Konsole mit Luca-spezifischen Helfern und Befehlen ermöglichen, die Luca-Anwendungen und -Komponenten überwachen, überprüfen und debuggen

  • Mit Hilfe von Rails Gem und Lucas CodeMirror-basiertem Komponenteneditor können Sie den Quellcode des Luca Frameworks sowie die anwendungsspezifischen Komponenten direkt im Browser mit Coffeescript bearbeiten. Sie erhalten sofort eine Rückmeldung als Reaktion auf Ihre Änderungen, wobei die Instanzen betroffener Objekte mit dem aktualisierten Prototyp aktualisiert werden und Sie Ihre Änderungen auf der Festplatte speichern können.

  • Der Komponenten-Tester ist eine Live-Sandbox, in der Sie mit den Komponenten spielen können, aus denen Ihre Anwendung isoliert besteht. Sie erhalten Werkzeuge zum Ändern des Prototyps der Komponente, zum Einrichten der Abhängigkeiten und zum Konfigurieren der Komponente. Die Komponente wird bei jeder Bearbeitung sofort erneut gerendert. Sie können das Markup, das die Komponente generiert, sowie das CSS direkt im Browser anzeigen und bearbeiten und Ihre Änderungen sofort sehen. Dies macht es zu einem sehr wertvollen Experimentierwerkzeug.

  • Der Component Tester wird bald in Jasmine integriert, damit Sie die Ergebnisse Ihrer Komponententests in Echtzeit sehen können, während Sie ihren Code bearbeiten

Luca ist in Arbeit, aber unterhält eine stabile API (noch nicht 1.0) und wurde in mehreren großen Produktions-Apps verwendet. Es ist definitiv ein sehr eigensinniger Rahmen, aber ich arbeite daran, ihn modularer zu machen. Ich arbeite aktiv an den Dokumentations- und Beispielkomponenten.




Links