Well! You must have heard a lot about different mobile app development SDKs like Flutter, React Native, Native till now, but are you still confused about choosing the most suitable platform SDK? We at TBO had a similar question in our mind when we decided to choose hybrid mobile development approach. This article will highlight why at TBO, we need cross-platform SDKs and evaluate the pros and cons for Flutter and React Native. We have also added points for native development platforms at some places for better comparison. This comparison helped us in late 2019 to decide which framework to choose for our future products.
Quick Introduction
React Native
React Native (RN) is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP (Universal Windows Platform) by enabling developers to use the React framework and native platform capabilities¹. (Developer Site)
Flutter
Flutter is an open-source UI software development kit created by Google. It is used to develop cross-platform applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, Web platform, and the web from a single codebase². (Developer Site)
What is Cross-Platform and WHY?
Cross-platform means a single code base that can run on various operating system. Typically for mobile apps, this would suggest writing a single code and running it on Android and iOS instead of developing different app versions for each platform. Below are some essential points to consider:
Faster Development: Single code base means development will be much faster. Instead of discussing with two different teams (Android and iOS), you would do brainstorming with a single team and saving much time and faster development. Time to Market is significantly less in this case.
Development Cost: Since a single team is aligned for the development instead of two, the development time and resource cost will be almost half. Indeed, the verification process will be shorter for the second platform as you have already verified business logic and are now left with only platform-specific testing. Start-ups can benefit a lot from this.
Maintenance: Single code base is always better maintainable as both platform works in sync and yields better productivity. Any bug fixes in one platform resolve it for another platform as well. Hence, saving a lot of engineering bandwidth.
Sync Both Platforms: Ideally, in Native, development speed would differ for both resources. It affects release planning as well. While one app might be ready for release, you must wait for another platform to complete. With a single code base, both apps would be prepared simultaneously.
Proof of Concept (POC): If you are a start-up and pitching for your idea, you can quickly have a prototype ready for demo instead of having a full-fledged app. Build a Minimum Viable Product (MVP) promptly with cross-platform. You can even trail it in the Market before investing big-dollar budgets for bigger teams.
The Comparison
Programming Language
Flutter is based on Dart language. Dart is an object-oriented programming language designed for client development — web and mobile apps. Read more about Dart.
RN is based on JavaScript (Node.js) and React. Here is the original article by Meta (Earlier FB) published- https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/
Native App language is platform-dependent, and Android apps can be built using Kotlin or Java. Typically, the iOS app uses Swift for the native app. As a single developer, you need to learn two different languages if you want to build for both platforms.
Learning Curve
There is no substantial proof that one platform is simpler than the other. So in this respect, we would consider all platforms equal. It depends on individual capabilities and, more importantly, one’s searching ability to find relevant tutorials and solutions for your problem. However, both platforms are easy to start with, and any developer with little experience can kick start.
Prebuild Components
Flutter has a rich range of prebuild components available and open source at https://pub.dev/ while RN has limited components available.
App Popular ~ Industry Acceptance
React Native is currently being used by companies like Meta (for Facebook, FB Ads Manager, Instagram), Bloomberg, Discord, Pinterest, Walmart, Delivery.com, Wix, Salesforce, Skype, Tesla, UberEats, Shopify etc. to name a few.
Companies like Google are currently using Flutter (for Google Ads, Google Assistant, Google Pay, Stadia etc), Tencent, Nubank, Alibaba (for Xianyu), SpaceX Go, ByteDance, Hamilton, New York Times, BMW, Dream11, Groupon, eBay, Philips Hue, Toyota, Ubuntu, Reflectly, Kotak Bank, PostMuse etc. to name a few.
Documentation
Flutter provides excellent documentation support. The official http://flutter.dev/ itself is enough to kick start development. However, React Native documentation is very weak. Although RN has an official website, https://reactnative.dev/docs/getting-started is trying to catch up now.
Technical Architecture
Flutter is based on Skia (2D rendering library), which is also used on many other projects like Chrome, Android, Chrome OS, Mozilla Firefox etc. RN is based on Redux/MobX(a JavaScript Library)
Device Features
Flutter provides inbuilt support for many device features via its libraries. One of the significant disadvantages of RN is that developers have to depend on 3rd party plugins for these features. Many times, your app break because of these dependencies.
Performance
The performance of Flutter and React Native is almost identical. Both have a framework that is optimized to work best in cross-platform.
Maintenance
Flutter projects are always backward compatible. However, RN projects can cause issues in this case. The main reason is its dependency on 3rd party libraries.
Hot Reload
The best thing about Flutter and RN is the hot reload functionality. The hot reload feature helps developers quickly and easily experiment, build UIs, add features, and fix bugs. It makes cross-platform development much faster than native development.
UI/Experience
Flutter app, by default, gives the same user experience for both Android and iOS apps. Flutter works on the theming principle (Material, Cupertino etc.). So, Flutter apps looks precisely the same on both platforms. However, RN converts UI into the respective platform. As a developer, you would not be sure about UI visible on different OS/Platforms.
Screen Control
Flutter gives you pixel-level control on the screen while RN controls component level.
Community
One of the most significant aspects is the developer support and community. As of Feb 2022, the following are community status for both projects.
Github stars:
Stackoverflow followers:
Launch Date
RN was launched in 2015, F8 Conference whereas Flutter was launched in 2018 in Google I/O.
As TBO Group, we choose to bet on Flutter, looking at its advantages. It was a good bet looking at the business cases we have to cover and in-house skills set us had. This bet was taken at the end of 2019, and now most of our products work on Flutter, and they have a successful User Experience.
Summary
Below is the quick summary of this article:
Flutter | React Native | |
Programming Language | Dart | JavaScript and React |
Learning Curve | Easy | Easy |
Prebuild Components | Very Rich | 3rd Party |
Documentation | Excellent | Novice |
Technical Architecture | Skia as rendering engine | Redux/MobX (JS Library) |
Device Features | Inbuilt support | 3rd Party dependency |
Performance | Great | Great |
Maintenance | Backward Compatible | Breaks easily |
Hot Reload | Great | Great |
UI/Experience | Same in all devices | Respective to platform |
Screen Control | Pixel-Level | Component Level |
Community | Strong | Good |
Launch Date | Google I/O 2018 | F8 2015 |
UI/Experience |
[1] https://en.wikipedia.org/wiki/React_Native
[2] https://en.wikipedia.org/wiki/Flutter_(software)