17 Nov 2015 3:57 AM #1
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
- 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
17 Nov 2015 7:05 PM #2
- 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).
18 Nov 2015 12:24 AM #3
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:
18 Nov 2015 8:13 AM #4
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.
By sequencesw in forum Ext 5: Q&AReplies: 1Last Post: 14 Sep 2015, 9:47 AM
By sunbiz in forum Sencha Touch 2.x: DiscussionReplies: 4Last Post: 6 Feb 2012, 2:15 PM
By Zyclops in forum Ext: Q&AReplies: 2Last Post: 29 Dec 2011, 10:52 PM
By seanbrookes in forum Ext: DiscussionReplies: 10Last Post: 11 Oct 2011, 11:50 PM
By crpatrick in forum Ext 2.x: Help & DiscussionReplies: 4Last Post: 31 Oct 2008, 12:19 PM