Was ist der Zweck von backbone.js?

Question

Ich habe versucht, den Nutzen von backbone.js von der Website zu verstehen http://documentcloud.github.com/backbone aber ich konnte trotzdem nicht viel herausfinden.

Kann mir jemand erklären, wie es funktioniert und wie es beim Schreiben von besserem JavaScript hilfreich sein könnte?

Answer 1

Backbone.js ist im Grunde ein superleichtes Framework, das es Ihnen erlaubt, Ihren Javascript-Code in einer MVC (Model, View, Controller) Mode, wo...

Modell ist Teil Ihres Codes, der die Daten abruft und auffüllt,

Siehe ist die HTML-Darstellung dieses Modells (die Ansichten ändern sich, wenn sich die Modelle ändern, usw.)

und optional Controller die es Ihnen in diesem Fall ermöglicht, den Zustand Ihrer Javascript-Anwendung z. B. über eine Hashbang-URL zu speichern: http://twitter.com/#search?q=backbone.js

Einige Vorteile, die ich bei Backbone entdeckt habe:

• Kein Javascript-Spaghetti mehr: Der Code wird organisiert und in semantisch sinnvolle .js-Dateien aufgeteilt, die später mit JAMMIT kombiniert werden

• Nicht mehr jQuery.data(bla, bla) Daten müssen nicht im DOM gespeichert werden, sondern in Modellen

• Ereignisbindung funktioniert einfach

• äußerst nützliche Underscore-Utility-Bibliothek

• backbone.js Code ist gut dokumentiert und eine großartige Lektüre. Öffnete meine Augen für eine Reihe von JS-Code-Techniken.

Nachteile:

• Es hat eine Weile gedauert, bis ich es verstanden habe und herausgefunden habe, wie ich es auf meinen Code anwenden kann, aber ich bin ein Javascript-Neuling.

Hier ist eine Reihe von großen Tutorials über die Verwendung von Backbone mit Rails als Back-End:

CloudEdit: Ein Backbone.js Tutorial mit Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

p.s. Es gibt auch diese wunderbare Sammlung Klasse, die es Ihnen ermöglicht, mit Sammlungen von Modellen umzugehen und verschachtelte Modelle zu imitieren, aber ich möchte Sie nicht von Anfang an verwirren.

Answer 2

Wenn Sie komplexe Benutzeroberflächen im Browser erstellen wollen, werden Sie wahrscheinlich die meisten Teile, aus denen Frameworks wie Backbone.js und Sammy.js bestehen, selbst erfinden. Die Frage ist also, ob Sie etwas so Kompliziertes im Browser bauen, dass es sich lohnt, es zu verwenden (damit Sie am Ende nicht selbst dasselbe erfinden müssen).

Wenn Sie planen, etwas zu bauen, bei dem die Benutzeroberfläche regelmäßig ihre Darstellung ändert aber nicht auf den Server geht, um ganze neue Seiten zu erhalten dann brauchen Sie wahrscheinlich etwas wie Backbone.js oder Sammy.js. Das Paradebeispiel für so etwas ist Googles GMail. Wenn Sie es jemals benutzt haben, werden Sie feststellen, dass es einen großen Brocken HTML, CSS und JavaScript herunterlädt, wenn Sie sich zum ersten Mal anmelden, und dass danach alles im Hintergrund passiert. Es kann zwischen dem Lesen einer E-Mail, der Bearbeitung des Posteingangs und der Suche hin- und herwechseln, ohne dass jemals eine ganz neue Seite gerendert werden muss.

Diese Art von Anwendungen lässt sich mit diesen Frameworks besonders gut und einfach entwickeln. Ohne diese Frameworks müssen Sie entweder eine Reihe von Einzelbibliotheken zusammensuchen, um Teile der Funktionalität zu erhalten (z. B. jQuery BBQ für die Verlaufsverwaltung, Events.js für Ereignisse usw.), oder Sie müssen alles selbst entwickeln und auch selbst warten und testen. Im Gegensatz dazu gibt es bei Backbone.js Tausende von Leuten, die es auf Github beobachten, Hunderte von Forks, in denen daran gearbeitet wird, und Hunderte von Fragen, die hier auf Stack Overflow bereits gestellt und beantwortet wurden.

Aber nichts davon ist von Bedeutung, wenn das, was Sie vorhaben zu bauen, nicht kompliziert genug ist, um die mit einem Framework verbundene Lernkurve wert zu sein. Wenn Sie immer noch PHP-, Java- oder andere Websites bauen, bei denen der Backend-Server immer noch die ganze schwere Arbeit des Aufbaus der Webseiten auf Anfrage des Benutzers erledigt und JavaScript/jQuery nur das Sahnehäubchen auf diesem Prozess ist, werden Sie Backbone.js nicht brauchen oder sind noch nicht bereit dafür.

Answer 3

Backbone ist...

...eine sehr kleine Bibliothek von Komponenten, die Sie verwenden können, um Ihren Code zu organisieren. Sie wird als eine einzige JavaScript-Datei geliefert. Abgesehen von den Kommentaren enthält sie weniger als 1000 Zeilen tatsächliches JavaScript. Es ist vernünftig geschrieben, und Sie können das Ganze in ein paar Stunden lesen.

Es handelt sich um eine Front-End-Bibliothek, die Sie mit einem Skript-Tag in Ihre Webseite einbinden. Sie wirkt sich nur auf den Browser aus und sagt wenig über Ihren Server aus, außer dass sie idealerweise eine restful API bereitstellen sollte.

Wenn Sie eine API haben, verfügt Backbone über einige hilfreiche Funktionen, die Ihnen helfen, mit ihr zu kommunizieren. Sie können Backbone aber auch verwenden, um jeder statischen HTML-Seite Interaktivität hinzuzufügen.

Backbone ist für...

...Struktur in JavaScript hinzufügen.

Da JavaScript keine bestimmten Muster vorschreibt, können JavaScript-Anwendungen sehr schnell unübersichtlich werden. Jeder, der schon einmal etwas mehr als nur triviales in JavaScript entwickelt hat, wird wahrscheinlich auf Fragen wie diese gestoßen sein:

1. Wo werde ich meine Daten speichern?
2. Wo werde ich meine Funktionen unterbringen?
3. Wie werde ich meine Funktionen miteinander verdrahten, so dass sie sinnvoll aufgerufen werden und nicht zu Spaghetti werden?
4. Wie kann ich diesen Code für verschiedene Entwickler wartbar machen?

Backbone versucht, diese Fragen zu beantworten, indem es Ihnen zur Verfügung steht:

• Modelle und Sammlungen, um Ihnen bei der Darstellung von Daten und Datensammlungen zu helfen.
• Ansichten, damit Sie Ihr DOM aktualisieren können, wenn sich Ihre Daten ändern.
• Ein Ereignissystem, damit die Komponenten sich gegenseitig abhören können. Dies hält Ihre Komponenten entkoppelt und verhindert eine Spaghettifizierung.
• Ein minimaler Satz sinnvoller Konventionen, damit Entwickler gemeinsam an der gleichen Codebasis arbeiten können.

Wir nennen dies ein MV*-Muster. Modelle, Ansichten und Sonderausstattungen.

Backbone ist leicht

Entgegen dem ersten Anschein ist Backbone fantastisch leicht, es macht fast gar nichts. Was es tut, ist sehr hilfreich.

Es gibt Ihnen eine Reihe von kleinen Objekten, die Sie erstellen können, und die Ereignisse aussenden und aufeinander hören können. Sie könnten zum Beispiel ein kleines Objekt erstellen, das einen Kommentar darstellt, und dann ein kleines commentView-Objekt, das die Anzeige des Kommentars an einer bestimmten Stelle im Browser darstellt.

Sie können die commentView anweisen, auf den Kommentar zu hören und sich neu zu zeichnen, wenn sich der Kommentar ändert. Selbst wenn derselbe Kommentar an mehreren Stellen auf Ihrer Seite angezeigt wird, können alle diese Ansichten auf dasselbe Kommentarmodell hören und synchron bleiben.

Diese Art der Codeerstellung hilft, sich nicht zu verheddern, selbst wenn die Codebasis sehr groß wird und viele Interaktionen aufweist.

Modelle

Zu Beginn ist es üblich, die Daten entweder in einer globalen Variablen oder im DOM als Datenattribute . Bei beiden gibt es Probleme. Globale Variablen können miteinander kollidieren und sind im Allgemeinen unzulässig. Datenattribute, die im DOM gespeichert werden, können nur Strings sein, Sie müssen sie ein- und wieder ausparsen. Es ist schwierig, Dinge wie Arrays, Daten oder Objekte zu speichern und die Daten in einer strukturierten Form zu parsen.

Die Datenattribute sehen wie folgt aus:

<p data-username="derek" data-age="42"></p>

Backbone löst dieses Problem, indem es ein Model-Objekt bereitstellt, das Ihre Daten und die zugehörigen Methoden repräsentiert . Angenommen, Sie haben eine ToDo-Liste, dann würden Sie ein Modell haben, das jedes Element auf dieser Liste darstellt.

Wenn Ihr Modell aktualisiert wird, löst es ein Ereignis aus. Möglicherweise haben Sie eine Ansicht, die an dieses bestimmte Objekt gebunden ist. Die Ansicht lauscht auf Modelländerungsereignisse und stellt sich selbst neu dar.

Ansichten

Backbone bietet Ihnen View-Objekte, die mit dem DOM kommunizieren. Alle Funktionen, die das DOM manipulieren oder auf DOM-Ereignisse warten, werden hier ausgeführt.

Eine Ansicht implementiert typischerweise eine Renderfunktion, die die gesamte Ansicht oder möglicherweise einen Teil der Ansicht neu zeichnet. Es besteht keine Verpflichtung, eine Render-Funktion zu implementieren, aber es ist eine gängige Konvention.

Jede Ansicht ist an einen bestimmten Teil des DOM gebunden, so dass Sie z. B. eine searchFormView haben, die nur das Suchformular anzeigt, und eine shoppingCartView, die nur den Einkaufswagen anzeigt.

Ansichten sind in der Regel auch an bestimmte Modelle oder Sammlungen gebunden. Wenn das Modell aktualisiert wird, löst es ein Ereignis aus, auf das die Ansicht hört. Die Ansicht kann dann render aufrufen, um sich neu zu zeichnen.

Ebenso kann Ihre Ansicht ein Modellobjekt aktualisieren, wenn Sie etwas in ein Formular eingeben. Jede andere Ansicht, die auf dieses Modell zugreift, ruft dann ihre eigene Renderfunktion auf.

Dadurch erhalten wir eine saubere Trennung von Belangen, die unseren Code ordentlich und aufgeräumt hält.

Die Renderfunktion

Sie können Ihre Renderfunktion auf jede beliebige Art und Weise implementieren, die Sie für angemessen halten. Sie könnten nur einige jQuery in hier setzen, um das DOM manuell zu aktualisieren.

Sie können auch eine Vorlage kompilieren und diese verwenden. Eine Vorlage ist einfach eine Zeichenkette mit Einfügepunkten. Sie übergeben sie zusammen mit einem JSON-Objekt an eine Kompilierfunktion und erhalten eine kompilierte Zeichenfolge zurück, die Sie in Ihr DOM einfügen können.

Sammlungen

Sie haben auch Zugriff auf Sammlungen, in denen Listen von Modellen gespeichert werden, so wäre eine todoCollection eine Liste von todo-Modellen. Wenn eine Sammlung ein Modell erhält oder verliert, ihre Reihenfolge ändert oder ein Modell in einer Sammlung aktualisiert wird, löst die gesamte Sammlung ein Ereignis aus.

Eine Ansicht kann auf eine Sammlung hören und sich selbst aktualisieren, wenn die Sammlung aktualisiert wird.

Sie könnten Ihrer Sammlung Sortier- und Filtermethoden hinzufügen und sie zum Beispiel automatisch sortieren lassen.

Und Ereignisse, die alles miteinander verbinden

Die Anwendungskomponenten sind so weit wie möglich voneinander entkoppelt. Sie kommunizieren über Ereignisse, so dass eine shoppingCartView auf eine shoppingCart-Sammlung hören und sich selbst neu zeichnen könnte, wenn der Warenkorb hinzugefügt wird.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Natürlich können auch andere Objekte den shoppingCart abhören und andere Dinge tun, wie z. B. eine Gesamtsumme aktualisieren oder den Status im lokalen Speicher speichern.

• Ansichten hören auf Modelle und rendern, wenn sich das Modell ändert.
• Ansichten hören auf Sammlungen und stellen eine Liste (oder ein Gitter oder eine Karte usw.) dar, wenn sich ein Element in der Sammlung ändert.
• Modelle hören auf Ansichten, so dass sie ihren Zustand ändern können, etwa wenn ein Formular bearbeitet wird.

Wenn Sie Ihre Objekte auf diese Weise entkoppeln und mit Hilfe von Ereignissen kommunizieren, verheddern Sie sich nicht mehr, und das Hinzufügen neuer Komponenten und Verhaltensweisen ist einfach. Ihre neuen Komponenten müssen nur auf die anderen Objekte hören, die bereits im System vorhanden sind.

Konventionen

Der für Backbone geschriebene Code folgt einer losen Reihe von Konventionen. DOM-Code gehört in eine View. Sammlungscode gehört in eine Sammlung. Geschäftslogik gehört in ein Model. Ein anderer Entwickler, der Ihre Codebasis aufnimmt, kann sofort loslegen.

Zusammenfassend

Backbone ist eine leichtgewichtige Bibliothek, die Ihrem Code Struktur verleiht. Die Komponenten sind entkoppelt und kommunizieren über Ereignisse, sodass Sie nicht in einem Chaos enden. Sie können Ihre Codebasis ganz einfach erweitern, indem Sie ein neues Objekt erstellen und es entsprechend auf Ihre vorhandenen Objekte hören lassen. Ihr Code wird sauberer, übersichtlicher und besser wartbar.

Mein kleines Buch

Ich mochte Backbone so sehr, dass ich ein kleines Einführungsbuch darüber geschrieben habe. Sie können es hier online lesen: http://nicholasjohnson.com/backbone-book/

Ich habe das Material auch in einen kurzen Online-Kurs aufgeteilt, den Sie hier finden können aquí (archiviert). Sie können den Kurs in etwa einem Tag abschließen.

Answer 4

Hier ist eine interessante Präsentation:

Eine Einführung in Backbone.js

Hinweis (aus den Folien):

• Rails im Browser? Nein .
• Ein MVC-Framework für JavaScript? Irgendwie .
• Eine große fette Staatsmaschine? YES !

Answer 5

JQuery und Mootools sind nur ein Werkzeugkasten mit vielen Werkzeugen für Ihr Projekt. Backbone wirkt wie eine Architektur oder ein Rückgrat für Ihr Projekt, auf dem Sie eine Anwendung mit JQuery oder Mootools aufbauen können.