Still, Going Native Is Better Than React Native and Flutter

Having a single codebase is a great thing. But there are hidden side effects.

Shalitha Suranga
Mar 1 · 5 min read
Photo by Claudio Schwarz | @purzlbaum on Unsplash

Cross-platform mobile frameworks solved the critical cross-platform development problem in many different ways. Initially, the Apache Cordova project (formerly PhoneGap) solved this problem by introducing webview-rendering. After that, the Ionic project created a native-like HTML/CSS widgets toolkit for Apache Cordova. Ionic motivated everyone to choose Angular as the frontend framework for developing cross-platform mobile apps. However, both frameworks are built based on native bridges for JavaScript to native communication vise versa. In other words, They created a generic JavaScript interface for native features and exposed native features to the webview.

Many developers created mobile applications with these kinds of webview-based frameworks. However, everybody realized that native GUI elements are in the heart of a user-friendly mobile application. The uprising of React Native and Flutter has happened. Both frameworks gave the freedom to go with a single codebase like Ionic by having truly native GUI elements. Let’s look at these two trending projects.

Flutter

Flutter created their own widgets framework for a cross-platform 2D graphics library called Skia. On the other hand, Skia can run on both Android and iOS platforms. Therefore, whatever you build using the Flutter widgets framework will work on Android and iOs. Besides, they created Dart libraries for native features. For example, if you want to make your phone vibrate, you can use the vibration Dart library. These Dart libraries usually call native code directly to do the required functions. For example, the vibration library uses android.os.Vibrator class in the Android platform.

The great thing about Flutter is that it allows you to create the same look and feel for your app on any platform. Your application will look exactly similar on Android, iOs, Linux, Windows, macOS, and Web. We can clearly see that Google created Flutter to solve their cross-platform development problem. They wanted an easy way to make apps for Android, iOs, and, Fuchsia with the same look and feel.

React Native

Facebook used their own web library (React) to solve the cross-platform problem. React library uses DOM as the rendering backend. They created React Native by switching the backend from DOM to native mobile. In other words, components made with React Native will render as truly native GUI elements on each platform. Solving the layout problem could be challenging if we need to have native system GUI elements. In other words, the layout system is different in Android and iOS. Therefore, React Native introduced the Yoga cross-platform layout engine for both mobile platforms.

The Yoga layout engine’s syntax is very similar to the CSS flexbox. The native actions handling concept of React Native is very similar to Apache Cordova. Apache Cordova uses a native bridge via the webview to execute native code from JavaScript. On the other hand, React Native uses a native bridge via a JavaScript engine because there is no webview anymore. We can clearly see that Facebook created React Native to simplify the dynamic GUI-handling logic of their mobile applications.

Hidden issues in Flutter

If you are planning to have the same look and feel across many platforms, Flutter is a wise choice. But there are some disadvantages as well.

  • Dart is not a widespread language compared to JavaScript, Java, Kotlin, Swift, and, Objective-C. Therefore, if you are planning to use Flutter, you have to either hire new Dart developers or ask existing developers to learn Dart.
  • Flutter uses Dart instead of Java and Objective C/Swift. Therefore, there are Dart libraries for native operations. Some libraries are official, and some are third-party libraries. External libraries can have limitations and bugs. No wonder if your software tester reported an issue that belongs to one of your dependency libraries.
  • Flutter uses their own widgets toolkit on their own 2D graphics library. I saw there are a lot of bugs reported about animations on Android/iOS.

Hidden issues in React Native

If your application has more native dynamic content, React Native is a wise choice. But there are some disadvantages as well.

  • The same scenario as Flutter is happening here as well. There are JavaScript libraries for handling native operations.
  • React Native uses the bridge concept somewhat similar to Apache Cordova to run native code. Undoubtedly, we cannot expect a performance gain from JavaScript compared to native code. Besides, React Native applications can take above average CPU usage and physical memory usage.
  • React Native’s learning path could be a bit challenging for developers who are new to React. On the other hand, Flutter offers a simple object-tree-based layout concept which is a lot easier than the native way.

Frameworks vs. the native approach

Native API offers a very flexible and up-to-date way to build mobile applications. But, frameworks provide a generic abstraction layer for multiple mobile platforms. If Android/iOs SDK introduced a new API, you need to wait until someone creates a cross-platform library for it. Otherwise, you have to write a cross-platform library yourselves. Therefore, if you are planning to build an application that consumes a lot of core APIs, the native way is the safe and reliable method.

Further, if you are directly using the native API, there is no need to worry about the issues coming from wrapper libraries. In frameworks, if you found a bug in a wrapper library, usually you have to wait until someone applies a fix for it. Each framework solved the cross-platform problem by creating several side effects. But if you are going native, there are no such side effects.

Conclusion

Still, native is the winner if we compare the technical side and user experience. However, the development cost and rapid feature delivery are important factors of modern mobile application development. Therefore, we can choose a cross-platform mobile framework by considering all aspects that may affect the mobile app’s quality and our business. If we need an optimal way that is better than going native, there are two:

  • Each platform can offer a generic interface for its native API.
  • Implement a framework that will transpile everything to the native code.

The above events haven’t happened yet. Therefore, still, going native is better than cross-platform frameworks.

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Thanks to Athif Shaffy

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Shalitha Suranga

Written by

Programmer | Author of Neutralinojs and Jerverless | Technical Writer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store