Evaluating Third-party Libraries for Performance
Web / Mobile / VR / AR / IoT / AI
Novick Labs
Agenda
-
Introduction to Library Evaluation
-
Criteria for Library Selection
-
Analyzing Library Performance
-
Common Performance Pitfalls
-
Case Studies
-
Optimizing Library Usage
-
When to Build Custom Solutions
Introduction to Library Evaluation
key criterias for selecting libraries:
- Maintenance
- Size
- Functionality
- Community Support
- Performance
- Compatibility
- License
Tools used for performance evaluation
- React Native Performance Monitor
- Flipper 0237.0
- React Profiler
- Helpful npm packages
- Xcode Instruments
- Android Profiler
Criteria for Library Selection
- Functionality
- Community Support
- Update Frequency
- Library Size
Measuring library size by analyzing the bundle
react-native-bundle-visualizer
Patching libraries
patch-package
Analyzing Library Performance
- Measure metrics before the library
- Measure metrics after installing the library
Metrics
- Monitor duration from app launch to a key initial milestone
- Re-renders (for component libraries)
- Frames drops on JS/UI threads (perf monitor)
- Memory leaks
Common Performance Pitfalls
re-rendering
heavy image manipulation
complex computations on JS thread
Optimizing Library Usage
- use modular libraries
- replace general imports with module imports
When to Build Custom Solutions
- How much of third-party lib functionality do I need
- How much library customization is involved?
- Is there a value in community support and maintenance
- Cost of development and maintenance
The Role of Native Modules
Text
Reducing Dependency Bloat
Text
Re-Rendering
re-rendering
heavy image manipulation
complex computations on JS thread
Re-Rendering
re-rendering
heavy image manipulation
complex computations on JS thread
Schedule
- React Native performance intro
- Understanding & Identifying Common Performance Issues
- Exercises 1 & 2
- Animations , Memory management & Network
- Exercise 3
- Review, QA & Closing
React Native internals recap
React Native internals recap
React Native internals recap
Start
Main Thread
load .js bundles and send to JS thread
React
Reconciler generates new VDOM layout
JS Thread
layout calculations
using Yoga
UI
updates
Shadow thread
Native modules
Understanding & Identifying Performance Issues
- ui re-renders/jitters
- unnecessary rendering
- lack of memoization
- animations dropping frames
- memory leaks
- unnecessary network requests
- app crashes
Symptops
Coding time!
10 minutes break
npx react-native-bundle-visualizer@3.1.0