CODEWITHSUNDEEP
backbone.jsstructurerequirejs
Maurice
Maurice

Reputation: 1262

How do you structure your Backbone + RequireJS applications?

I've been struggling trying to strike the right balance between reusability and complexity when it comes to organizing my Backbone objects into AMD's (for medium- to large-scale applications)

(A) Should every Backbone object (models, views, etc) be in their own module? (B) Should related Backbone objects be in the same AMD module? (ie: PersonModel, PersonCollection, PersonView objects in the same module definition)

Option (A) seems to allow the most flexibility and reusability, but also the most complexity because of the (potentially) high number of files. While option (B) may make it easier to manage things, but less flexible and really difficult to unit test.

How is (or has) everyone else structured these things?

Upvotes: 15

Views: 1060

Answers (3)

davidjnelson
davidjnelson

Reputation: 1121

I just released an open source toolkit which will hopefully help others as much as it helps me. It is a composition of many open source tools which gives you a working requirejs backbone app out of the box.

It provides single commands to run: dev web server, jasmine single browser test runner, jasmine js-test-driver multi browser test runner, and concatenization/minification for JavaScript and CSS. It also outputs an unminified version of your app for production debugging, precompiles your handlebar templates, and supports internationalization.

No setup is required. It just works.

http://github.com/davidjnelson...

Upvotes: 0

Marcelo De Zen
Marcelo De Zen

Reputation: 9507

I good thing about requirejs is that it allow you to abstract the physical files into structured namespaces. You can take the approach (A) and create each backbone class in their own file, then create a "namespace" module to glue all the related classes together.

// Suppose you have PersonView.js, PersonCollectionjs, PersonModel.js as modules
// create a Person module to function as namespace
define(["PersonModel", "PersonCollection", "PersonView"], function(model, collection, view) {
     return {
        Model: model,
        Collection: collection,
        View: view
     };  
});

This keep the modules organized in their own files and gives you some flexibility to write one module per class without requiring you to expose this organization for the rest of the application (I really don't like to have to write require("PersonView", "PersonModel" ... ) every time I need to use the person's objects, it's easier and cleaner for consumers to declare a dependency on a "namespace" instead of independent classes).

Upvotes: 5

Harborhoffer
Harborhoffer

Reputation: 5936

For medium to large backbone projects I prefer to use requirejs with a separate module for every model, collection, and view. I also use the "Text" plugin for requirejs so I can load underscore templates just as I would any other module. This for me seems to be the sanest way to manage a large project and I have never really felt overwhelmed with the number of files I have.

+1 on using the requirejs optimizer when pushing your app to production. Works really well. http://requirejs.org/docs/optimization.html

Upvotes: 1

Related Questions