PDA

View Full Version : Optimizing Sencha application and increasing the performance of overall site



kmayank
9 Aug 2012, 12:53 AM
Hi,

I have created an app using Sencha Touch 2 and the app loads very slowly.
How can i optimize the app. Is there any way that i can load the first page and then load all the views file asynchronously.

Here's my code in app.js

Ext.application({
name: "App",
viewport: {autoMaximize: true},
views: ['Viewport','Header', 'Registration', 'LatestGolfHeadlines', 'PGA_Leaderboard', 'Top_Tweets', 'Learn', 'Play', 'Scorecard', 'Settings', 'Course_Tee_Times', 'Gear', 'Profile', 'Login', 'ForgotPassword', 'Golfbag', 'CreditCard', 'Navbar', 'NavbarMessage', 'AddGolfer', 'Video', 'VideoPlayer','Main','Home','TopLogin','TopLogout','Nav', 'BookTeeTime','PlayList','Score', 'InstructionalVideos', 'TipsTricks', 'ViewGolfer', 'ScoringOptions','Round','TeeTime','Notepad', 'EnteredScore','RoundArial','ScoreReport','ViewScores','EndRound', 'SaveRound','Statistics','Average','Detailaverage', 'ChangePassword', 'Detailheadlines', 'NavPlay'],
controllers: ['Main','Home', 'Learn', 'Play', 'Gear', 'Profile'],
models: ['Registration', 'Login', 'Users', 'ForgotPassword', 'CreditCard', 'BookTeeTime', 'AddGolfer', 'Profile'],
stores: ['Tweets','Users', 'InstructionalVideos', 'TipsTricks', 'ViewGolfer','Golf','Courses', 'Scores', 'Settings', 'Profile','Average','Headlines','Distance'],
autoCreateViewport: true,
fullscreen: true,
autoDestroy: true,
scrollable: true,
glossOnIcon: true,
fullscreen: true,
launch: function() {
}
});


Rest of the code has been omitted. Help will be really appreciated.

Thanks,
Mayank

scottmartin
10 Aug 2012, 1:47 PM
You could place your views/store into each controller.

Scott.

digeridoopoo
11 Aug 2012, 1:29 AM
Have you used the sencha command yet? This looks at only the used classes and strips out all the unused ones. I am yet to do this but it is meant to speed things up significantly...have to read up more about it but I believe it's also worth recompiling your sass file so that it only includes the CSS for the components used.

kmayank
12 Aug 2012, 10:07 PM
Thanks for your responses guys

@scott Could you please an example as I am not aware how to do that. An example will really help.

@digeridoopoo I haven't tried it, will give it try soon but I am trying Sencha build command which combines all the views/controllers/stores in on file. I hope that will speed things too.

digeridoopoo
12 Aug 2012, 10:25 PM
I just did this yesterday and it does definitely speed things up a fair bit. My app now starts up in less than half the time

:-)

kmayank
12 Aug 2012, 10:46 PM
Thats great!

I have also did this just now and searching how to include the all-classes and app-all file. Will it be included in index.html. Can you provide what will be the next steps.

app-all.js code


Ext.Loader.setConfig({
enabled: true,
disableCaching: true
});
Ext.Loader.setPath('acm-golfmobi', 'app');
Ext.Loader.require(['App.view.Viewport']);
Ext.application({
name: "App"
viewport: {autoMaximize: true},
views: ['Viewport','Header', 'Registration', 'LatestGolfHeadlines', 'PGA_Leaderboard', 'Top_Tweets', 'Learn', 'Play', 'Scorecard', 'Settings', 'Course_Tee_Times', 'Gear', 'Profile', 'Login', 'ForgotPassword', 'Golfbag', 'CreditCard', 'Navbar', 'NavbarMessage', 'AddGolfer', 'Video', 'VideoPlayer','Main','Home','TopLogin','TopLogout','Nav', 'BookTeeTime','PlayList','Score', 'InstructionalVideos', 'TipsTricks', 'ViewGolfer', 'ScoringOptions','Round','TeeTime','Notepad', 'EnteredScore','RoundArial','ScoreReport','ViewScores','EndRound', 'SaveRound','Statistics','Average','Detailaverage', 'ChangePassword', 'Detailheadlines', 'NavPlay'],
controllers: ['Main','Home', 'Learn', 'Play', 'Gear', 'Profile'],
models: ['Registration', 'Login', 'Users', 'ForgotPassword', 'CreditCard', 'BookTeeTime', 'AddGolfer', 'Profile'],
stores: ['Tweets','Users', 'InstructionalVideos', 'TipsTricks', 'ViewGolfer','Golf','Courses', 'Scores', 'Settings', 'Profile','Average','Headlines','Distance'],
autoCreateViewport: true,
fullscreen: true,
autoDestroy: true,
scrollable: true,
glossOnIcon: true,
fullscreen: true,
launch: function() {
var fourSquare = this.getQuerystring('access_token');
if(fourSquareCode != '') {
window.opener.ParentWindowFunction(fourSquareCode);
}
this.viewport = new App.view.Viewport();
var element = Ext.get('nav');
Ext.get("navPlay").hide();
element.hide();
var geo = new Ext.util.Geolocation({
autoUpdate: false,
allowHighAccuracy: true,
listeners: {
locationupdate: function(geo) {
latitude = geo.getLatitude();
longitude = geo.getLongitude();
}
}
});
geo.updateLocation();
if(sessionStorage.getItem("isLog") == 1) {
Ext.get("toplogin").hide();
logoutViewHtml = Ext.create('Ext.Container', {
items: [
{
html: '<header><div class="logout"><span>'+sessionStorage.getItem("display_name")+
'</span><a href="#Main/change/login/home">Logout</a></div>'+
'<h1><span><a id="nav_icon" class="navIcon" href="#Main/toggle/navigation"></a></span><img src="resources/images/golf-digest.png" alt="" /></h1></header>'
}
]
});
logoutView.setActiveItem(logoutViewHtml);
} else {
Ext.get("toplogout").hide();
}

new Ext.util.DelayedTask(function () {
var element = Ext.get('navmessage');
element.hide();
}).delay(5000);
},
init: function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
},
getQuerystring: function (key) {
var string = window.location.href.split("#");
for(var i=0; i<string.length; i++) {
if(string[i].match(/access_token/g)) {
var r = string[i].split("=");
fourSquareCode = r[1];
break;
}
}
}
});

digeridoopoo
13 Aug 2012, 3:59 AM
I followed the steps here:

http://docs.sencha.com/touch/2-0/#!/guide/building

(http://docs.sencha.com/touch/2-0/#!/guide/building)But basically it involved me installing the Sencha SDK Tools. In my Terminal I CDd into my sencha touch app (are you on Windows? Not sure if this is available yet if I remember...I may be wrong)


cd ~/path/to/my/appThen I typed:


sencha create jsb -a index.html -p app.jsb3
sencha build -p app.jsb3 -d .

and then I updated my index.html file etc like in the instructions

Hope this helps. To be honest, this is not a very intuitive way typing commands in the command line. I hope that Sencha updates this and creates GUI versions. It would make life so much easier...

:-)

kmayank
13 Aug 2012, 4:32 AM
Thanks for the response.

Yes I am on windows and followed the same steps int he guide. sencha build command combines the classes from sdk and I am not sure it combines the views, controllers.. files also. Can you please check and tell me if that has happened in your build and whether it is possible or not as my application is taking 20 seconds to load and still more work has to be done.

Regards,
Mayank

digeridoopoo
13 Aug 2012, 10:03 AM
I havnt used it yet, but I believe you can use this:

http://www.sencha.com/products/jsbuilder

Let me know what happens and if it speeds things up a lot...

:-)