BackboneJS site structure

Question

Ok I am trying to get my head round this whole backboneJS thing. I understand you have to separate your site into modules and break each module down into Models, Collections and Views like described in this example.

My JS file structure currently looks like this:

-js
  -application.js

  -lib
    -jquery.min.js
    -backbone.min.js
    -underscore.min.js

  -modules
    -newsfeed.js //activity feed
    -file.js // page to upload files to
    -members.js // page that show other members of group
    //-general-site-logic.js??

---

I have two questions:

1. Should all application logic be controlled from BackboneJS? If not then where should this separate logic reside in my application structure? Surely backbone can't control all of your client-side activity. What about activity that doesn't involve any collections?

2. Should I be using RequireJS to manage modules when using BackboneJS or not? I have found this example but it seems to complicate the already confusing concepts of Backbone even further.

I am about to embark on a very javascript heavy app and really want to get this right before my code begins to mushroom!

Answer 1

The great thing about Backbone is that it is just a collection of useful pieces that you can put together however you want. You can organize it however you want.

Surely backbone can't control all of your client-side activity.

Why not? I have a rather large client-side app where all of the code (aside from jQuery plug-ins and such) is written using Backbone constructs (Views, Models, Collections, Routers).

In our case, we are using Rails, so we don't need to worry about requiring other JS files. We break the project up into many js (coffee) files and the "asset pipeline" merges it all into one js file for us. (we do need to tell the asset pipeline some ordering rules, however... models before collections, collections before views, etc)

When we do this, we have the following setup:

-assets
  -javascripts
    -backbone
      -collections
      -helpers
      -models
      -routers
      -templates
      -views
      -bootstrapper.js

Of course, that is how WE do it. For larger projects, I always know where to find my components and we create subfolders within for our different sub-views. For instance:

-views
  -people
    -people_list.js
    -people_item.js
  -orders
    -order_list.js
    -order_item.js
    -order_form.js

On smaller projects, however, you can put everything in one JS file and it wouldn't be a problem. Most toy examples are laid out this way.

An intermediate layout might be something where you just separate your models from your views like this:

-models.js // models and collections
-routers.js
-views.js

I guess what you should get from this is: "Organize however you'd like". Do what makes sense for the project size and your team's understanding of organization.

Backbone provides structure. It isn't opinionated, however, to how that structure is designed.