Mobile Web Performance

You must Login before you can answer or comment on any questions.

Application type : mobile

Titanium SDK : 2.1.1.GA

Platform : Mobile Web

Packaged on Mac OS X

Hello,

I'm developing an Mobile Web app with a navigationgroup and three windows. One window has an tableview with custom rows (views and labels). When i run it on safari, it has great performance, everything works fine. But when i package the app and put it on a server, the performance is badly decreased. Opening a new window is very slow and scrolling in the tableview isn't really fast too.

How can i increase this perfomance? Are there any best practices for Mobile Web development?

(Sorry for my bad English)

2 Answers

Accepted Answer

Titanium Mobile Web apps are extremely sensitive to poorly structured code. Every UI element slows down the app. If you don't need a View, get rid of it. If you don't need to display something, destroy it.

Speaking of destroy, when you remove a UI element from the screen, it doesn't actually clean it up. Mobile Web doesn't have access to the garbage collector like iOS and Android, so you need to manually call a destroy() method on all UI elements you want to remove from the screen: 

myView.destroy && myView.destroy();
If you do a lot of images, you may want to consider creating a Titanium Mobile Web Module and copying our ImageView, then remove all the slideshow related code. If you doing put icons on buttons, you can copy the Button class and start ripping that out.

I could write a book on how you can improve performance, but the real speed boost requires a bit of SDK hackery.

Find the directory where the Titanium SDK is installed (~/Library/Application Support/Titanium/mobilesdk/osx/2.1.1.GA on Mac OS X), then go into the mobileweb directory. Look for a file called compiler.py. Scroll almost to the bottom and you'll find a function called find_project_dependencies(). Put a # at the beginning of the line for each Titanium namespace you do not use. Note that if you comment out too much, your app will break. If you comment out something like Ti.UI.View, but leave Ti.UI.Button, Ti.UI.View will still be included because it will be resolved as a dependency. This will affect ALL your Titanium Mobile Web apps.

Save and re-build your app. It should run significantly faster.

In the upcoming Titanium Mobile 2.2.0 release, we will finally have automatic Titanium namespace dependency resolution, so you won't need to do this.

— answered 9 months ago by Chris Barber
answer permalink
2 Comments

  • Could you please give me some advice about poorly structured code (see below). Thanks!

    — commented 9 months ago by Jordy van der Heijden

  • The code looks ok, but it's also a very simple example. I'm a platform engineer, not an application developer, so I'm not the guy you ask how you should build your app. I can just tell you big picture things like don't create unnecessary UI components if you don't need them. For example, don't create views inside of views inside of views just to position something. Don't use big images. Try to tile smaller ones. Instead of big images of a gradient, use a background gradient. That sort of thing.

    — commented 9 months ago by Chris Barber

Thank you very much for your answer!

About the sensitivity of Titanium Mobile Web apps for poorly structured code, maybe you could give me some advice about that.

The structure of my code is based on the best practices of Appcelerator (Mobile Best Practices)

Here's an example how i structure my code:

layout_firstwindow.js 

exports.view = function() { // Here in i define the custom views/labels/etc i use in the firstwindow
    var view = Titanium.UI.createView({
        height : '70dp',
        top : '20dp',
        left : '20dp',
        right : '20dp',
        layout : 'vertical',
    });
    return view;
}
exports.label = function(text) {
    var label = Titanium.UI.createLabel({
        text : text,
        height : '22dp',
        width : '100%',
        color : 'black',
        font : {
            fontSize : '18dp',
            fontFamily : Titanium.App.Properties.getString("FontFamily")
        },
    });
    return label;
}
firstwindow.js 
function FirstWindow() { // Here i build my layout
    var firstWindowLayout = require('ui/layout_firstwindow');
    var win = Titanium.UI.createWindow({
        backgroundColor : '#d6d6d6',
        fullscreen : false,
    });
    var view = firstWindowLayout.view();
    var label = firstWindowLayout.label('some text');
    view.add(label);
    win.add(view);
    win.open();
}
module.exports = FirstWindow;
app.js 
(function() { // here i call the firstwindow method
    firstWindow = require('firstwindow');
    new firstWindow();
})();

Your Answer

Think you can help? Login to answer this question!