As mobile app development continues to grow in popularity, businesses are looking for ways to create cross-platform apps that can be used on a variety of devices.
When we say cross-platform, we of course refer to Android and iOS. Per Statista:
Android maintained its position as the leading mobile operating system worldwide in June 2021, controlling the mobile OS market with a close to 73 percent share. Google’s Android and Apple’s iOS jointly possess over 99 percent of the global market share.
In this article, we will compare two popular frameworks for cross-platform development: Flutter and React Native. We will look at the pros and cons of each framework and discuss which one is better suited for use in 2022.
Contents
1. Why is mobile app development so popular?
2. What is cross-platform app development?
3. The history of Flutter and React Native
4. How Flutter and React Native compare
5. How cross-platform development frameworks work
6. Building mobile apps is fun again
7. Pros and cons of Flutter and React Native Apps
8. Is Flutter or React Native easier to learn?
9. The Best Backend for Flutter
10. The Best Backend for React Native
11. Flutter vs. React Native in 2022
Why is mobile app development so popular?
Developing mobile applications is a steadily growing business niche. Virtually all people on the planet have mobile phones, which means a nearly unlimited number of potential users. Consequently, there are apps for almost everything nowadays.
You can choose many ways to design and build an app. You can either use native methods, e.g. Swift and Objective-C for creating iOS apps and Java for Android apps. These are the official Apple / Google software programming languages, respectively, which provides support and frequently updated features.
Alternately, you may use cross-platform frameworks such as Flutter or React Native.
What is cross-platform app development?
Before we begin, let’s define the term “cross-platform app development” and divide it into two categories: Hybrid Development and Native Development.
Cross-platform apps are apps that can be developed using a single codebase and function virtually identically on both iOS and Android operating systems. (In this article, we are focusing on mobile app development; we talk more about web and desktop apps here.)
Hybrid Development
Hybrid apps are developed with a combination of web technologies such as HTML5, CSS and JavaScript. This means that hybrid apps share some code across platforms (e.g. the HTML/CSS/JS code) and this shared code runs in a webview on the target platform.
WebView apps are hybrid apps that use embedded webviews to render their user interface, within which you can use HTML5, CSS and JavaScript for customization.
WebView apps will have some limitations in accessing the device API out of the box, requiring additional effort to achieve some of the same functionality as native apps. The trade-off is that these apps are cross-platform out of the box, which can be a significant time saver.
Hybrid apps may look the same on both platforms but behave differently, depending on platform-specific APIs available to them. E.g. a weather app would check the API of the current location’s weather service on both platforms and return different data according to what is available on each platform.
Native Development
Native apps are developed with the native SDKs of their target platforms (e.g. Android or iOS). This means that they do not share any code across platforms and this shared code is written only for the targeted platform, whereas the UI is implemented using platform-specific widgets and libraries.
Native apps provide a better user experience than Hybrid apps and also look more native on each platform, but they cost more to develop and take longer to release new features due to the time needed for developers to learn the APIs of the target platforms.
In general, it is ideal to develop your app using the native development tool of their target platforms (e.g. Android Studio or Xcode).
Flutter and React Native: Cross-Platform Frameworks
Both Flutter and React Native are among the best cross-platform development frameworks available today. They both use native widgets to deliver a highly customizable, responsive UI while sharing code across different platforms.
The Flutter framework is developed by Google while the React Native framework is developed by Facebook, so these tech giants have very large teams dealing with everything from the platform’s SDKs to its documentation, support, etc.
While Flutter and React Native apps are both native, they are advantageous over traditional native app development because they can share a significant proportion of their codebase across platforms.
According to Instagram, the amount of code shared between iOS and Android via their React Native features was over 90%.
The history of Flutter and React Native
Flutter was announced at the Dart Developer Summit in October of 2016. The main idea behind this cross-platform mobile app development framework is to give developers tools to build native apps for iOS and Android using one single codebase written in Google’s own Dart programming language.
The first stable release (1.0) of Flutter came out on February 16, 2018.
React Native started a little bit earlier than Flutter, having its first beta version released on March 2015, however it didn’t manage to leave the beta phase until March 2017. On September 5, 2017 React Native reached version 1.0 with huge support from tech giant Facebook.
As you can see both technologies are relatively new, but don’t let that fool you. React Native is already used by big players like Facebook, Instagram, Airbnb and Uber.
Flutter doesn’t boast the same big names, but has already been embraced by BMW, Toyota, eBay and, of course, Google’s own Google Pay.
How Flutter and React Native compare
The main difference between Flutter and React Native is that React Native does not compile into a native mobile language (Java, Swift, Objective-C), but rather simply runs its JavaScript code. Flutter, on the other hand, compiles its Dart language into native, which can impact performance (discussed later).
Another big difference is that vanilla JavaScript (besides JSX) is used for writing components on React Native. Facebook developers recommend using Flow or TypeScript when with React due to its dynamic nature. For Flutter, Google recommends using Dart for writing code as well because of its static typing system.
In our opinion, the decision on which of these 2 technologies to choose should be based more on your preferences rather than on their actual features and capabilities.
Of course it’s good to know all programming paradigms so you can easily pick up new languages and frameworks even if they’re not written in a language you’re familiar with.
Programmers who are already familiar with JavaScript (ES2015+) or TypeScript/Flow will find it much easier to start working with React Native. This is particularly true of developers that have used React for the web, as there is a great deal of overlap between React and React Native.
JavaScript still has a significant market share in the mobile development space, and because both React Native and Flutter allow you to choose your favorite programming language, it’s hard to say which one will be more popular in 2022.
There are also other important factors that might influence this decision, such as:
– Companies’ preference toward a specific technology stack
– Developer’s familiarity with a given language/framework
– Availability of developers with skills necessary for using a specific technology
As we have already pointed out, React Native and Flutter are both going to be significant players in 2022, so it’s up to you to choose which is the best option for your long term goals.
How cross-platform development frameworks work
Although cross-platform mobile development frameworks share many concepts and features, they’re each created with different goals in mind.
React Native was designed to provide native code performance combined with the ease of development that React web brings into the table. The idea is not to use a single set of shared components between iOS and Android but instead to have completely separate UI’s wrapped into a single JavaScript bundle, allowing you to ship almost half of the app’s code in a single place.
Flutter was created mainly to fulfill Google’s needs for… Google. In other words, another attempt at marrying fast development cycles with native code performance and building reusable UI components that can be shared between iOS and Android apps. This is why Google’s Flutter is so much faster than React Native.
Flutter was also designed with the idea of making app development easier and more accessible because it allows writing code using Dart, a language that can be learned in a weekend and mastered in days or even hours depending on the developer’s skillset.
This is why we believe that Flutter will be the mobile development framework of choice for companies that need to create lots of native mobile apps very quickly without sacrificing performance or features.
Building mobile apps is fun again
When Google announced Flutter, developers were stunned by how well it performs in practice compared to other technologies developed specifically for the purpose of building cross-platform mobile applications.
React Native’s philosophy of sharing UI code between iOS and Android was a great initiative, but due to React Native’s inherent limitations, the resulting apps cannot perform as well as native ones.
Flutter comes with a lot of goodies that you will not find in any other tool today. Dart is an impressive language that has been built from the ground up for the purpose of creating mobile apps.
Dart is currently the fastest language available for building Android and iOS apps, makes it easier to build performant UI components, has great IDE (integrated development environment) support with powerful autocompletion features, allows doing live coding prototyping without losing app state, and finally embraces object-oriented programming by making it mandatory.
Having an opinionated framework means that Google will be able to make many important decisions for you, allowing the community to focus on what’s truly important – building apps.
Flutter came with a complete toolchain and a beautiful Material Design-like set of widgets that developers can reuse in their apps. Google has also created a number of integrations with 3rd party libraries such as image-processing libraries for handling images in an efficient way, SQL databases (made accessible through abstractions), and text editors.
All of this is presented to developers as a cohesive package that has been designed with speed, ease of use, productivity, and performance in mind.
Pros and cons of Flutter and React Native Apps
Apps created with Flutter are indistinguishable from native ones. They come with the same performance and the same look & feel (apart from some platform-specific stylistic aspects).
The main issues that people usually complain about when building apps using React Native are related to its runtime environment, which is heavier than managing separate processes for each architecture. This means that you will not be able to pull off a pure native app performance using React Native, although you can get close.
Flutter does not come with the same benefits as React Native in terms of supporting existing JavaScript codebases and allowing reuse of some components shared between apps for iOS and Android.
Now, let’s dive a little deeper into the technical pros and cons of these two frameworks.
Pros and cons in terms of native performance
React Native comes with an improved JavaScript virtual machine that is faster than V8 thanks to its JIT compiler. It also benefits from being an ahead-of-time compiled framework, which means that you are free to ship whatever codebase you need because it will be compiled into a native executable.
In practice, React Native is as fast as pure native apps because it can achieve the same performance of an iOS app without requiring any changes to the iOS build settings.
Flutter comes with its own Ahead-of-time compiler that will emit optimized code for both iOS and Android once you have built your project. You get native performance without having to ship the whole codebase in your application binary just like with React Native.
Pros and cons in terms of app size
React Native apps usually come with a JavaScript runtime that weighs about 300kb gzipped, although it is possible to reduce this number by tweaking some options such as Bypass filling (which will force React Native to skip a process of filling its virtual DOM with the result of diffing it against the native UI) as well as by setting useDeveloperMode to true (which will resize images in memory and reduce their quality).
Flutter comes with an ahead-of-time compiler that allows developers to ship only the codebase needed for the app they are building without having to bundle anything with it.
It is possible to run Flutter inside an existing JavaScript VM if you want to, which will allow you to save on the space needed for your app.
Pros and cons in terms of minimal required SDK version
React Native can usually be built against any iOS 9+ or Android 5.0+ SDK without any problem, but it goes without saying that to achieve the best performance you should target the latest SDK versions available at the time of your release.
In practice, React Native apps can be built against older iOS and Android SDKs with a limited set of features being available at runtime, although to get all the features you should still target the latest SDK versions available.
Flutter apps can be built against Android version 21 (Lollipop) and newer, although it is recommended to build against the latest SDK versions available for best performance.
Flutter can be run on iOS 8 or newer but calling some APIs may result in runtime crashes given that Apple has deprecated most of the APIs that Flutter uses.
Pros and cons in terms of UI development
Flutter comes with its own set of widgets for rendering the UI, which means that you can reuse existing iOS or Android code when building Flutter apps.
Some third party libraries are available for making it easier to reuse existing native components, although this is still a work in progress as it is not easy to map Flutter widgets to existing iOS and Android UI components.
React Native comes with a bridge that allows you to reuse existing iOS and Android code as JavaScript modules as well as exposing some APIs for manually creating the bridge between your native UI components and the JavaScript code that will handle rendering them.
Pros and cons in terms of debugging
React Native comes with its own debugger that can be attached to your running app on iOS and Android, which provides developers with a preview of the current state of the JavaScript virtual machine along with various tools for inspecting memory usage or tweaking some options on the fly.
Flutter comes with its own debugger as well, which can be attached to your running app on iOS and Android providing developers with a preview of the current state of the rendering engine as well as various tools for inspecting memory usage or tweaking some options on the fly.
Pros and cons in terms of code reuse between mobile platforms
React Native comes with its own set of APIs that can be used when developing both iOS and Android. Although most companies using React Native will develop their apps on one platform first (usually iOS) before porting them to the other platform, it is also possible to write shared components between your iOS and Android applications if you so wish.
Flutter apps are built with code that is platform specific, so it is not possible to share any code between your iOS and Android application. However, third party libraries are available for making it easier to reuse existing native components.
Is Flutter or React Native easier to learn?
Both React Native and Flutter are equally easy to learn (in terms of APIs), although this will depend on the expertise of the developer. Both have a large and engaged developer community that can help new developers and is consistently creating new tools and components.
For a brand new developer with little or no coding experience, we would probably recommend starting with React Native as it comes with a set of predefined components that can be used to build iOS and Android apps, which means that you can learn one thing at a time without having to worry about learning all the APIs used for rendering views.
However, we would probably recommend to choose Flutter over React Native for a developer with some coding experience, as the APIs offered by Flutter are closer to what you can find in both iOS and Android.
In addition, the team behind Flutter is focusing greatly on ensuring that the development experience offered by Flutter can compete with the development experience offered by the other SDKs out there (including React Native).
The Best Backend for Flutter
It may seem that a Backend as a Service (BaaS) like Google’s own Firebase would be the best choice for supporting a Flutter app, but the reality is quite different.
Backendless provides a much more complete and affordable backend solution for Flutter apps. The Backendless Flutter SDK enables you to interact not only with Flutter mobile apps, but also with Flutter Web, designed for web and desktop apps.
Backendless includes all of the elements necessary for a complete and scalable backend. These features include:
- Secure real-time database
- User authentication and user management
- Server-side business logic (Cloud Code) including timers and event handlers
- Pub-sub messaging capabilities
- Push notifications for both Android and iOS
The Best Backend for React Native
Unlink Flutter, there is no “on brand” backend for React Native. Similar to Flutter, however, React Native apps integrate very effectively with BaaS platforms like Backendless.
The same features Backendless provides for Flutter developers are available for React Native developers to include as well. For a React Native developer looking to maximize their development efficiency, BaaS solutions can take a large portion of backend development tasks off of your hands, allowing you to focus on producing the best UI and UX possible.
Flutter vs. React Native in 2022
React Native came out in 2015 and since then it has been used by many companies. The JavaScript world changes very fast so React Native has also evolved over time to include new features thanks to the contributions of the open source community.
Flutter is a much newer technology that can feel quite alien if you are coming from the Android or iOS world. Google has put a lot of effort on making it extremely easy to learn, so most people that are familiar with iOS or Android development should be able to pick it up in no time.
Closing
Flutter and React Native are both excellent choices for cross-platform application development. While they share some similarities, there are also some key differences that you should be aware of before deciding which one to use.
Choosing the right cross-platform framework for your business application or startup app idea depends largely on your development experience, development team, and which native elements your project needs to access.
We hope this article will help you make an informed decision about which framework is right for your next project.
Frequently Asked Questions
What is the difference between web development and mobile development?
Web development and mobile development both create online and offline applications, but they do it in different ways. Mobile apps require a mobile operating system such as iOS or Android to run whereas web apps can run on any device with a web browser.
What is Flutter?
Flutter is an open source mobile application development framework created by Google. It allows developers to build native mobile apps for Android and iOS from a single codebase.
What is React Native?
React Native is an open source mobile app development framework created by Facebook. It allows developers to build native mobile apps for Android and iOS from a single codebase.
Can React Native be used to develop apps for the web?
No, React Native is a framework for creating native mobile apps
only. However, React Native is the mobile equivalent of ReactJs, which is a popular framework for creating web applications. This article compares the two in detail.
Can Flutter be used to develop apps for the web?
Yes. Flutter supports the use of standards-based web technologies such as HTML, CSS, and JavaScript to generate web content. With the web support, you may compile existing Flutter code written in Dart into a browser client experience that is hosted on any website and deployed to any web server.
This article was originally published on backendless.com on January 25, 2022.
Top comments (0)