Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
amoschan
Posts: 17
Registered: ‎01-25-2013
My Device: None
My Carrier: Rogers

Unresponsive scrolling in my webworks app.. at a loss of how to improve it, suggestions?

Hi, my app made it to the App World before I was able to get my hands on an actual device. (I just got one yesterday!)

 

While it felt a little sluggish even on the emulator, it turns out it's downright unusable on the Z10.

 

The app is called Snooby. It's a Reddit client. The biggest problem with the app right now (there are many...) is when there are more than like 10 comments, the comments section becomes VERY laggy. It seems like there's just not enough memory to process all the comments. Is that possible?

 

I'm not sure how I should go about debugging this issue. Any suggestions? When I load tons of posts on the Facebook app, I see that it scrolls perfectly smoothly... So I'm sure that the Z10 is more than capable of scrolling through a lot of data. I'm just looking for suggestions of what I may be doing wrong.

 

Thanks!

Please use plain text.
Contributor
amoschan
Posts: 17
Registered: ‎01-25-2013
My Device: None
My Carrier: Rogers

Re: Unresponsive scrolling in my webworks app.. at a loss of how to improve it, suggestions?

Just an update.... I've tried to just load a raw HTML version of the comments section with no extra JavaScript or template processing and the lag is still there.

It seems that WebWorks is just not allocated enough system resources to repaint the screen within an acceptable amount of time.

Would switching to cascades help? Are WebWorks apps not given the same amount of memory allocation as native/cascades app? Or is it me that's not developing for WebWorks efficiently?

Is WebWorks expected to handle large amounts of text gracefully?

Any advice would be greatly appreciated.
Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Unresponsive scrolling in my webworks app.. at a loss of how to improve it, suggestions?

I assume you've got a div with overflow: scroll / auto like this

 

#scrollstuff {

    overflow: scroll;
    }

 

Change it to this....

 

#scrollstuff {

    overflow: scroll;
    -webkit-overflow-scrolling: touch;

    }

 

That switches on Hardware Scrolling on the Z10




Click the like button if you find my posts useful!
Please use plain text.
Contributor
amoschan
Posts: 17
Registered: ‎01-25-2013
My Device: None
My Carrier: Rogers

Re: Unresponsive scrolling in my webworks app.. at a loss of how to improve it, suggestions?

Do you mean -webkit-overflow-scrolling: -blackberry-touch?

 

Unfortunately, I've already got that style on the div that contains all my comments. I tried changing it to "touch" and that didn't seem to make a visible difference either.

 

Thanks though!

Please use plain text.
Contributor
amoschan
Posts: 17
Registered: ‎01-25-2013
My Device: None
My Carrier: Rogers

Re: Unresponsive scrolling in my webworks app.. at a loss of how to improve it, suggestions?

Hmmm...  I took my css and a couple other JS files out and loaded all my comments unformatted and it seems to be scrolling perfectly fine.

 

I will try taking them out one by one and identify a culprit. I'll keep this thread updated in case someone comes across the same problem.

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Unresponsive scrolling in my webworks app.. at a loss of how to improve it, suggestions?

It's definitely touch

 

This is a trick we learned at one of the sessions in Amsterdam

 

It seemed worth suggesting it

 

We were given an app to play with and there was a difference using that (we were learning about profiling etc)

 

PM me your email and I'll send you the notes - that'll probably help you work out what's going wrong




Click the like button if you find my posts useful!
Please use plain text.
Contributor
amoschan
Posts: 17
Registered: ‎01-25-2013
My Device: None
My Carrier: Rogers

Re: Unresponsive scrolling in my webworks app.. at a loss of how to improve it, suggestions?

I just tried touch again to verify.. and there still doesn't seem to be visible difference from -blackberry-touch.

 

However, perhaps I'm describing the problem wrong... the scrolling -- when it scrolls -- is buttery smooth. It's beautiful. It just takes a while for the screen to re-render after scrolling. So... if it's a very long comment thread and I scroll very far down very quickly, I can see a blank page with no text as the app is re-drawing all the text on the screen. This is the case with and without css. However, with CSS it's even slower. Also, while the app is re-rendering post-scroll, the app is blocked and cannot be used at all.

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Unresponsive scrolling in my webworks app.. at a loss of how to improve it, suggestions?

An idea might be to use text-overflow to limit how much is displayed? If the user touches the thing take the overflow off and it expands to the full thing.

 

The other thing is how are you grabbing the data? If it's on display then you are likely making a lot of network calls which could cause a bottle-neck as well




Click the like button if you find my posts useful!
Please use plain text.
Contributor
amoschan
Posts: 17
Registered: ‎01-25-2013
My Device: None
My Carrier: Rogers

Re: Unresponsive scrolling in my webworks app.. at a loss of how to improve it, suggestions?

I'm using bbui.js and the data is grabbed from reddit during the ondomready event, which is when the DOM is loaded and displayed to the user. I place a loading indicator on the screen as I wait for a response from Reddit and load all the comments accordingly, and then I hide the loading indicator and show the comments.

 

At that point, all comments have been loaded and no more network calls are being done and no more javascript is being executed. When the user is scrolling, it's the same as scrolling through a lot of static, styled text.

 

Please use plain text.