[Core][Perf] General performance optimizations needed

[paulmillr]

Slow as hell on rMBP / Safari. It provides very bad user experience.

Anything we can do about it?

[jtollerene]

Please be more specific. What exactly appears slow to you?

[twisterghost]

This is a pretty general thing for retina macbook pros. They aren't really beefy enough (at least, in my experience on a 2013 rMBP with maxed out spec options) to handle smooth CSS animations with the DPI they are pushing. @paulmillr, try opening the demo on an external 1080p screen and clicking around - you'll see its much smoother.

This is a MBP internal problem primarily.

[paulmillr]

Everything is slow. Animations, transitions etc.

Same thing on iPhone 6+. Not MBP-only.

[rafayepes]

I think that promoting elements to their own layers could help in general. I'll try to check it.

[paulmillr]

Thanks Rafa!

[Markus-ipse]

@rafayepes Keep in mind that promoting elements to their own layers is not a silver bullet, since too many layers incurs its own performance problems.

[jackielii]

It is quite slow on ipad as well. I tried material angular https://material.angularjs.org/ , seems very responsive.

[krik]

The performance (especially on mobile devices) is rather poor.

Compare for example the click effect for the buttons vs. Angular's Material component. I made a short recoding of me rapidly clicking the button component.

Material UI:
http://cl.ly/1b0B3L1y420c

Angular Material:
http://cl.ly/0k3i3a2t1d2P

The effect is slightly delayed (especially on mobile devices). Also the is UI not responsive during the animation.

[dmcclintock]

What is the possibility of adding fastclick.js as a dependency? The 300ms delay with the touch events is the only speed issue that I'm encountering on iOS Safari.

[krik]

I don't think it's so much about fastclick, I see the same problems on both mobile and desktop.

[hekar]

Performance will be better in JavaScript + CSS, because most of these animations are stateful and require communication with the JS thread.

http://davidwalsh.name/css-js-animation

Edit: "Angular Material" does the animation using JS + CSS (rather than keyframes, material-ui)

Demo Source

[hai-cea]

The ripple animation is divided into 2 events on those projects (onMouseDown & onMouseUp). You can see this by clicking and holding down the buttons on polymer and angular material.

In contrast, Material-UI is executing the complete animation on a single click. We could look into separating the ripple animation into 2 events, but I'm not sure how that will play with onTouchTap. It requires more investigation for sure.

[jfbaro]

Hi there. Firstly I would like to thank all contributors for the great work. Thanks for sharing this with the community.
I have tested the examples on Moto X, Moto G and Ipad 3 (iOS 8). The example seems OK (not super fast) on Android devices, but quite slow on Ipad 3 (I see a lag between the actual touch and the redrawing on the screen). By reading the comments I am not sure the way react works will allow it to have the same performance as seen on Angular Material, but I love React so much more than I love Angular! :)

The question is: Do you guys believe React may be able to deliver the kind of performance for this kind of components on either Android and iOS? Or is it impossible to achieve a much better performance (on this scenario) because the way React internals work?

If there is any test I can do to help investigate that, just let me know. I am still learning React, so I have limited knowledge, but I can help testing if you guys need.

Regards

[jfbaro]

I know they are two different things, but this demo (based on an older version of React) feels much smoother.
http://petehunt.github.io/react-touch/

[glifchits]

I don't think this has anything to do with touch events being slow, does it? The problem seems to be that only one Ripple element is animated in a Ripple component at a time. If we could maintain an array of ripples, pushing one on click/tap and removing it on animation end, that would make the animation look responsive.

Disclaimer: I'm not an expert in this library (or React, for that matter) but I will look into implementing this in the upcoming weeks unless someone else who agrees does so first 😄