Large-scale JavaScript Application Architecture

Developers creating JavaScript applications these days usually use a combination of MVC, modules, widgets and plugins for their architecture. They also use a DOM manipulation library like jQuery.

Whilst this works great for apps that are built at a smaller-scale, what happens when your project really starts to grow?

In this talk, I go through a number of topics including:

  • MVC on the client-side and organizing your application
  • Frameworks you can use to implement this pattern (and others)
  • Effective (decoupling) design patterns for large-scale JavaScript (and jQuery) application architecture that have previously been used at both AOL and Yahoo amongst others.

You'll learn how to keep your application logic truly decoupled, build modules that can exist on their own or be dropped into other projects and future-proof your code in case you need to switch to a different DOM library in the future.

View the slides for this talk on SpeakerDeck (128 slides)

* This talk was last presented at the 2011 jQuery Summit. 

Related Resources


  1. Pingback: Large-scale JavaScript Application Architecture | EtondeGroup Blog of Web Applications

  2. Hi,
    I really appreciate your work here.
    As a self made developer with half degree i'm not use to follow the book and sometime i get shocked when i see formal explanation for some implementation i done.

    Regarding async module, i just made some alfa framework, as you did, that completly fit into your description.

    The main application offer module registering, module lifecycle, allow publisher/ subscriber so it also mediates.

    The ajax layer is pipelined so the mediator could abort ajax requeste before or after execution.

    Well, im really glad and i congratulate you for this valuable contribution.

    I will try to keep in touch with your site.

  3. Hi Addy!

    Your work fits really well into what I'm trying to archieve for the company I am working with.

    Where do you give the talks on those topics? Are there any videos as well? I really would like to hear a talk from you and describe you my experiences in synchronizing the work of multiple different teams in one united front end experience.


  4. @Benedikt
    I usually give talks on these topics in London, where I'm based, but you can also find videos about them on the Environment for Humans site from the last jQuery summit. I believe they're currently for sale (I don't profit from these), but as soon as a free version is available I'll post it up on the site. Feel free to let me know if you have any other questions at all.

    • Thanks for all that you do, Addy!

      Since its been awhile since the question was initially asked, do you know if there is now a video somewhere out there to accompany these slides? I’ve done some Googling as well as trying to find the Environments for Humans videos, but I’ve not had luck on either front. Thanks!

  5. can we use mediator into the modules.js file(according to the Aura project)? should the Facade know about the Mediator?

    I made this .
    I use there into the 2nd facade a mediator because i needed the first facade to wait until the 2nd completly loaded!

    Thank you a lot!

  6. OmniStation, Inc., has just released an enterprise level JavaScript framework. The jsRevolution framework was designed for enterprise level deployments where it is expected to have hundreds or thousands of files and/or classes, and dozens/hundreds of developers. Our clients need inheritance, namespaceing, load time interface validation, load time abstract validation, and our powerful yet simple method to support multi-versioning for on-time, worry-free Agile cycle releases. We expect that our clients who are developing applications with more than 25 classes, who need to minimize technical debt, and who need support to write sophisticated code will find jsRevolution to be indispensible, allowing for orders of magnitude more complexity with significantly fewer developer and testing resources.

    You may email me at or visit for more information.

    Thank you,

    K. Ryan Hasse

Leave a Reply

Required fields are marked *.