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
- 240 Views
- 90 Utility classes
- 34 UX components
The modules in some cases are grouped in sub-folders using standard ExtJs MVC, like:
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 (http://docs.sencha.com/extjs/4.2.3/#...mand_app_multi) 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