Famous / famous-angular

Bring structure to your Famo.us apps with the power of AngularJS. Famo.us/Angular integrates seamlessly with existing Angular and Famo.us apps.

Home Page:https://famo.us/angular

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

fa-scroll-view, watchers and poor performance

5inline opened this issue · comments

In fa-scroll-view, as I add more items, the scrolling slows until it becomes unusable or generates a memory error.

Here is the FA code I'm using.

<fa-view id="library_list_view">
    <fa-modifier fa-translate="list.layout.container.translate">
        <fa-scroll-view id="library_list_scroll_view" fa-options="list.layout.scroll.options" fa-pipe-from="list.scrollHandler">
            <fa-modifier fa-size="list.layout.list.size" fa-translate="list.layout.list.translate">

                <fa-grid-layout fa-options="list.layout.grid.options">

                    <fa-view data-ng-repeat="(index,lesson) in list.lessons track by $index" fa-index="index">

                        <fa-surface class="list-item library-list-item" fa-pipe-to="list.scrollHandler" data-fa-tapp="list.lessonClick(lesson)">
                            <div class="library-list-item-image" data-bg-src="{{::lesson.image}}"></div>
                            <div class="library-list-item-title" data-ng-bind="::lesson.title"></div>
                            <div class="library-list-item-instructor" data-ng-bind="::lesson.educator.name"></div>
                        </fa-surface>

                    </fa-view>

                </fa-grid-layout>

            </fa-modifier>
        </fa-scroll-view>
    </fa-modifier>
</fa-view>

Changing the layouts between fa-grid-layout or fa-sequential-layout or no layout wrapper did not seem to affect performance either way.

It seems like each item generates 2 watchers as well. So, if I have 40 items, I get 80 watchers, regardless of the content inside of the ng-repeat. Is this expected behavior, or is it my code? Is there something that can be optimized?

Switching to a more "vanilla" famo.us directive, the scroll view operates as expected, hiding/showing elements while scrolling to maintain performance.

View here for reference:
http://viz-co.de/scrollviews-performance/

This is a pretty big issue with famous-angular. Being able to have a performant scrollview is one of the main cornerstones of famo.us.

@5inline check out this gist for a ScrollHandler. https://gist.github.com/steveblue/4016a5e09837bf213975

If there is something not working as expected, you can just roll your own module.

Thanks, I mostly understand, but what would be the best way to integrate with Famous-Angular?