PDA

View Full Version : List, Forms, Button-down... all horribly laggy - Fix?



mavorus
29 Nov 2011, 5:12 PM
Hello everyone.

I tested the kitchen sink demo on our web server today and everything is pretty much horribly laggy on my iphone 4. 800ms + reaction time for button-down event listening... lists are laggy.. forms are even more laggy.

What i'm wondering is... can these input lags be fixed by caching all of the UI up front? Is there any way to cache or pre-load the UI/data so that input times/scroll speed seems to be almost native?

As-is, unless the example is just horribly coded and proper coding can fix this, this much input/scroll lag is just unacceptable.

Thanks for your responses everyone. :)

mitchellsimoens
29 Nov 2011, 5:48 PM
I tried on my iPhone 4S and it's a breeze. So knowing that the 4S is more powerful than the 4 I took out my trusty iPod Touch that is 2 years old... Launched the kitchen sink in PR2 and rendering was a little slow but the scrolling was actually pretty good... almost as fast as native scrolling.

justinKohactive
29 Nov 2011, 6:33 PM
I have to agree, i have sound ST2 to be rather laggy in regaurds to any kind of user interaction. Runs great in chrome on computer but on the device, its sorta bad especially when you click an input field for the first time and the keyboard comes up? I don't know that its a ST2 problem as much as a webkit problem? Buttons also seem to be rather laggy.

mavorus
29 Nov 2011, 9:05 PM
I tried on my iPhone 4S and it's a breeze. So knowing that the 4S is more powerful than the 4 I took out my trusty iPod Touch that is 2 years old... Launched the kitchen sink in PR2 and rendering was a little slow but the scrolling was actually pretty good... almost as fast as native scrolling.

Mitchell how can I replicate your results? I simply dropped the kitchen sink example onto our web server and opened it from my iphone's safari browser... perhaps when natively packaged it is smoother? In any case I need to make a web app that will be accessed from a UIWebView so... If there are any techniques/ways that I can improve this lag.. I would really appreciate it. Does a good caching algorithm help? Do I have any options?

Thanks.

**Small update: I tried running some of the examples directly via a UIWebView but they don't seem to load correctly.. just shows a white screen. Perhaps i'm doing something wrong? Getting started doesn't really talk about any differences whether I am accessing via safari or via a UIWebView..

mavorus
30 Nov 2011, 6:03 PM
I spent the day yesterday working on it and wasn't able to get any sort of improvement... Also still having the UIWebView problem (Are the examples not supposed to work in a UIWebView?).

Hasn't anyone here tried some other techniques to decrease the laggy "feel" of the lists and forms?

justinKohactive
30 Nov 2011, 6:07 PM
try using the native compile tools, running them on UIView or phone gap is sorta hackish right now, there are threads on here about how to do it though.

mavorus
30 Nov 2011, 11:02 PM
You mean.. just running the examples on UIWebView is hackish or.. running anything developed with sencha touch is hackish on UIWebView? Do you think that I would see much of a difference between the lag i am experiencing in safari and if I were to view with UIWebView?

Just trying to decide if we should use sencha or not...

olouvignes
2 Dec 2011, 1:59 AM
Agree on how sluggish the app feel on an iPhone4, even felt worse than ST1.0 at first (posted on that a while ago).

Input lags seems to come from binding every actions on the "clicked" event (that waits for mouseup) instead of a native touchdown event.

I'm pretty sure that UX could be almost perfect on an iPhone4... I've worked on home-made (no framework) ios mobile apps before & UX feeling was perfect (except for lists obviously.).

Hope ST Team will take the time to work on IOS4.3&5 perf.
By the way, can we still hope for a PR3 release this week? (oh pleaaaase !!)

olouvignes
2 Dec 2011, 2:05 AM
About UIWebView vs. MobileSafari, it is stated that MobileSafari performs better (or at least used to) than an UIWebView (but not that much.), more info here http://www.mobilexweb.com/blog/apple-phonegap-html5-nitro.

Kitchen sink does work on an UIWebView but only for 5.0 (does crash on < 5.0 devices!), hopefully PR3 will fix this, there is a patch here (http://www.sencha.com/forum/showthread.php?151035-Using-any-animations-with-phonegap-breaks-app.&p=682910)

mavorus
4 Dec 2011, 4:32 PM
I would have to agree with olo... there should be absolutely no reason for input lag time when everything has already been 100% loaded off the server.

Is there not a way to somehow utilize the touchdown/up function to get a native UX in regards to input lag time?

If only this input lag problem could be solved, we could easily create an Asynchronus system where most of the state information is controlled on the client's side, resulting in a native experience for users....

Right now the only two things getting in the way of a perfect native experience via HTML5 is input lag, laggy forms (scrolling with forms is crazy laggy for some reason) and a small bit of list scrolling lag (not much though! It's pretty good!).

Seems simple enough to fix! However.. do we have to wait for the sencha team to change it on their end? I'm not sure I could modify the source code myself to get it working like this...

rdougan
5 Dec 2011, 1:11 AM
I'm not sure what you guys are referring to as "laggy" with regards to forms. I have compared a normal, standard, HTML input tag and a Sencha Touch input tag, and they both have the same delay. Native has the same behavior.

I'll have our resident event guru Jacky reply about the "click" event stuff, but I really doubt that is a problem.

mavorus
5 Dec 2011, 7:58 PM
I hope it's not neccessary for me to film a side by side slow-motion demonstration of the difference in touch/click responsiveness between a native app button and sencha touch produced button... Am I the only one where a simple button on the interface feel much, much slower then a native button? If I am maybe there is something in the example code that is screwing with input latency?

I really want to get this issue fixed..

mitchellsimoens
5 Dec 2011, 8:04 PM
Remember... we are still in the PR stages. I am not able to see any lag but if you give us code samples and the environment you are seeing it on... maybe we can then reproduce and work to fix it.

justinKohactive
5 Dec 2011, 9:26 PM
I havent looked for my self but for button down detection are your using the standard click/tap or are your using onTouchStart? I heard that this can improve performance (responsiveness).

mavorus
5 Dec 2011, 10:50 PM
Remember... we are still in the PR stages. I am not able to see any lag but if you give us code samples and the environment you are seeing it on... maybe we can then reproduce and work to fix it.

Michael I simply put together the exact code on the "getting started guide", put it onto a local web server and ran it with an iPhone 4 (no additional background apps running). Since from the code I am seeing that everything loads in immediately... I just can't figure out why there is a lag between clicking the button and something actually happening.

I would estimate that the lag is ~ 150-250 ms from the point that my finger leaves the screen. I know it doesn't seem like much, but the difference between immediate feedback and slightly lagged feedback is massive in a real app.

One side note... is there a way to directly call the "on touch down" event listener? I could probably make it feel smoother if I could put in a "button down" image when the user puts his finger on the button, and it may make the previously mentioned lag bearable.

mavorus
6 Dec 2011, 9:42 PM
Ideas? The guides currently available don't have much regarding how to directly interact with events firing on native devices, such as pushing a "touchdown" event with a related button icon change for instance..

rdougan
6 Dec 2011, 10:18 PM
Any performance issues cannot be addressed by simply changing an event unfortunately. It will be deep in the framework, and we will continue working on performance until GA.

oddz
6 Dec 2011, 10:25 PM
I have not looked in depth how the event system functions but I would guess that the lag is caused by the standard time ios and probably other browsers wait to detect a double tap. Having developed some mobile sites without touch that is an issue I ran into myself. None the less, the delay to me is barely noticeable and has yet to mentioned by anyone else who has used the prototypes being worked on with touch 2.

rdougan
6 Dec 2011, 10:26 PM
That only happens if you listen for a doubletap event. If you do not, it does not wait for a second tap.

mavorus
7 Dec 2011, 8:39 PM
Yes, I remember reading about this before... that the input lag would be felt because using in browsers things are designed to be clicked/double clicked.

@rdougan / oddz Is there some way that I can have an event fire off "onTouchDown" instead of after the user brings his finger up? I looked in the button component but couldn't see anything relating to how to actually fire events from the specific different events that can be captured. This would really help, as at least I could have the button depress when the user presses down.. it would be a much better UX.

rdougan
8 Dec 2011, 4:14 PM
Perhaps try element.on('tapstart', function() { ... });

mavorus
8 Dec 2011, 5:48 PM
Thank you rdougan, will try that and get back to you on performance/ux.

mavorus
8 Dec 2011, 8:54 PM
In the documentation I couldn't find any event named "tapstart". Perhaps you can point me to it?

**This is what I tried:
init: function() {
console.log ('Launched the controller');

//listening test
//the Control function/method is unique to controllers and is used to add listeners to stuff
this.control({
'button': { 'tap' : function (){
console.log('the buttons speak!');
}
},

'#firstbutton' : { 'touchstart' : function(){
console.log('I should have launched an alert.. oops');
alert('a title','should fire really quick!');
}
}

});
},

Notice that when 'touchstart' was replaced with 'tap' , it worked just fine... so I suppose touchstart is not correct? I couldn't find where a list of the valid events were here and as of yet i'm not sure how to debug something like this.

**Note: I tried both touchstart and tapstart ... both gave nothing. I wish it was a bit clearer to me on where to find the listeners that are applicable to each element.. it is probably just my inexperience with sencha touch 2

rdougan
9 Dec 2011, 11:12 AM
There is no documentation in PR2 for events, but it has been added for the next release. It will be under Ext.dom.Elememt.

Because it is a element element, you must attach the event to the component element, not the component itself.


var panel = Ext.Viewport.add({
html: 'asdasd'
});

panel.element.on({
touchstart: function() {
console.log('touchstart');
}
});

mavorus
13 Dec 2011, 9:21 PM
So in my code:

'#firstbutton' : { 'touchstart' : function(){ ....

How could I access the element property? I'm having a really hard time understanding how exactly the selector is working here... why can't i just go '#firstbutton'.element.on({ ... ?

We are in this.control({ so... how could i access the element of firstbutton and add a listener to the touchstart event?

Also.. how do I access the "firstButton" anywhere else? I attempted to go 'firstButton'.element.on but that also failed... this is the incorrect way to access a component from it's unique ID? Is there some recommended reading you could give me that would give me an overview of how to access different components in my code? (I'm trying to follow the model/view/controller framework you have).

**Attempts to use: Ext.ComponenetQuery.query('#firstButton'); have succeeded in getting the right component... but when i attach .element.on , it gives me the error
"cannot call method 'on' of undefined"

Could really use some help here

mavorus
15 Dec 2011, 6:08 PM
Anyone?

PS: I was playing with the list component and found a few defaults related to a delay variable between onTapStart and when it actually shows that you tapped it... THIS was the source of the small delay I was feeling! (at least for lists)

I would recommend to anyone encountering a laggy feeling when tapping their lists to modify the "pressedDelay" when configing their list. By default it is set at 100 ms (very noticeable) and I found that when changed to 15-25 ms, the entire experience of using the list improved dramatically.

vitorgomes
15 Dec 2011, 11:19 PM
**Attempts to use: Ext.ComponenetQuery.query('#firstButton'); have succeeded in getting the right component... but when i attach .element.on , it gives me the error "cannot call method 'on' of undefined"

Could really use some help here

Try this way:


Ext.ComponenetQuery.query('#firstButton')[0]

as component query returns an array of found components, this should return the first instance of an element with itemId : 'firstButton', I usually do the query inside an container or at least from the top level Ext.Viewport


Ext.Viewport.query('#firstButton')[0]

Try to use the object .element from there. Or maybe use the method getEl()...

Hope this makes sense and helps.

Cheers

mavorus
18 Dec 2011, 7:23 PM
Thanks vitorgomes.. seems to work well. I'm a bit fuzzy on the &nbsp thing though... is it somehow related to the scope that we are calling componentQuery on?

vitorgomes
18 Dec 2011, 7:32 PM
My previous message was reformatted and got some html tags in the way.
Edited it.
There should be no &nbsp; in the code. Have another look...
Cheers