Backbone.js und jQuery

81

Es wird gesagt, dass Backbone alle übergeordneten Abstraktionen verarbeitet, während jQuery oder ähnliche Bibliotheken mit dem DOM arbeiten, Ereignisse normalisieren und so weiter.

Könnte mir bitte jemand helfen, diese Aussage anhand eines einfachen praktischen Beispiels zu verstehen.

Ein weiteres wichtiges Merkmal des MVC-Frameworks wie Backbone, Knockout, ist, dass das Modell (die Daten) und die Ansicht synchron bleiben. Dies scheint jedoch auf Seitenebene spezifisch zu sein und nicht für die gesamte Anwendung. Können wir also das Modell / die Daten und die Ansicht über mehrere Seiten hinweg synchronisieren lassen? (Art global)

testndtv
quelle
1
Sie müssen "Backbone AND jQuery" sagen
neoascetic
Von Noobs - Für Noobs. thomasdavis.github.com/2011/02/01/backbone-introduction.html . Beide zielen darauf ab, benutzerfreundliche und skalierbare Lösungen für alltägliche Probleme bereitzustellen. One (jQuery) konzentriert sich stark darauf, Ihnen das Arbeiten mit vorhandenen Elementen und das Bearbeiten der Daten nach dem Laden des DOM zu erleichtern. Mit dem anderen (Backbone) können Sie eine "MV (VM / C / CR)" - Anwendung erstellen, die das Modell (unsere Daten, die wir anzeigen möchten), unsere Ansicht (wie wir unsere Daten anzeigen möchten) und unseren Controller ( Das Backbone unterteilt dies in zwei Methoden: Sammlungen / Routing) Datenübertragung / -manipulation VOR dem Laden.
Ohgodwhy
Danke dafür ... Ich habe die Frage aktualisiert ...
testndtv

Antworten:

54

Backbone / Knockout wird normalerweise für Anwendungen mit nur einer Seite verwendet. Während jQuery eine Toolbox ist, die mit jeder Webseite verwendet werden kann, ist Backbone für einen bestimmten Anwendungstyp gedacht und hilft Ihnen, Ihren Code dafür zu organisieren. Zumindest meiner Erfahrung nach besteht eine der größten Herausforderungen beim Erstellen einer App für eine einzelne Seite darin, den Code sauber und modular zu halten, und das Backbone hilft dabei sehr.

Die Eigenschaften einer typischen Backbone-App sind:

  • Im Wesentlichen statische HTML-Seite, auf dem Server wird nichts generiert
  • Der Server fungiert als JSON-REST-API, die den Inhalt für die App bereitstellt
  • Die dom-Elemente zum Anzeigen der Daten werden mit Javascript in Backbone-Ansichten erstellt. Dabei werden jQuery und verschiedene Vorlagenbibliotheken verwendet
  • Die Kommunikation mit dem Server sowie zwischen verschiedenen Teilen der App erfolgt über die Backbone-Modelle

In Bezug auf Ihre Frage, wie die Daten über mehrere Seiten hinweg synchronisiert werden sollen, ist meine instinktive Antwort, dass Sie nicht mehrere Seiten benötigen: Der Benutzer kann feststellen, dass sich die Seite ändert, die Adresse in der URL-Leiste ändert sich dank der pushState-Funktionalität, aber technisch gesehen Die gesamte App ist eine Seite.

Die größten Vorteile dieser Art von Ansatz sind eine reibungslose Benutzererfahrung (kein erneutes Laden von Seiten), eine gute Caching-Unterstützung, da alles außer den JSON-Daten statischer Inhalt ist. Für mobile Ziele besteht die Möglichkeit, die Web-App mit phoneGap in eine mobile App umzuwandeln (weil alles außer json ist statisch).

OlliM
quelle
1
Hmmm ... vielen Dank ... ich bin etwas verwirrt, wenn Sie sagen, dass das Backbone hauptsächlich für Apps mit nur einer Seite verwendet wird ... nicht sicher, wie viele Apps wirklich nur für eine Seite sind ... die meisten haben mehrere Seiten ... Auch ich habe eine mehrseitige App ... kann ich Backbone.js nicht verwenden?
Testndtv
4
Die Einzelseiten-App bedeutet, dass es sich technisch gesehen um eine HTML-Seite handelt - aus Anwendersicht verfügt sie normalerweise über mehrere Ansichten ("Seiten") und Funktionen. Als Beispiel kann ich den mobilen Linkedin- Seiten touch.www.linkedin.com geben , die tatsächlich mit Backbone oder sogar Google Mail entwickelt wurden.
OlliM
Ja, natürlich können Sie Backbone für mehrseitige Apps verwenden. In diesem Fall würden Sie wahrscheinlich so viele Backbone-Router verwenden, wie Sie unabhängige neu geladene Seiten haben
Alexander Mills
128

Ihr Anfangssatz war tatsächlich eine sehr gute Aussage über die Unterschiede zwischen Backbone.js und jQuery. Packen wir ihn also ein wenig aus.

Zum einen stehen die beiden Bibliotheken überhaupt nicht im Wettbewerb - sie sind kostenlos.

Als Beispiel hier einige Dinge, die ich mit jQuery machen würde:

  • Animierte Diashows
  • Verbesserungen der Formularsteuerung, wie z. B. ein iOS-ähnlicher "Spinner"
  • Umschalten der Sichtbarkeit von Elementen basierend auf einem Klassennamen

Und einige Dinge, die ich in Backbone.js tun könnte:

  • Erstellen Sie ein Fotoalbum, in dem der Benutzer auf eine Miniaturansicht klickt und eine größere Version des Fotos zusammen mit einigen Daten wie der verwendeten Kamera, dem Standort und dem Namen des Fotografen anzeigen kann
  • Erstellen Sie einen Master- / Detail-Seitentyp, der ein Datenraster darstellt und es dem Benutzer ermöglicht, auf einzelne Elemente zu klicken und diese in einem Formular zu aktualisieren.

jQuery zeichnet sich auf Mikroebene aus: Es wählt Seitenelemente aus und gleicht die Unterschiede im Umgang von Browsern mit Ereignissen aus.

Backbone.js ist mehr Gesamtbild. Es hilft Ihnen bei der Verwaltung von Daten und Anwendungslogik. Im obigen Beispiel für ein Fotoalbum bietet Backbone mehrere nützliche Strukturen: Sie müssen alle Daten zu Fotos (ein Modell), eine Liste aller Fotos im Album (eine Sammlung) und einen Platz zum Ablegen enthalten Logik, die bestimmt, was passiert, wenn ein Benutzer auf eine Miniaturansicht (die Ansicht) klickt. Dies sind die Hauptbestandteile einer Backbone-Steuerung oder -Anwendung.

Backbone.js profitiert jedoch von jQuery oder ähnlichem, um die Ergebnisse der Daten und der Logik Ihrer Anwendung in das DOM zu rendern. Es ist beispielsweise üblich, jQuery zu verwenden, um das Element auf der Seite auszuwählen, das als Container für Ihre Backbone-App dient. Es ist auch üblich, jQuery's $(function () {});zu verwenden, um die Teile Ihres Backbone-Steuerelements zu starten. Wahrscheinlich würden Sie auch mit jQuery Fehlermeldungen zur Formularfeldüberprüfung anzeigen.

Sie können in jQuery sicherlich große, komplexe Benutzeroberflächen erstellen. Wir haben einige in der App, die ich bei der Arbeit pflege. Es ist jedoch schwierig, mit ihnen zu arbeiten, da jQuery nicht dafür ausgelegt ist, einer Anwendung Struktur zu verleihen. Insbesondere die jQuery-API, die darauf basiert, Gruppen von Elementen auszuwählen und dann Rückruffunktionen zu übergeben, die diese Elemente bearbeiten, ist kein gutes Muster für ein großes, komplexes Steuerelement oder eine App. Sie haben am Ende viele verschachtelte Funktionen und es ist sehr schwer zu sehen, was los ist.

Ich überarbeite derzeit eines dieser Steuerelemente in Backbone.js. Als letztes Beispiel finden Sie hier eine kurze Zusammenfassung, wie sich mein Denkprozess unterscheidet, wenn ich in beiden Bibliotheken an demselben Steuerelement arbeite.

In jQuery mache ich mir Sorgen um:

  • Benutze ich den richtigen Selektor, um die ligewünschte Elementgruppe zu erfassen ?
  • Muss ich diese Werteliste neu füllen, wenn dieser Ajax-Aufruf abgeschlossen ist?
  • Wie kann ich diese Array-Werte wieder in die inputElemente auf der Seite einfügen?

In Backbone konzentriere ich mich mehr auf:

  • Was ist die richtige Logik, um diesen Satz von Eigenschaften für mein Modellelement zu validieren?
  • Wenn der Benutzer auf die Schaltfläche Hinzufügen klickt, sollte ich der Sammlung sofort ein neues Element hinzufügen oder warten, bis alle Daten eingegeben wurden und es "gültig" ist?
  • Wie soll ein Artikel in meiner Sammlung reagieren, wenn der Artikel unmittelbar vor oder nach dem Löschen erscheint?

jQuery kümmert sich um die kleinsten Details, und Backbone ist auf einem höheren Niveau.

Beachten Sie abschließend, dass ich bei der Erörterung der Beispiele für Backbone.j die Wörter "control" und "app" verwendet habe. Es ist nicht wahr, dass Backbone.js nur für Apps mit nur einer Seite gedacht ist. Es ist jedoch wahr, dass Backbone.js gut zum Erstellen komplexer Anwendungen geeignet ist, die Daten manipulieren und viel Logik verarbeiten. Es wäre albern, es für kleine UI-Elemente zu verwenden - die zusätzliche Struktur, die es auferlegt, wird nicht benötigt.

Update: Bei mehreren Seiten bietet Backbone einen leistungsstarken Mechanismus zum Speichern Ihrer Daten. Jedes Modell verfügt über eine saveMethode, die einen AJAX-Aufruf ausführt, um die Änderungen auf dem Server zu speichern. Solange Sie Ihre Daten unterwegs speichern, können Sie eine mehrseitige App verwenden. Es ist ein sehr flexibles Modell, und so werden wir wahrscheinlich Backbone bei der Arbeit einsetzen. Ich würde gerne eine einseitige App erstellen, aber wir haben 10 Jahre Arbeit in unserer bestehenden mehrseitigen Anwendung. Wir möchten einige unserer intensiveren UI-Komponenten in Backbone neu erstellen und dann die Änderungen mit dem Server synchronisieren, bevor der Benutzer zu einer anderen Seite wechselt.

Josh Earl
quelle
2
Vielen Dank ... Umwerfende Antwort, um es gelinde auszudrücken ... Während du fast alle Teile erklärt hast, hatte ich nur eine Frage ... du hast erwähnt, dass Backbone nicht nur für eine App mit nur einer Seite ist ... also könnte Bitte geben Sie ein Beispiel dafür, wie ich meine Daten auf mehreren Seiten in meiner App beibehalten kann. Außerdem verwende ich Java auf der Serverseite, das die eigentlichen Dyanamikdaten liefert ... Also sollte ich das auch aktualisieren, um mir Daten im richtigen Format zurückzugeben und dann eine Kopie davon als Backbone-Modell zu behalten ...
testndtv
1
@testndtv Jedes Mal, wenn Sie die Seite aktualisieren, gehen alle Ihre Modelle verloren. Warum also die Seite aktualisieren? Mit Backbone können Sie Ihre Ansichten ändern, während Sie sich noch auf derselben Seite befinden. Verwenden Sie also nur 1 Seite.
Mark
Ok ... Hat Backbone keinen Mechanismus, um die Daten über Seiten hinweg zu speichern? Als würde man die Daten durch einen AJAX-Aufruf oder so etwas
beibehalten
Es wurden einige Informationen zu persistenten Daten hinzugefügt, mit denen Backbone recht gut umgehen kann.
Josh Earl
Gut gesagt, Josh, du hast es besser erklärt als ich. Testndtv, da Sie ein Anfänger in Javascript zu sein scheinen, möchte ich die Warnung hinzufügen, dass Backbone wirklich kein sehr anfängerfreundliches Framework ist - es ist sehr nützlich und hilft beim Erstellen komplexer Apps sehr, aber die zusätzlichen Konzepte erschweren den Start der Entwicklung als nur weg hacken. Ich würde empfehlen, dass Sie die Beispiele aus der Backbone-Dokumentation sorgfältig studieren, damit Sie in die richtige Richtung gehen.
OlliM
3

Ich habe noch nie von Leuten gehört, die backbone.js auf mehreren Seiten verwenden. Es ist fast immer eine Art Single-Page-App.

Die einzelne Seite kann viele verschiedene Modelle, Ansichten und Zustände haben und zu einer vollständigen, leistungsstarken App führen.

Wenn Sie bereits über serverseitiges Rendern von Vorlagen / Ansichten in Java verfügen, ist backbone.js NICHT für Sie geeignet. Um backbone.js optimal nutzen zu können, müssen Sie einen Teil dieses Codes im Front-End-Javascript verschieben oder duplizieren.

Wenn Sie keine App für eine einzelne Seite erstellen möchten (dies bedeutet nur, dass eine App ohne Seitenaktualisierungen oder -änderungen, die URL sich jedoch weiterhin ändern und für den Benutzer wie mehrere Seiten aussehen kann), können Sie Ihre gesamte MVC aktiviert lassen der Server und Sie brauchen kein Backbone.

Bearbeiten:

Das Backbone verschiebt einige der MVC-Inhalte, die normalerweise auf dem Server verarbeitet werden, auf den Client. Für viele bedeutet dies, den Server zu vergessen und Ihre App nur als einseitige Javascript-App zu schreiben. Der Server wird nur eine Quelle für JSON / REST-Daten. Wenn Sie dazu nicht bereit sind, ist backbone.js nicht so nützlich.

Kennzeichen
quelle
2

Backbone ist ein MV * -Framework, während jQuery ein DOM-Toolkit ist.

Die Hauptfunktionen einer MV * -Anwendung sind Routing, Datenbindung, Vorlagen / Ansichten, Modelle und Datenzugriff. Das Backbone kann teilweise von jQuery abhängen.

jQuery ist eine solide API zum Abfragen des DOM mit umfassender Browserunterstützung und einer lebendigen Community. Es wird mit Ereignisbehandlung, zurückgestellten Objekten und Animationen geliefert.

Einfache Ereignisbindung mit jQuery

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});
antonjs
quelle