PDA

View Full Version : Need advice modelling a large application with EXTJS 4.2



suvo
6 Jun 2014, 7:07 AM
Hi,
I am currently working with a Banking firm, we have a requirement to develop a fairly complex but Rich UI application. We are using EXTJS 4.2 and Spring MVC.
The first release of the app went into Production about a month back. Now while modelling the new phase, we have come across a major hurdle. The application load up time is fairly high at this point of time. This is happening because the application has followed a single Page web 2.0 model and multiple JS files which when minified -> all-classes.js is 3 MB.
Now there is a lot of work to be done going ahead in order to build additional functionality. Since all code is getting loaded at once during startup it would take a lot of time for this.
I figured out a design but I am not sure if that would help.. If we divide our application into multiple pages each have a different --> all-classes.js , will it help improve the performance ?
I need some advice on this. You can refer to this links which I found :
http://docs.sencha.com/extjs/4.2.0/#!/guide/command_app_multi
http://www.sencha.com/forum/showthread.php?130449-Large-Single-Page-Architecture-in-ExtJS-4.0/page2


(http://www.sencha.com/forum/showthread.php?130449-Large-Single-Page-Architecture-in-ExtJS-4.0/page2)all-classes.js itself takes (http://www.sencha.com/forum/showthread.php?130449-Large-Single-Page-Architecture-in-ExtJS-4.0/page2)36.62s to load, in total application take s more than a minute in Dev env. (http://www.sencha.com/forum/showthread.php?130449-Large-Single-Page-Architecture-in-ExtJS-4.0/page2)

(http://www.sencha.com/forum/showthread.php?130449-Large-Single-Page-Architecture-in-ExtJS-4.0/page2)If you can point to some sample implementation of multi page application it will be helpful

scottmartin
7 Jun 2014, 9:09 AM
What browser are you using that it takes this long?

Are you using Cmd / MVC approach in Ext? (I see you have all-classes.js)

Have you run your app in our PageAnalyzer to see what is taking so long, or in a DevTools profiler to see where the delay is?
ie: Loading data vs Layout run issues at startup.

suvo
8 Jun 2014, 10:04 PM
Hi Scott,
Thanks for your reply. Actually, there was a problem in my code, the default configuration for DOM was enabled for the application which was causing the load up of the entire DOM at once during startup. For now, what I did is to implement the DOM for landing page only. This really improved the performance of all-classes.js file from 37s to .75ms . We used Card Layout, so the viewport rendering is automatically handled and there wont be any need of multipage approach, which I would be implementing when we merge another module into the application.

You are right Scott, there the all-classes.js gets easily cached and loaded, i did not face this problem once the application loads up and works smoothly. Yes we used Sencha Minify using sencha cmd.