Results 1 to 4 of 4

Thread: Large Application architecture with dynamically loaded modules.

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Vote Rating

    Default Large Application architecture with dynamically loaded modules.

    I have seen a lot of people discussing that here and there but not a real guide from Sencha on how they see modularization of big applications with ExtJS.

    Our app is related to facility management but to make things simpler, I will use analogy to a mail client that is built from modules.
    In case of our theoretical app , modules would be Mail, Calendar, Contacts etc. As for today, we already have around 5 such modules, all together consisting of:
    - 120 Controllers
    - 77 models
    - 88 Stores
    - 90 Utility classes
    - 34 UX components

    The modules in some cases are grouped in sub-folders using standard ExtJs MVC, like:
    view/calendar.... and

    This is not bad in general, although is feels like a more appropriate would be
    Modules / calendar /(view, model, store, controller)
    Modules / mail / (view, model, store, controller)
    In that case each module could be encapsulated in parent folder

    The app is build with Sencha CMD and we are using several themes (multiple build profiles).

    Application.js takes care of properly initializing the app (loads session info, translations) as well as long list of includes of common utility classes, some controllers etc.
    And here the problems start. Including first 30 controllers, will pull other controllers that are linked in those... this will trigger load of all related stores, models etc.
    At the end, user will see "mail" module, but all other files from calendar, contacts etc are also loaded and initialized.
    In most cases, users will only use mail module so both loading other classes and initializing them is waste of time and resources.

    The problem to solve is that:

    1) How to properly split the application into modules (this can be only conceptual)
    2) How to load only required module without preloading others
    3) If we preload all sources, how to initialize only required module
    4) All modules must have access to "common module"

    I think the most interesting approach would be the ability to have a master viewport and a "common module" loaded at start. Then, by configuration or user choice, load selected module into it. By loading the module I mean:
    1) destroy previous module (views, stores, models, controllers)
    2) load new module source if unavailable
    3) initialize module (init controllers, models, stores, views)
    Common module and framework should not be affected by that.

    I know that its possible to build multipage apps ( but we loose: preloaded framework (can be browser cached), loaded common classes and configuration from backend server, user experience is less attractive, as we need to reload browser page.
    Or is it actually the only way to control what resources are loaded?

    If we look at GMail, modules are split into
    And there you go, you end up with three browser tabs, each containing separate application.
    Whats worse... each of those has different styling!

    Any thoughts in that topic will be appreciated

  2. #2
    Sencha Premium User
    Join Date
    Sep 2011
    Tamworth, NSW, Australia
    Vote Rating


    I use the tabChange event in a tab panel to check items.getCount() and if it's 0 add the appropriate component to the tab (I use tab panels a lot); that way, its stores, etc, don't load until I add it. I've been doing this for years but I don't know whether it's considered best practise (probably not).

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Vote Rating


    Hi Marc,

    What you have described is ok for managing views within one module. My app consists of multiple modules designed for specific purpose that have tens of views each. Those views are now loaded as top level panels inside a Viewport (by a small 'viewport manager').

    The problem is that entire source code of all modules is preloaded, and if you look at Store Manager or Controllers list - all of those are instantiated.

    80% of use cases / users will not need advanced modules. I want to optimize load and render time of main module, so I need to decouple it from Main module - that means remove the controller reference from Application.js (but I guess it needs to be included as Required, otherwise the build process will not include it in output package)

    I have stumbled upon a good discussion regarding dynamically loading controllers here:


  4. #4
    Sencha Premium Member
    Join Date
    Oct 2009
    Vote Rating


    We solve this by using GWT and the so called code spliting whre you can load chunk of code at runtime. Not sure how this work in a pure JS world.

Similar Threads

  1. Replies: 1
    Last Post: 14 Sep 2015, 9:47 AM
  2. Splitting large application into Modules, some of which will be for Desktop
    By sunbiz in forum Sencha Touch 2.x: Discussion
    Replies: 4
    Last Post: 6 Feb 2012, 2:15 PM
  3. Replies: 2
    Last Post: 29 Dec 2011, 10:52 PM
  4. Large application architecture question
    By seanbrookes in forum Ext: Discussion
    Replies: 10
    Last Post: 11 Oct 2011, 11:50 PM
  5. Large Application Architecture Question...
    By crpatrick in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 31 Oct 2008, 12:19 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts