Two technologies for creating mobile apps are getting a lot of attention: React Native and Flutter. They have important things in common and those things are obvious: They both allow you to create native mobile apps with a single code base. Breaking that down exposes some important things:
- You create mobile apps for iOS and Android devices as opposed to web apps or laptop programs.
- You create truly native apps. This means apps that users can obtain from the AppStore or the Play Store.
- You create apps with a single code base. This is known as cross-platform development, the major draw for both of these technologies.
But they also have some very significant differences and details which are far less obvious. Why are React Native and Flutter so important? Where do they fit in the world of solutions? How did they get to this point? What are their architectures? Philosophies? Major features? Advantages and disadvantages? In this series we’ll discuss exactly these things as well as diving into apples-to-apples code comparisons of a real app written in both React Native and in Flutter.
If you want to understand where React Native and Flutter fit in the big picture, read on. But if you’re already well-familiar with the mobile development space and you want to know the details about React Native and about Flutter, jump to the Native Solutions section below. For a deep dive into the detailed comparison, go to part two: the details of this series. Lastly, if you want to look at an app created using Flutter code and the exact same app created with React Native, take a look at part three: the languages.
Mobile app development is hard
There are 5 billion smart phones worldwide. About 85% of them use Android and the other 15% are iPhones. A global organization cannot ignore Android. Yet in the United States, 65% of smart phones use iOS and only 35% are Android devices. An organization who wants to work in the US cannot ignore iOS. Clearly apps must be developed in both iOS and in Android simultaneously.
iPhone and iPad apps run on iOS, an operating system from Apple. If a developer wants to write an iOS app, they have to know XCode, CocoaPods, and Objective-C or Swift. But remember, that’s only half the battle. To write an Android app, developers must know Gradle, Android Studio, and Java or Kotlin. To master the languages, frameworks, and tools for iOS is a tall order! To know Android’s tools is equally difficult. To know them both is immensely hard. And the number of developers who know both is extremely small indeed.
This puts organizations who must write one or more mobile apps in a very tough position. They have three options.
1. Hire twice as many developers,
2. Compete for the tiny number of developers who are proficient at both, or
3. Adopt a cross-platform solution
What are their options to write for both platforms with a single code base? Read on.
Options fall into just a few categories.
Progressive Web Apps (PWA) HTML/CSS, React, Angular, Vue
- Cons: Not a real app. Runs in a web browser. Not available in app stores. Hard to create a desktop shortcut. Cannot access many of the device’s resources like accelerometer, compass, proximity sensor, bluetooth, NFC, and more
- Pros: Easy to write
Hybrid (PhoneGap, Cordova, Sencha, Ionic)
- Cons: Runs in a WebView so it can be slow
Native Solutions (React Native, NativeScript, Flutter, Xamarin)
- Cons: Learning a framework may be difficult. Mastering the toolchain definitely is
- Pros: Real apps that can be found in the stores and run fast
If you have a captive audience, one where users value your app so much that they’re willing to accept a poorer user experience, the cheapest solution is to create a PWA. If your app is extremely simple and speed is not expected to be an issue, a hybrid solution would be appropriate. But if speed and smoothness are important you will need to go with a native solution.
There are four well-known cross-platform native development frameworks, Xamarin, NativeScript, React Native, and Flutter.
The rise of Flutter and React Native
React Native had been trending upward over the last few years largely because it is reputedly so much more pleasant to work with than Xamarin. But with Flutter having moved from alpha to beta in the Spring of 2018 and from beta to version 1.0 in December of 2018, there suddenly became a fourth option whose growth warrants some major attention. React Native and Flutter have become the darlings of the development community with major buzz for each.
This is a Google Trends analysis of the four search terms from 2016 through 2018. Note that Xamarin began to decrease as React Native begins to increase in early 2017. Similarly React Native flattened beginning in the summer of 2018. Perhaps not coincidentally, this is the time when Flutter began to grow more rapidly, suggesting that Flutter is slowly taking market share away from React Native just like React Native took market share from Xamarin the year before.
In parts two and three of this series, let’s compare React Native and Flutter directly. In part two, we’ll compare them in detail. And in part three, we’ll look at the languages with code samples of the same app in both platforms.