Backbone Marionette Project Structure Example

Last week, we were looking to standardize the project structure for our web applications, and it was difficult to find a project structure that we liked online.  Most backbone projects are structuring the web applications by file type (e.g. views, models, templates).  We wanted to avoid this structure and go with a more modular approach inspired by architectural talks and Meteor.js.

We’re still in the midst of deciding on our final structure, but here is a sample structure that I’m leaning towards.

project/
    assets/
        img/
        css/
        sass/
        libs/
            {library-name}/
                img/
                * (css, js files in same directory)
            ...
        mixins/
        templates/
            helpers/
    core/
        config.js
        init.js
        App.js
        Router.js
        Controller.js
    modules/
        {module-name}/
            assets/
                img/
                libs/
                * (models, views, templates, jade in same directory)
        ...
    tests/
        javascript/
            specs/
                fixtures/
        index.html
    index.html
    Gruntfile.js
    package.json
    README.md
    .gitignore

The gist was to just keep Backbone/Marionette files in a separate directory, keep common items in the assets directory, and keep all the files related to modules together.

Advertisements

One thought on “Backbone Marionette Project Structure Example”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s