Unresponsive on Android

[tobiasmuecksch]

On Android this script is very unresponsive. When you try to move a card around nothing happens until you remove your finger and try to move it again. And then it still is very laggy.

I tested it on Motorola Moto G 2. Generation with Android 5.x and Android 6.0.

[tobiasmuecksch]

Okay I found out why: I have about twenty cards in my app. Each card is composed by multiple DOM elements. No problem on iOS but laggy as hell on Android. So today I came up with the idea to only have three cards present in the DOM at the same time. That solved the problem.

Maybe you are interested in supporting cards cards on mobiles @gajus? In this case you should implement something to remove cards (that are hidden under the stack) from the DOM until needed. Otherwise feel free to close this issue.

[gajus]

I do not actively use and therefore maintain this library. But I review all the PRs and will happily accept PRs that improve performance.

[optikalefx]

Our solution to this, which works really well - was 3 fold.

1. As suggested, only keep a stack of 5, and always remove the thrown out card from the DOM and add 1 more to the 'bottom' of the stack. This required a change in this code base from appendToParent to prependToParent. Which means the newly added card will be at the bottom.

2. element.dispatchEvent(touchStartEvent); on the new element that was added. We found firing touchstart before the user started dragging fixed a ton of lag

3. the above touch start caused the cards to pop around, so we also got rid of the appendToParent call on touchStart. It wasn't needed anyway. For us we only ever want the top card to be on top.

So now we get 60 fps on a stack of 100 on android.

[tobiasmuecksch]

@optikalefx Thank you for your comment. Would you mind publishing your workaround? I'd appreciate to not invent the wheel twice :)

[optikalefx]

You can see our fork https://github.com/ConnectAi/swing/tree/feature/prepend for the updates to prepend and removing the extra call. Our code is in the context of ember, so it's not useful on it's own.

• We make a slice() copy of the full array
• call this.createCards(stack); with 5 cards
• using stack.on('throwoutend', (element) => {
• element.target.remove();
• get 1 new piece of data from your array copy from step 1
• unshift that onto your stack in the DOM. (for us ember renders that, so we only have to update the array and data binding adds it to the DOM)
• run this.createCards(stack); again which will take that newly added DOM element and turn it into a card (and touch it)

createCards(stack) {
        Ember.run.later(() => {
            // find the elements missing a card and create them
            if (this.$('.stack li')) {
                this.$('.stack li').each((i, element) => {
                    if (!stack.getCard(element)) {
                        stack.createCard(element);
                        element.className = 'card';
                        element.dispatchEvent(touchStartEvent);
                    }
                });
            }
        });
    },

[tobiasmuecksch]

@optikalefx Thank you very much for your effort!

[edborden]

@optikalefx Any chance you can release/show any of your Ember integration? I plan to use in Ember as well.

[optikalefx]

@edborden see above, is there something specific you wanted to see? That's the code I used above.