Sliding performance on IOS5 !

[olouvignes]

Just tested my app on my device, running fine.

However, transitions between pages are much more sluggish than compared to 1.x !

It is slower, doesn't get any ios-like-math effect (like EaseOutExpo...)
And worse, it gets like a second to start !
Touch the button, wait 500ms-1s animation starts.

Here is the code i use :

				items: [
				{
					xtype: 'button',
					text: 'Register',
					ui: 'confirm',
					style: 'margin:2%;',
					handler: function() {
						Ext.getCmp('viewport').setActive('register', {type: 'slide', direction: 'left'});
					}
				}
				]

With setActive defined like this in my Viewport :

	setActive: function(target, animation) {
		var containerLayout = this.getLayout(),
			targetComponent = this.getComponent(target);
		containerLayout.setAnimation(animation || containerLayout.getAnimation());
		this.setActiveItem(targetComponent);
	},

Please tell me i can expect an UI-Experience at least as good as with 1.X !

[senchito]

ack!! really?? 2.0 was supposed to make everything FASTER.. not the other way around... /worried

[TommyMaintz]

In our testing the animations are very fast on iOS. Could you give us some more details about the app, like the type of card you are animating to etc? Also, are you dynamically loading the register view when you click the button?

Basically it would be helpful if you could share some more of your source code.

[Jamie Avins]

Do you use much custom CSS in your application? Also, do you experience this animation start delay all the time or only on the first action you use?

[olouvignes]

In fact my app is really simple (one viewport, two childViews).
I removed any customized css.

Slide feels good on chrome/simulator but lags on device (running with phonegap 1.1.0).

Playing with register & back button to go back & forth
Animation start is delayed everytime.

Running on an iPhone4 restored yesterday (clean restore from iCloud) on IOS5.

Here is my app.js :

Ext.application({

    name: 'MyApp',


    controllers: [/*'Sessions'*/],
    autoCreateViewport: true,
    viewport: {
        autoMaximize: false
    },


    launch: function() {
        this.launched = true;
        this.mainLaunch();
    },


    mainLaunch: function() {
        if ((Ext.os.deviceType == 'Phone' && !device) || !this.launched) {return;}
    }


});

A view/Viewport.js :

Ext.define('MyApp.view.Viewport', {

    id: 'viewport',
    extend: 'Ext.Container',
    requires: [
    ],


    controllers: [/*'Sessions'*/],
    views: ['Login', 'Register'/*, 'Container'*/],


    config: {
        layout: {
            type: 'card',
            animation: {type: 'slide'}
        }
    },


    setActive: function(target, animation) {
        var start = new Date().getTime();
        var containerLayout = this.getLayout(),
            targetComponent = this.getComponent(target);
        console.warn(new Date().getTime() - start);
        containerLayout.setAnimation(animation || containerLayout.getAnimation());
        console.warn(new Date().getTime() - start);
        this.setActiveItem(targetComponent);
        console.warn(new Date().getTime() - start);
    },


    constructor: function(config) {
        console.log(this.self.getName() + '::constructor()', [this, arguments]);
        //this.initConfig(config); // not working
        this.callParent([config]);
    },


    initialize: function() {
        console.log(this.self.getName() + '::initialize()', [this, arguments]);

        this.add([
            {'xtype':'login'},
            {'xtype':'register'},
            //{'xtype':'container'}
        ]);

        Ext.Viewport.add(this);

        this.callParent();
    }


});

an view.session.Login :

Ext.define('MyApp.view.session.Login', {

    id: 'login',
    name: 'Login',
    alias: 'widget.login',
    extend: 'Ext.form.FormPanel',
    //requires: ['Ext.Animator'],


    config: {
        items:[{
            xtype: 'toolbar',
            title: 'myapp',
            docked: 'top',
            ui: 'dark'
        }]
    },


    initialize: function() {
        console.log(this.self.getName() + '::initialize()', [this, arguments]);


        // Configure component
        this.add([{
                xtype: 'fieldset',
                id: 'LoginFieldset',
                title: 'Login',
                items: [
                {
                    xtype: 'emailfield',
                    placeHolder: 'email',
                    name: 'email',
                    id: 'email',
                    required: true,
                }, {
                    xtype: 'passwordfield',
                    placeHolder: 'password',
                    name: 'password',
                    required: true
                }, {
                    xtype: 'togglefield',
                    name: 'remember_me',
                    label: 'Save login?',
                    labelWidth: '60%'
                },
                {
                    xtype: 'button',
                    text: 'Login',
                    ui: 'confirm',
                    style: 'margin:2%;',
                    handler: function() {
                    }
                }
                ]},
                {
                xtype: 'fieldset',
                title: 'New user?',
                items: [
                {
                    xtype: 'button',
                    text: 'Register',
                    ui: 'confirm',
                    style: 'margin:2%;',
                    handler: function() {
                        Ext.getCmp('viewport').setActive('register', {type: 'slide', direction: 'left'});
                    }
                }
                ]}
            ]);


        this.callParent();
    }


});

And finally a view.user.Register :

Ext.define('MyApp.view.user.Register', {

    id: 'register',
    name: 'Register',
    alias: 'widget.register',
    extend: 'Ext.form.FormPanel',
    requires: [],


    config: {
        items:[{
            xtype: 'toolbar',
            title: 'Register',
            docked: 'top',
            ui: 'dark',
            items: [
                {
                    text: 'Back',
                    ui: 'back',
                    xtype:'button',
                    listeners: {
                        'tap': function () {
                            Ext.getCmp('viewport').setActive('login', {type: 'slide', direction: 'right'});
                        }
                    }
                }
            ]
        }]
    },


    initialize: function() {
        console.log(this.self.getName() + '::initialize()', [this, arguments]);


        // Configure component
        this.add([
                {
                xtype: 'fieldset',
                title: 'About you',
                items: [
                {
                    xtype: 'textfield',
                    id: 'firstName',
                    name: 'firstName',
                    placeHolder: 'first name',
                    required: true,
                },
                {
                    xtype: 'textfield',
                    placeHolder: 'last name',
                    name: 'lastName',
                    id: 'lastName',
                    required: true,
                },
                {
                    xtype: 'button',
                    text: 'Register',
                    ui: 'confirm',
                    style: 'margin:2%;',
                    handler: function() {
                    }
                }
                ]
            }]);


        this.callParent();
    }


});

[Jamie Avins]

Awesome test case, thanks!

[olouvignes]

After testing back with 1.x app on my iphone it seems that it is not that much slower on 2.x on an iPhone4.

Was comparing my last test with an iPad2 perf on 1.x (everything is perfectly smooth) vs an iPhone4 on 2.x today, tested back 1.x on my iPhone4 tonight, if it is indeed slow (delay), but not really that much slower.

I guess i did expect a perfect user experience with an iPhone4 running IOS5.

[Jamie Avins]

After testing back with 1.x app on my iphone it seems that it is not that much slower on 2.x on an iPhone4.

Was comparing my last test with an iPad2 perf on 1.x (everything is perfectly smooth) vs an iPhone4 on 2.x today, tested back 1.x on my iPhone4 tonight, if it is indeed slow (delay), but not really that much slower.

I guess i did expect a perfect user experience with an iPhone4 running IOS5.

Maybe they just want us all to buy the 4s (mine will be here tomorrow )

[edspencer]

I've had an iPhone 4 for a while. It's a slow device, though iOS 5 makes it a good deal faster (ST 2.0 starts almost twice as fast with iOS 5 compared with iOS4 on the same hardware). We've focused most of our attention on Android so far so it is possible we've regressed on iPhone, there'll be lots of optimizing over the coming few releases though