Flutter at OY! Indonesia: The Motivation

Published in

OY! Indonesia

7 min readJun 4, 2020

4.1.4; Its the first version of OY! Indonesia mobile app that is built with Flutter SDK. Since September 2019, we decided to use Flutter SDK as our main mobile app framework. We chose to not only adopt this for some part in our app, but we do full migration (read Part II on why we choose to do this) from Native iOS and Android into single codebase in Flutter.

Why you want to leave the native?

Let me guess the first thing that pops in your head

Why we had to move from native to hybrid app? Don’t you care about performance? Or your engineers are lack of skill? Oh I know, your place is such a stingy company?

Well the first thing that we care is user, not the performance of the app itself. Even though we agree that native performance was unbeaten by any mobile cross-platform development technology. We think that kind of philosophy was too old and here is why:

The mobile cross-platform development technology has been optimized (and well maintained by big companies e.g Facebook, Google, etc.), along with advancement smartphone hardware performance it will result nearly zero gap of the experience between using native and hybrid apps.

A natural benefit of cross-platform development apps is a single codebase that is shared between for Android and iOS which will result in faster product development. This means that we can deliver new features to the users , resolve bugs and even sunset unwanted failed features faster than ever.

Why Flutter?

Today, there are two major players when it came to cross-platform mobile development; React Native (by Facebook) and Flutter (by Google). Both of these frameworks have a rich set of features, list a lot of libraries and garner widespread support from the community.

Fortunately, there are a number of articles that have been published around benchmarking Flutter against React Native such as this or this. Synthesizing those articles and our independent research of the two frameworks:

Performance: React Native uses javascript environment as a communication bridge with native modules. In the other side, Flutter engine (flutter dart framework use Skia C++ engine) has most of native components in the framework itself and it doesn’t always need a bridge to communicate with the native components. So in the result flutter performance slightly better compared to react native (there was article here that prove of this concept)
Popularity and support: Flutter is backed by Google and React Native by Facebook, both platform have good documentation and support by community. In Github, Flutter has 88k stars and React Native 85k (per March 2020), even though RN was released earlier in 2015 and Flutter start on air in 2018. We see this as good prospects in the future for Flutter.
UI Components: Our app design is very beautiful but it needs a lot of UI customization to develop. React Native relies on native UI components and it will need extra effort to customize. In contrast, Flutter has its own set of custom widgets, rendered and managed by the framework’s graphics engine. It enables us to easily customize UI on our app, because everything is widget in Flutter, right?

Benchmarking

Now we need to prove that if we move to cross-platform development, there will not be any big difference with our current native app in terms of its performance, package file size and development time. Here is how we proving that.

Define 1 quite complex feature in our app as a target for development. We choose our financial summary feature in our app, because it has quite complex UI and network request.
Develop that feature on both framework and make sure there is no other background or unknown process in both apps.
Run the apps on the exactly same device and do profiling. We were using Samsung A7 (SM-A750GN) for Android and iPhone 6s for iOS.
Benchmark the performance, package file size and development time for both native-app and flutter-app.

Performance

We compare the CPU and memory usage of both apps.

Android Native App, use more or less 50% of CPU and 194.3 MB of Memory

Android Flutter App, use more or less 50% of CPU and 268 MB of Memory

It was very small different between CPU usage on both apps. In terms of memory usage, Android Flutter-app usage use up 73.7 MB more memory than the native. Let’s say your phone has a standard 2GB of RAM (my friend has 12GB RAM on his Android phone), so we can tell its only increase ~3.6% of your phone RAM usage. We think this result was acceptable (also for many device hardware nowadays that mostly have gigantic memory size :’).

Meanwhile, this is the result for iOS app:

iOS Native App, use 66.3% of CPU and 1.37 GB of Memory

iOS Flutter App, use 73.6% of CPU and 1.40 GB of Memory

Package file size (.apk and .ipa)

The difference of package file size between native and Flutter is negligible. Especially in Android, when we use their app-bundle package (instead of .apk file) for publishing the app in Playstore, its almost no difference in term of the app size that have to be downloaded by user. Here is the package file size comparison between Flutter base app and native. You also can read the official article about this here.

APK Size: Native based has 13.9 Mb and Flutter based has 21.4 Mb size. It increase about ~7.5 Mb in .apk size. The size increases because we did not optimize the flutter base app and that after we publish our app with app-bundle package, the size different is not that much.
IPA Size: Native based has 147.4 Mb and Flutter based has 164.2 Mb size. It increase about ~14.6 Mb in .ipa size.

Development cost

Not to mention that the number 1 listed in advantages of cross platform development was its cost. You can make a feature in both Android and iOS with single codebase. Roughly we can say it can make you 2 times faster when develop feature. You can move a half of mobile engineering team into backend engineering without losing its development speed.
Interesting right?

However, we also need to consider the cost of learning (since all of our mobile engineers have no experience in flutter previously) and cost of improving the code quality from the beginning. So it depends on engineering team, if your team is the kind of learning animals that always seek new challenge and knowledge, this cost is worth to pay. But if it doesn’t, the team will face it like problem and a long way to go to achieve the ROI.
Fortunately, we always have growth mindset in the Oy engineering team and treat this change as the opportunity to learn something new and as per this article released, our speed of mobile development increase more than 2 times.

How about the development speed between build the native app vs flutter app? Can we go faster with flutter apart from its single codebase benefit? Yes, we can!. As you might know the native app development (either Android or iOS) is using imperative style of UI development. You have to construct UI “things” (e.g UIView, xml layout in Android, or storyboard in iOS) at the first place and then mutate it using methods and setters when the UI changes. In contrast with flutter which using declarative/react-style UI, it let us to describe the current UI state and then leaves the transitioning to the framework. It obviously will reduce the must be written code and make our development faster. However, when you came from native development and learn flutter, you might need slight shift in thinking for how to manipulate UI.

Conclusion

For us this migration was a bold decision. All of our engineers were native mobile engineers before and have zero experience in Flutter. But with the growth mindset as our culture, it was not obstacle at all. We have to learn something new but future proof that what we learn is worthy. For company sake, this migration make our development faster without sacrifice the experience of our users. We hope that this article and the next ones in the series can enlighten and inspire other companies that consider to change their mobile tech stack and also for the engineers who want to explore cross-platform frameworks. Do note that this is based on our experience and needs at Oy Indonesia. Other companies might have a different set of considerations if they want to follow a similar path.

This is the Part 1 in a series of articles about Flutter in OY! Indonesia.

If you are passionate about solving interesting and impactful challenges, OY! Indonesia would be a great playground for you to unleash your creativity. Join us!

Want to experience the most seamless payment experience? Try to download OY! in Google Play and App Store and please feel free to give us feedback about it 👌🏼.

Reference: