Organizing javascript code

Question

I am making a javascript application. Normally what I do is make different modules and get users inputs or click events in $(document).ready(); function. This works fine for small applications. But when I follow the same pattern, I mean getting click events in $(document).ready(); then it gets messy.

So how can I organize this file for a huge application?

Thanks in advance

Answer 1

The single-best resource I've found on this subject is Addy Osmani's creative commons book, Patterns for Large-Scale JavaScript Application Architecture. It is based in part of Nicholas Zakas' Scalable JavaScript Application Architecture, adapting it to classic design patterns and a modern workflow.

Once you reach even a modest-level of complexity, you'll benefit from working with a framework built using a variation of the MVC architecture pattern. Backbone.js is the frontrunner and is a micro-framework, meaning it does less hand-holding than others. Other popular choices are Ember.js, KnockoutJS.

Extensions and boilerplates are also built on these frameworks to handle repetitive tasks such as data/model binding and scaffolding. For Backbone, check out Backbone.Marionette from Derick Bailey and Backbone Aura, a not-quite-ready-for-production adaptation of the Osmani/Zakas architectural model built using Backbone as its... well, backbone.

Answer 2

Being JavaScript a scripting language, structure is one of the far most important concerns in large scale Javascript projects. It is important the parts of your application are well decoupled and 'self contained'. For an example, you may create your own UI components having its own template, logic, style, localizations, etc. in a single folder. Such self containment will let you organize your complex front end code in a manageable way.

Once you have your code organized, and self contained, there are other concerns that you need to address too.

• How should these loosely coupled components interact with out tight coupling
• How should I optimize these individual parts to load fast in my production env

I'm the author of BoilerplateJS reference architecture for large scale applications.

http://boilerplatejs.org

It incorporates most of the best practices discussed in Nicholas Zakas'presentation. You will find a sample implementation of a modular product suite in the code as well. Have a look, you will understand the concerns you will need to pay attention in doing a large scale application with JavaScript.