Diagram of how Backbone.js works?

Question

In the process of fully grocking backbone. Are there any visual resources or diagrams that represent the full scope of the backbone architecture? Any other resources you would recommend? Thanks!

Answer 1

Look at @Anton's answer to this question: Understanding the internal structural dependencies of MVC in Backbone.js

You really don't need to spend so much time with the architecture - it's a framework that can either be used to help put together using simple OO constructs or an event-based design. You basically have ONLY 4 sets of classes (so to speak)

1. Models - that store actual data that you need to store/manipulate and sync with server in a restful fashion (using JSON/ajax)
2. Collections - to help you store a list of models and use the wonderful underscore.js to help iterate over it using various operations to make your life A LOT easier
3. Views - Helps separate concerns. You restrict the rendering operations to this class and also use it to act as a "controller" - to capture events and perform operations on the model. Or to listen to a model's or collection's events so as to update the view when the underlying model changes.
4. Router - Based on the url fragments you can choose to 'route' your applications logic - loosely speaking. Based on your url fragments you can choose what functions to invoke so you effectively 'route' to the right set of methods based on your logic.

You follow all OO design practices that you would to help design better - basically helps organize your code and separate their concerns. Try this: for the simplest hello world application, draw a UML class diagram separating the "presenation" of hello-world from the "storage string" - you'll be amazed at how backbone can help you realize the same in javascript!!!

Backbone is jquery's best friend so to speak so you 'organize' your code and use jquery to query the DOM. The style of querying is know context dependent. Assume the following multiple divs

<div class="helloClass">
<div class="innerHello"> Hello World 1</div>
</div>

<div class="helloClass">
<div class="innerHello"> Hello World 2</div>
</div>

<div class="helloClass">
<div class="innerHello"> Hello World 3</div>
</div>
...

To query this using jQuery will require you to either store an id or store data in custom data-* attributes depending on how your application is designed. With Backbone, you create a View for each div and to work on the div you query like this within the view:

var text = $(this.el).find('.innerHello').text();

One example of doing it. Makes searching the DOM faster. You could also do

var text = $('.innerHello', this.el).text();

Hope this helps clarify things. Look up the answer to the above link too...it's a great explanation.

For the rest: http://documentcloud.github.com/backbone/

Answer 2

Ron's Diagrams are cool, and I want to add the set of diagrams you will find in this slides. From this precise slide and to the end of it, pretty complete and really visual.

Hope it helps!