Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimizing React Native views for pre-animation

1,707 views

Published on

Optimizing React Native views for pre-animation

Published in: Software
  • Be the first to comment

Optimizing React Native views for pre-animation

  1. 1. moduscreate.com @ModusCreate Optimizing React Native Views Jay Garcia @ModusJesus @ModusCreate http://moduscreate.com 1
  2. 2. moduscreate.com @ModusCreate • A Framework that binds your React JS - JSX code to • iOS Cocoa Touch • Android UI • Has a custom layout system • Comprises a large suite of technologies • Your apps run at near full speed* • Architecture is scalable • Framework is highly extensible • BSD Licensed What is react Native? Native App React Native Library JavaScript Engine React JS React Native JS Library Your App Code *Business logic in JavaScript is fast, but still interpreted
  3. 3. moduscreate.com @ModusCreate JavaScript Native <View /> RCTView <ScrollView /> RCTScrollView <Slider /> RCTSlider <TabBar /> RCTTabBar JSX Classes Native Classes Reactnativebridge
  4. 4. Quick app demo
  5. 5. moduscreate.com @ModusCreate Aiming for consistent 60FPS •Best or User Experience •Has to do with the human eyes & brain •12-15fps is meh •24fps is smooth •30fps is better •60fps is best •16.666ms / frame •Dropped frames hurts UX perception https://www.youtube.com/watch?v=CaMTIgxCSqU
  6. 6. moduscreate.com @ModusCreate Under the hood of this app Main (Navigator) Home Menu (View) EventsMap (View) EventsList (ListView) GearList (ScrollView) GORUCKCadre (ScrollView) GORUCK YouTube List (ScrollView) Community YouTube List (ScrollView) EventDetails (ScrollView) GearDetails (ScrollView) CadreDetails (ScrollView) YouTubeViewer (ScrollView)
  7. 7. https://www.youtube.com/watch?v=b3FdkETqHzU
  8. 8. moduscreate.com @ModusCreate • JavaScript runs: • React JS • React Native Library • Your app’s Business Logic • Bridging of rendered of components to native • Animations *JavaScript is single threaded! YSlow? (25% of render speed)
  9. 9. moduscreate.com @ModusCreate • Navigator Animations run via JavaScript • Competes with the rendering of components • Too much demand on the rendering engine • Too many components • Too many images • Images not optimized • OOTB, you can’t control which images are being retrieved via http YSlow? (25% of render speed)
  10. 10. moduscreate.com @ModusCreate Under the hood of this app Main (Navigator) Home Menu (View) EventsMap (View) EventsList (ListView) GearList (ScrollView) GORUCKCadre (ScrollView) GORUCK YouTube List (ScrollView) Community YouTube List (ScrollView) EventDetails (ScrollView) GearDetails (ScrollView) CadreDetails (ScrollView) YouTubeViewer (ScrollView)
  11. 11. Only render what you need on first pass!
  12. 12. moduscreate.com @ModusCreate Unoptimized Approach 1. Home Menu demands in EventsList 2. DataSource filled with all possible records 3. ListView renders Rows per DataSource feed • List View renders rows based on initialListSize • Then goes on to render more rows via pageSize • *Possible optimizations here, but they are mostly out of your control 4. Image components demanded via network, forcing rendering Home Menu (View) EventsList (ListView)
  13. 13. moduscreate.com @ModusCreate Caused lots of blocking!!!!
  14. 14. moduscreate.com @ModusCreate • Use InteractionManager to: • Reduce Number of components rendered on instantiation • Reduces number of components being rendered • Limits number of images Gives you full control! How to resolve this issue? Home Menu (View) EventsList (ListView)
  15. 15. Code
  16. 16. moduscreate.com @ModusCreate • Optimize Images Other Tips
  17. 17. moduscreate.com @ModusCreate • Avoid over-nesting components Other Tips
  18. 18. moduscreate.com @ModusCreate • Write Tight-performing JavaScript where possible Other Tips
  19. 19. moduscreate.com @ModusCreate
  20. 20. moduscreate.com @ModusCreate Thank you! Jay Garcia @ModusJesus @ModusCreate jay@moduscreate.com

×