Sencha Touch 2.3 with Cordova 3.5 launch time is long

Question

If you create a sample Sencha Touch 2.3 app using sencha app generate... and package it with Cordova, you will see that it takes about 4 seconds to launch the app and show the main view. If this basic skeleton app takes this long, then actual apps that have many more views, controllers, stores etc will take much longer (6-8+ seconds).

Is there any way to speed up the launch? For reference, lets take the example of the sencha started app itself. It takes 4 seconds now. So how do we improve the performance so that it takes 1 or less than 1 second to launch?

score 1 · Answer 1 · answered Sep 01 '14 at 18:59

1

Aside that you shoud only include the necessary controllers, views etc... there is a great difference in time from generate a development, testing build than a production build that compresses, minimizes all js (Sencha+your code) in a unique 'js' file and a unique 'css' file that improves greatly the startup time (in development phase each class is a separate file).

sencha app build production

answered Sep 01 '14 at 18:59

Martín Alcubierre

4,341
1
27
27

I do a sencha app build package as i have to then package the app with Cordova for android and iOS. Is production build recommended over package build in this case? – senchaDev Sep 03 '14 at 16:29
Package is the best solution, also minimizes content for static content inside a device. – Martín Alcubierre Sep 03 '14 at 16:45

score 0 · Answer 2 · answered Sep 01 '14 at 16:47

0

My advice would be:

Avoid overnesting views
Do hierarchical loading (not all views controller models and stores in app.js but use requires)
Be sure you are not creating objects and let them around without proper destruction.
The speed depends a lot on phones so if your target are limited resource phones might wanna consider other options.

That been said this is not native and you wont get the same speed (at least not right now) but you get a lot of other benefits.

answered Sep 01 '14 at 16:47

code4jhon

5,725
9
40
60

I have about 20views, 5 controllers, 10 models and 10 stores, all defined in app.js. Should i define just 1 view and 1 controller in app.js and mention the remaining views, controllers, models and stores as requires in the controller? – senchaDev Sep 03 '14 at 16:40
nope, require should be used in a way that each view require all other views it will use. E.g in app.js can laod MainView.js and lets say that view has 2 items (MyPanel, and MyGrid) those 2 views would be good to have as a require of MainView.js – code4jhon Sep 03 '14 at 16:45

score 0 · Answer 3 · answered Sep 01 '14 at 17:34

Most of the time launching of app takes long time because of the below reasons(which i faced)

1.Unnecessary loading of controllers,views in app.js directly.

2.Unnecessary loading of static images/pdf(any static content) every time whenever we refresh the app.

Below steps would be useful,if you follow these properly,in any sencha touch app.

Do not load all controllers inside app.js directly,you can do loading of controllers device specific using profile,like below

profiles: ['Tablet', 'Phone'],

Above line would be in app.js,which is responsible for loading of corresponding profile,these profile files are further responsible for loading of all the controllers and views as per the device.
app.json file contains app.cache section,inside this there is cache section where you can mention all the static images or pdf,to avoid unnecessary loading every time.

As i am packaging my app with Cordova for android and iOS, does the app.cache logic make sense here? I understand it would cache the images in the case of a web app that has to repeatedly download the image every time. But what about a packaged app, does the cache logic work here too? — senchaDev, Sep 03 '14 at 16:33

score 0 · Answer 4 · edited May 23 '17 at 11:56

As mentioned by malcubierre, we need to compress all the required js and css files using sencha app build command. If you are targetting for mobile phones especially then you can go for sencha app build package command.

You can also remove the extra imports from app.scss file which you are not using in the application. Removing extra imports in theming part reduces the loading time of app.css.

Sencha Touch 2.3 with Cordova 3.5 launch time is long

4 Answers4