Backbone.js und jQuery

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)

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).

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.

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.

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" );
});