Rendering Performance Evaluation - Android SDK vs React Native

UI rendering speed has always been a key for evaluating a new technology. The lesser is the rendering time, the more preferable is the technology. In the recent times, React native has become very popular for developing native apps. Such apps are truly native and way different from similar other technologies like Xamarin and Cordava. I got some time to evaluate how React Native compares to Android SDK.

TLDR: As you might expect, Android SDK outperforms React Native by a huge margin. But React native technology is slowly catching up (most of the credits goes to the amazing diff rendering technology which forms the core of React). React native is efficient enough for apps with small number of UI components which could be rendered within reasonable time.

Performance comparison

Emulator used for evaluation

Model - Google Pixel 2
API Level - 24
Resolution - 1080 x 1920 (420 dpi)
CPU - x86
Target - Android 7.0
RAM - 1536 MB

Evaluation criteria

We will be creating a large number of text views for evaluating the performance of Android SDK and React native. These text views are very simple and don't contain any more than 17 characters.

Code

Let's jump to the code for Android SDK.



So, we have a text box where you can enter the number of text views to be rendered and when the button is clicked, it shows the rendered text views along with the time taken for rendering. Remember that, every time you hit the button, all the text views are being re-created. Here is the output produced.

Android SDK output screenshot

Let's look at an equivalent code in React native.


Don't worry if the code looks unfamiliar. The code is written in Typescript. It compiles down to Javascript. Remember that, componentDidupdate() is called whenever the component is re-rendered, i.e whenever the state of the app is updated. To make the code only evaluate the creation of text views, we have a special state called evaluateViewRendering which is set to true only when the views (containing an array of text views) changes. The UI is similar to the one developed on Android SDK. Here is the output generated:

React native output screenshot

Note that, you need to reload the entire React native app each time before the input can be made. This is because React native makes use of diff rendering to render only the changed content, i.e only the updated views are created and not everything.

The following figure shows the rendering time of the two apps:


Chart showing the time taken by Android SDK and React native app

As one can see, there is a huge disparity between the rendering times of Android SDK and React native. React native is at least 30 times slower as compared to Android SDK when they are compared absolutely. This was expected as React native translates the components into Android native components at run time. 

Diffing Performance Comparison

Going by the previous evaluation, one can deduce that React native has very large rendering time and so must not be preferred at all over Android SDK. But, we are missing out a very important part of the React framework - the diff calculation of components that have really changed. In a User Interface, it is the rendering time of the updates (how fast are the updates rendered to the UI) that is even more important.

To make an evaluation, we are going to make some minor changes in the code. We are no longer going to use an input from the user. Instead, we would be rendering 10,000 text views in the chunk of 1000.

Here is the Android SDK and React native implementation of the same.




As one can see in the code above, we are calculating the time taken for adding 1000 text views to the UI. In case of React native, we are adding 1000 text views and then updating the state to reflect the change.

Here is the output produced by the code:

Android SDK output for diff rendering

React native output for diff rendering

As one can see that the update rendering time is still far too less in case of Android SDK (almost negligible). Whereas in case of React native, the update rendering time is still large, but, it is now under an acceptable range. Each update is rendered almost in the same time no matter how many views were already present. This clearly explains the power of diff rendering and how React leverages it to speed up. Feel free to play around with the code. For example, convert the views to Recycler view (Android SDK) and flat list (React native) and see how fast do they render. 

Conclusion

React native is slowly catching up in terms of speed. The creators of React native dreams of making React native at least as fast as Android. Though this might seem to be a far-fetched dream for now, they do have a lots of improvements plan for the future. I am sharing two videos from the React conf 2018 and 2016 where the team shares their plan:



Comments

  1. Great comparison! Would love to see how Recycler View compares with flat list ( would need automated scrolling, using espresso maybe)

    ReplyDelete

Post a Comment

Popular posts from this blog

DDoS Attack on Bitotsav '19 Website

Setting up Machine Learning environment on High Performance Computing Server

Computer Science and Engineering at Birla Institute of Technology, Mesra