The AppsTo ensure that the tests represent real world scenarios, we run end to end scenarios on apps that sit on either end of the spectrum.
- Chain React Conference app - A small scale React Native app with minimal network dependencies but a fair amount of content.
- Mattermost app - A real world app, with complex interactions, layouts and functionality used regularly by many people, but for business reasons.
SetupUpgrade to 0.60: At the time of testing, ChainReact and MatterMost were not on React Native 0.60. The first order of business was to upgrade them to the latest version. React Native 0.60 for Android comes with non trivial changes (like AndroidX), and automated scripts were used to facilitate the upgrade. Commits for the upgrade are available in ChainReact and Mattermost repo forks.
Adding Instrumentation: Instrumentation was to both the apps, to get data points on the Java start up path, as well as the mount times for components. Instrumentation was added based on a previous blog post and the performance data was sent to a server running on port 3000. This work is available as commits in ChainReact and MatterMost repo forks.
Network Isolation: To remove flakiness due to network, the networking module was overridden with an OKHTTP point to a proxy. The proxy saves all responses needed for TTI and replays them with equal delays for all tests.
Test Script: The tests were run 100 times on an Android Pixel device for each app, for each engine. The tests were automated, and the app was launched using intents. The test concluded when the instrumentation server received data. The script would then run adb shell dumpsys meminfo to understand the memory usage.
ResultsOf the 100 iterations, the 75th percentile TTI was chosen, and here are the results.
Mattermost Mobile App
The APK size links also show the tree maps of sizes, and the large difference can be attributed to the fact that Mattermost needed to use the "intl" version of JSC.
ChainReact AppThe Chain React app was tested across the three VMs (V8, JSC and Hermes), and here are the results from the 75th percentile.
Did someone say they wanted to try out @HermesEngine ? Well, there is a build of the @ChainReactConf conference app, running on new engine !! pic.twitter.com/gYsBEY8WRd— Parashuram (@nparashuram) July 11, 2019
I am also working on getting Hermes working with the react-native-js-benchmark. In the meantime, here are some ideas that you could use to improve the performance of your React Native app.
Slide-Tweets from my talk about @reactnative performance. Hoping that this would help people fix perf issues in their apps— Parashuram (@nparashuram) July 12, 2019
Here is a summary of the different things i spoke about. pic.twitter.com/RnLPbmiJgT