Context:
If you are starting Android Development, or building an App Startup you might have searched for best app framework. But what you get from the Internet is not that satisfactory.
I also experienced the same. More confused than before 😵
Some of them are just explanations of each Framework’s tagline that is printed on their Website. Some of them are comparing the language to used.
But none of them compared by building the app and sharing what they felt when building the app, how the app feels in interactivity and how much the App weighs.
Here now, I am going to practically compare Jetpack Compose, Flutter and React Native by building the same app — same UI, same functionality.
This is going to be a long-form blog, so grab your snacks 🍟
Here are the other platforms where I already shared this content.
This blog is the written version of my YouTube video 👇
This blog is based on my tweet 👇
Before start comparing we want to make our system ready.
I have installed:
- Android Studio
- VSCode
- Flutter SDK
- Nodejs
Building the App:
Main point of this comparison is to build the same app in all the frameworks. I want to build a simple but functional app. I chose a To-do App.
The app is simple. Shows a List of to-dos that has one field: content.
If there are no To-dos, shows empty message. There will be an Add FAB button to add a new to-do.
Note: For React Native I used Expo to manage the workflow instead of bare react native.
If you closely watch the video, Jetpack Compose and Flutter has in-built transition between pages but React Native does not.
Maybe you can add some transition with community libraries but I think that should work out of the box. (Readers!! I might be wrong but there can be a way to enable transitions maybe I still didn’t found yet)
I have attached the App’s code, so you can play with it.
Source code for the Apps:
- Jetpack Compose: https://github.com/SanjayDevTech/perf-compose-todo
- Flutter: https://github.com/SanjayDevTech/perf-flutter-todo
- React Native: https://github.com/SanjayDevTech/perf-reactnative-todo
My Views:
Easy to start a project:
1. React Native don’t require much applications to be installed on the machine to start a project. It only needs an Editor, NodeJS and Android command-line tools.
2. Flutter also has the same requirements. An Editor, Flutter SDK and Android command-line tools.
3. But For Jetpack Compose, only Android Studio is supported and in itself needs a good PC spec to start.
Learning Curve:
1. If you know JavaScript and React, you can shine in React Native. You only need to learn few concepts.
2. Flutter requires a new language to learn but still its similar to Java and JavaScript.
3. Jetpack Compose is a new framework and it needs Kotlin but if you know Java you can get a grip. While building you often need to interact with System APIs directly, so prior Android Development knowledge is required.
Comparing APKs:
This section compares the size of the APK. I thought comparing APKs is straightforward and simple but its not. Let me show you.
First, I’ll do release builds in all of the frameworks.
Jetpack Compose: In Android Studio I’ll build a signed APK with release build variant.
Flutter: In VSCode I’ll run a command flutter build apk
React Native: Since I’m using Windows and Expo framework, we cannot build release APK in my PC.
So I need to look for any CI CD options. Fortunately Expo provides their own CI CD and that was EAS.
I have shown the demo to build APKs in my YouTube Video 👇
Good Job!! Now I got all the APKs and we can check the APK size in File Explorer.
For this simple To-do App,
- Jetpack Compose: 3 MB
- Flutter: 23 MB 😦
- React Native: 70 MB 😱
That’s too much for a simple Todo App.
Turns out I was comparing APK size in totally the wrong way. The APK size is not the download size that we see in PlayStore.
The APKs I got from different frameworks are called Universal APK, which contains libraries for different CPU architecture: armeabi-v7a, arm64-v8a, x86, x86_64.
This was the case for Flutter and React Native as it ships its Runtime along with its APK.
So the size can be 3x of the download size. To create the APK that’s specific to my Mobile Device architecture we can use AAB (Android App Bundle).
AAB is a special format accepted on PlayStore while publishing, and we can use bundletool to get download size from AAB.
Now build AAB from each framework.
Jetpack Compose: Build AAB from Android Studio with release variant.
Flutter: Run command flutter build aab
React Native: Get the AAB from expo eas.
I have shown the demo to build AABs in my YouTube Video.
Now we can use bundletool.jar to get the download size.
- Connect the mobile device through ADB
- Use Bundletool to Device Spec json:
java -jar bundletool.jar get-device-spec --output=mobile.json - Use Bundletool to get APK set (Run this for each AAB):
java -jar bundletool.jar build-apks --bundle=jetpack-compose.aab --output=jetpack-compose.apks - Use Bundletool to get download size (Run this for each APK set):
java -jar bundletool.jar get-size total --human-readable-sizes --apks=jetpack-compose.apks
The last command will print the Download size in MBs.
All the commands are added in my tweet 👇
Now the APK size is reduced:
- Jetpack Compose: 1.6 MB
- Flutter: 8.5 MB
- React Native: 10.7 MB
We have a clear winner here, Jetpack Compose
Oh woof!! This blog seems to surpass 1k words. Have a break and come again because next we’ll be comparing the Performance 🌈.
Comparing Performance:
We have three metrics to measure to compare the performance:
- FPS
- CPU
- RAM
To Stress test the apps, I am going to take two techniques:
- Rendering Long Text
- Rendering Animations
So, I have created a simple App to render 2000 text widgets.
Source code for the Apps:
- Jetpack Compose: https://github.com/SanjayDevTech/perf-compose-2ktext
- Flutter: https://github.com/SanjayDevTech/perf-flutter-2ktext
- React Native: https://github.com/SanjayDevTech/perf-reactnative-2ktext
Now how we can measure the performance?
We have a tool for that: Flashlight
I have made a video on how to use Flashlight 👇
At the end of it, the flashlight gives us a HTML report of the performance: https://performance-benchmark-android.vercel.app/2k-text/reports/reports.html
From the Report, Compose launches first; Compose uses less RAM and gives average FPS.
Compose wins here! Againnn!!
Next step is to compare Animations.
The challenge is we need to render the same kind of Animation in all of the frameworks. So I chose Rive.
So I crafted this with 500 Rive Animations,
Source code for the Apps:
- Jetpack Compose: https://github.com/SanjayDevTech/perf-compose-rive500
- Flutter: https://github.com/SanjayDevTech/perf-flutter-rive500
- React Native: https://github.com/SanjayDevTech/perf-reactnative-rive500
Let’s run this with Flashlight and get the report,
Report: https://performance-benchmark-android.vercel.app/500-rive/reports/reports.html
Now the winner is changing, its Flutter now.
Flutter renders the Animations first and became interactive.
Conclusion:
Honestly there is no conclusion
Before making the comparison, I thought Native will win in all the cases.
But results made me to respect the other frameworks as well.
Well, if you see there are two types of developers existing now.
One would argue Native is best and other argues Hybrid is best.
And These Hybrid will again split into different frameworks.
And I was one of the Native people.
In my past, I learnt Flutter because I had to build projects. So I get to know what Flutter can bring.
But I didn’t got the same pressure for React Native, as a result I couldn't learn React Native and I was distancing myself from it.
When I look into the results and the progress I made while building the apps in all of the frameworks,
I think you cannot choose a best of the best framework because there is nothing like a best of the best.
But rather we should understand the pros and cons, and I have covered only a tip of the iceberg of the pros and cons.
Hope this article helped for you and Signing off.
Follow me:
