Developers

[Arthy74]

Hi all,

I am trying to optimise our app as we are displaying like 12 rows (rowlist component), and for each row 6 items are visible (each row can contain more that 20 items)

Everything looks ok on Roku 3 and 4, but on earlier boxes the screen freezes during rows construction up to 20 seconds...


So i created a simple example to investigate:

My rowlist displays 6 items out of 20.
I know the rowlist smartly use a virtual layout to recycle row items, which is great.

BUT

apparently the rowList:
 - creates the 6 visible items (index 1 to 6) in memory
 - creates 6 cloned versions of these items
 - renders these 12 instances (itemContentChange is triggered)
 - creates 2 following items (item 7 and 8 ) in memory
 - renders those 2 following items

The expected result should be:
 - create 6 or 8 items in memory
 - only render the 6 visible items

On a roku stick or roku 1, all this extra work has a major impact in terms of performances.

And imagine this is only for 1 row, and we have 12 rows to render...

So is there any way not to render only the 6 visible items, or Roku can plan some serious optimisation on this component ?

I join the example so that you can see by yourself:
http://lecrabe.net/exchange/roku/TestRowList.zip
http://lecrabe.net/exchange/roku/TestRo ... ources.zip

Thanks if any of you who has found a workaround for this.

[sebastienc]

The observed behavior for items in a row is usually desired and how you would go about it if implementing a row list component from scratch. In general, you want twice as many items as those visible on the screen for smooth scrolling and ensure any images are already pre-loaded before the item comes into view while scrolling.

There are two things you can try to improve performance:
- adjust "numRows" - the name of the field is confusing, but this is the number of rows that are rendered initially. Making this number small will increase initial load performance, but then will have a negative impact on performance while scrolling.
- on roku 2 and below, initially just set the number of rows that are visible on screen in the RowList and then slowly start appending additional rows to the RowList component.

[Arthy74]

Well, in my example i want a single horizontal list, so i am using a rowList with 1 row (numRows = 1).
(other List components only scroll vertically)

I agree that we want double items as displayed in memory when you want to loop the row, however i dont see the point to render the items that are out of the screen.

[TheEndless]

"Arthy74" wrote:
Well, in my example i want a single horizontal list, so i am using a rowList with 1 row (numRows = 1).
(other List components only scroll vertically)

You can use a MarkupGrid with a "numRows" value set to 1. That will give you a horizontally scrolling list.

[Arthy74]

yes, i am just afraid i will have the same rendering issue on slow boxes...

[Arthy74]

Good news everyone, 
MarkupGrid does the job better than RowList as predicted by TheEndless

I updated my example to build 20 rows of 100 items.
You can switch between Rowlist and MarkupGrid.

Are is the result of the benchmark to render the screen :
(i start the countdown as soon as the app starts, and stop when i see something on screen)

Roku 3:

• Rowlist ->              1.5 secs


• MarkupGrid ->       1 sec

Roku 1:

• Rowlist ->              7 secs


• MarkupGrid ->       14 seconds

That is a 50% performance increase !

NB: the Markup grid with 1 row correctly renders only the visible items, which is the best scenario.

Hope this example will help some of you.

NB2: the BIG counterpart is that i cannot use the floatingfocus anymore with a MarkupGrid made of 1 row...

[Dhir_Pratap]

"TheEndless" wrote:
You can use a MarkupGrid with a "numRows" value set to 1.  That will give you a horizontally scrolling list.

Is it possible to have similar horizontal scrolling behavior with more than 1 rows in markup grid?