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.