Organizing your Backbone.js + Require.js + jQuery application

Code organization plays a major role when developing a web application. If the size of the application is huge, then it becomes very difficult to maintain the project. When I first developed my backbone application (a simple to-do app) I searched on the internet for any proven code organization. I did not find any single method of doing this, people had their own organization based on their requirements. So, I came up with a mix of several methods for organizing a backbone.js web application.

1. Folder Structure

The first basic step of organizing your code is to maintain a folder structure. Here is the folder structure that I follow to develop my backbone applications.

.<project-name>
|— js
|    |— libs
|    |    |— jquery
|    |    |— jquery.1.7.2.js
|    |    |— jquery.1.7.2.min.js
|    |    |    |— jqueryui
|    |    |    |    |— jquery-ui.1.8.21.custom.min.js
|    |    |    |    |— jquery-ui.1.8.21.custom.js
|    |    |    |— jquerytools
|    |    |    |— <any-other-jquery-plugins>
|    |    |
|    |    |— underscore
|    |    |    |— underscore.1.3.3.js
|    |    |    |— underscore.1.3.3.min.js
|    |    |— backbone
|    |    |    |— backbone.0.9.2.js
|    |    |    |— backbone.0.9.2.min.js
|    |    |— require
|    |    |    |— require.2.0.2.js
|    |    |    |— require.2.0.2.min.js
|    |    |    |— text.0.27.0.js
|    |    |— <any-other-custom-libs>
|    |
|    |— models
|    |— collections
|    |— views
|    |— templates
|    |— router
|    |— util
|    |    | — util.js
|    |
|    |— main.js
|
|— assets
|    |— images
|    |— css
|    |— docs
|    |— videos
|
|— api
|    |— util
|
|— .htaccess
|— index.html
|— README.txt
|— robots.txt
|— humans.txt
|— cross-domain.xml

js All javascript files are grouped in this package. If you are developing your web application in coffee script, you might have a `coffee` package.

js/libs All library files fall under this package. For example `jquery`: All the jquery plugins will be under js/libs/jquery (including jquery itself). You might have a development version these plugins for reference. Please Make sure that you always use only the minified version of each of these plugins. You can consider using a CDN (if available) for including any of these javascript plugins. Even when using a CDN, it is always good to maintain a fall-back mechanism for loading the library files.

js/models All Backbone models will be in this folder. You might have several subfolders in this package based on your application modules.

js/collections All Backbone collections will be in this package.

js/views All Backbone views will be in this package.

js/templates I use text.js for loading external templates. All template files will be in this package.

js/router Generally in a Backbone application there will be only one Backbone router. For better structure we have this file inside a package.

js/util All utility files will be in this package.

api Backend code will be in this package. (example: php)

2. Naming Conventions
Let’s assume that we are developing a Todo application. Here is how I would name my files in the application

2.1 File names
When using require.js as there can be only class per file, I would name the file with the same name as Class.

TaskModel.js – model for storing the task details
TaskView.js – view for a todo task
TasksCollection.js – a collection for all TaskModel’s
TasksCollectoinView.js – a collection view

2.2 Variables
I follow camel-case starting with a lower case alphabet for naming my variables. I follow the same even for objects properties.

var taskModel = new TaskModel()
taskModel.set({id: 1, isCompleted: true, title: “write a post on code organization”});

Hope you find this information useful. If you have any recommendations, please leave a comment, I shall update it.

Happy Coding!!

About these ads