Dynamic page - performance problem - scroll not working - HWC/SMP 2.2

[Former Member]

Hi Folks,

First of all I want to say a big thanks to the folks who developed this SMP 2.2 version, I've been developing SUP based  apps since SUP 1.5.2 and I can say we are on a much better place now IMHO.

I'm developing an HWC(2.2.2.6718) based App on SUP 2.2 using the latest SP/EBF on an iPad.

Following my requirements I have to develop an app capable of changing the layout dynamically and cope with variable amount of data as well.

The app could contain an undefined number of nodes with at least six “children” per node: Buttons/radio (not supported by SMP yet), text, combo etc.

I have done it but I'm facing some problems (really slow/scroll) and I would like clarify some points:

1) Performance:

In my App the backend only sends data, any layout change is done via JS on the client side, in my tests I can see that the HWC really takes time to parse the dynamically created jQuery components.

What is the best approach?

Create components using HTML direct like

htmlOutput += '<li data-role="list-divider" data-theme="i">' (from Exp Tracking)

or

var elementDivEditClass = document.createElement('div');

Insert/append child via jQuery or via classic HTML aproach?

$('#TorontoForm').children().eq(1).after(htmlOutput); (from Exp Tracking)

or

document.getElementsByName('')[Z].appendChild(elementTopic);

2) Initialize dynamically newly created jQuery elements:

Is there any way or a better way rather than forcing the trigger to create or calling jQuery elements constructor for every element? (I know it can be done in a single line of code, but if is it the best approach?) How can I force the page to be displayed as if it were the first time?

3) Removing elements:

In order to display a new page with new results to the user I'm removing all components (checking if they are not the same of course), using jQuery then creating/appending all again.

Is there any better way of doing this?

4) Scroll stops working:

At the first time launching the app, my dynamic page works really well, but when going back to the main page and coming back again to the dynamic page, the scroll just stops working; you cannot navigate using your finger anymore. The page is displayed correctly

What happens in the transition?

a) I'm removing all elements from the dynamic page.

b) Populating the page with new elements

c) Initializing jQuery elements calling create or constructor or using $.mobile.z.prototype.enhanceWithin. I tested with all, the results are the same.

At the first launching step c is not needed and the dynamically created elements are displayed correctly.

5) What are the recommendations when creating dynamic elements?

1. I.e.: Do I need to always include a listener?

6) At last but not least, will this approach “client rendered layout via JavaScript” ever succeed? 

I’m asking this taking the SMP generated code as an example, it does generate HTML but it could be done dynamic in JavaScript. I do believe HTML is faster but how to create a dynamic page?  Hiding elements? Hum…

Many thanks,

Felipe

[david_brandow · Accepted solution]

Much of this is personal opinion, but this is how I would answer those questions:

1) From a performance perspective, you are better off to generate the raw HTML as a string and do it all in one bunch. For a limited number of controls, it may not be an important consideration, though, its generally only noticeable for large numbers of controls, such as in a list with a large number of rows.

2) If you add the controls without adding them through jQuery/jQueryMobile, you'll need enhancePage to be called, either directly or via changePage, loadPage or some other mechanism.

3) Its a matter of preference, for small numbers of controls I don't personally think its that important which you use.

4) Without knowing exactly how you are doing it, its tough to say. My best guess is that the iScroll4Lite component hasn't been made aware of the new height of the page.

5) Recommendations about what, specifically? In terms of your concrete question, no, there's no generic need to add a listener of any kind.

6) Yes, adding controls dynamically through JavaScript is entirely viable. It is, fundamentally, how lists are rendered at runtime. That being said, if you know ahead of time a superset of the controls you will want and can simply hide some of them based on the dataset, that might be easier programmatically.

[Former Member · Accepted solution]

Hi David,

Many thanks for your reply.

1) I've changed my code to produce HTML, it might have improved the performance but it's hard to notice, the page is still consuming ~1400ms to render the jQuery objects using 4 nodes. You can actually see the text populated then the rendering process starts.

2) For some controls I'm using enhancePage for others I'm triggering the create method.

4) Yes, it's probably the case, but why it's displayed correctly at the first time? I noticed that in this 2.2 version iScroller is now a widget and I tried to call the method refresh manually to see if it resolves the issue. It just does not work. One of the components of my node is a collapsible control. I wonder if it might be a bug in the refresh method.

how can I fix it?

I also tried to change the generated code to force the page to be refreshed ignoring the DOM by adding a property at mobile.changePage ->reloadPage:true it also did not work.

As the entire page will be redesigned at run-time, a solution that ignores the page on cache or ignores the DOM would also work from my understanding.

I also tried to clone the page during initialization, then add the elements to that copy. Always keeping a  "non-touched" version of the page. But unfortunately it also did not work.

Do you know how I can fix this scroll problem? This is really becoming a showstopper for us. Any help on this will be much appreciated.

Thank you,

Felipe