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

Answer 1

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.