Flutter, React Native, and Native Mobile Application Development – Compared
How did we get here?
Mobile apps are becoming an indispensable part of our daily lives. We are getting used to not going anywhere (really anywhere) without our smart phones. Of course many companies and entrepreneurs take a shot at harvesting this intimate relationship between people and their phones. How? By creating mobile apps! Who wouldn’t want to be able to offer help to their ideal customer all the time? So we do just that, we create mobile apps. Shiny, informational, interactive, helpful, fun, you name it mobile apps.
There are two kinds of mobile apps. Native and cross platform. Native means the code base was written exclusively for that platform (iOS or Android). Yes, you need an Android code base for your Android app which you can upload to the Play Store (from where your customers can download it) and you need to have an iOS code base for your iOS app, which your iPhone owners can download from the App Store.
There have been many attempts at creating solutions with which you could simultaneously create iOS and Android Apps. For the obvious benefit of saving time and money when developing a mobile app.
Flutter v React Native
In this post we examine two trendy attempts at these cross-platform solutions. Flutter (Google’s own) and React Native (Facebook’s own) promise to save time and money, having to only develop one code-base, using either one of them. We pulled native mobile application developers and web developers together to take these new solutions apart. And of course then put them back together to see if these new solutions are worth your dollar and can really achieve the beautiful, eye-catching, reliable, you name it mobile application you need.
The Comparison of Flutter and React Native
We have chosen a few key aspects of mobile apps through which we compared the two solutions (React Native & Flutter). Of course it’s always best to consult with an experienced developer or team, before you make decisions about your technologies, but our hope is that this post will give you an idea as to what sort of technologies there are to consider and what are the possible questions you should be prepared to answer.
Design requirements for your mobile app
React Native (RN)
Many mobile apps’ user requirements do not go further than having texts to read, images to see and buttons to navigate. They may do a few API calls (e.g. when you provide your email and password), sending and receiving messages, but nothing groundbreaking. Building apps like this is where RN absolutely shines. Let me show you a simple example.
Everybody likes reading news, right? Right. Nobody would like to download an app for every news provider, right? Right. It would be awesome, if you had an app which collected news feeds, right?
I created a mockup app, that uses NewsApi with a developer account (meaning: free), collected a few endpoints, put in some elbow grease and voilá! (You can’t see entire articles because of the developer mode.)
You should note the following things:
- This is a woking application, running on a real phone, not on an emulator on a desktop.
- This is cross-platform (meaning, you can use it on both iOS and Android phones)
I know, this is nothing fancy, but the hours speak for themselves. Building simple apps like this in RN is really fast, and within the hands of (an) experienced developer(s) you can get working apps with lightning speed. So if you do not have fancy animations, overcustomized workflows or aspiration for the mobile gaming industry, React Native is a valid choice.
If you already have a website written with React, remember: if it works on the web with React, it works in React Native.
While React Native has a native UI approach, Flutter has a totally different solution for managing UI. The guys at Flutter use a a different graphical solution to create beautiful screens, and they are highly engaged in acheiving this on the highest frame rates for the most fluid user experience. If you plan on creating a UI-heavy application with tons of animations and transitions, then Flutter will probably be your best choice – sometimes probably even better than native iOS or Android!! and I am writing this as a native Android developer. The communitiy that backs the platform is currently growing and there’s also a lot of effort made by Google. (So, to use some Google-related functions in your app, you might have to connect to Firebase or Google Maps which are also under way to be completely compatible with apps written in Flutter).
For the sake of completeness, we also implemented the above News reader App in Flutter.
These are also live and running application instances on both Android and iOS devices. They are not fancy, but fully functional and written in a quarter of a day. (Including Googling…) We have added some frosted-glass loading screens to improve the apps ‘eye-candy’-ness.
UX, Animations & Transitions between screens
The two frameworks show some similarities in performing animations, but basically they have two different concepts. After investigating both frameworks, we found that Flutter gave a simpler interface for describing animations (synchronization, delays, compositions, etc…) and simpler means, more time-efficient for your developers. Plus, Flutter offers more room for customization in this area, which means, more room for letting your imagination wonder when it comes to animations.
Also, as Android developer, I know that working with blur effects are quite difficult in native development, but Flutter makes working with blur effects, animations or transitions a lot less painful. Flutter animations seem to run smoother than the ones written in React Native, probably because RN first has to turn its code to run like native code, but Flutter basically communicates with the phone’s hardware.
Accessing with Low level APIs
First of all: what are low level APIs and why do they matter? Basically, these are the communications for the functions close to the hardware layer of the phone, an example could be the camera of the phone. It’s easier to connect to the hardware of the phone in native development, since you are writing code designed for those phones.
Low level APIs are always tricky when it comes to cross-platform development. When there is a feature that requires a low level API (for example a feature to use the phone’s bluetooth connection to communicate with external beacons), you have to be able to communicate with the phone’s bluetooth interface. If there is nothing pre-made available, you have to have a native iOS and a native Android developer create a bridge in your chosen cross-platform solution (in our case in Flutter or in React Native) in order to be able to communicate with the hardware.
If the planned Application(s) use low level APIs, which utilize specialized interfaces in both the Android and iOS platforms (like the Media API), or it uses a third party C/C++ library provided by the customer (like custom CryptoAlgorithms), then usually a native app is preferred. On the other hand, we can evaluate the behavior, complexity and the planned throughput of these kinds of interfaces and decide whether they’re worth writing a bridge for.
Most of the time it depends on the desired use-case. Both frameworks have their own concepts for bridge implementation.
Some limitations will always arise with cross-platform solutions, but if your app contains need for few enough low level APIs, you might still be better off with a cross-platform solution.
Opening another app
Android and iOS platforms work with the instance of opening another app entirely differently. These issues are operating system related (not necessarily hardware related).
These are hard in cross-platform solutions.
For many projects it’s important to decide which open source libraries are allowed to use during development.
In React Native’s case you probably heard of a licensing issue in the past year, but it’s time to make it clear: since February, 2018 the framework is licensed under MIT. What does it mean? Long story short, it became truly open sourced, if you are interested in the license, you can read about it here.
In the case of Flutter, we didn’t have to worry about anything. It’s licensed under BSD-3 since the beginning.
But for comparison there is no real winner. The content of the licenses is almost the same, you will probably have no problem with either of them.
Deployment is when your source code is turned into an actual mobile application. (Which your customers can download from the App or Play Stores.) This proess is usually fully automated.
As an app owner, it might be beneficial for you to have different versions of your app like a QA version for testing and a PROD version for releasing to the Application stores. Flutter has got your back here. It needs some native code on both platforms, but when you set everything up, it works like a charm.
For automation, there is support from Fastlane which integrates with dfferent automation tools like Jenkins or Circle CI (just to mention the well known ones). It makes the technical and manual part of releasing an app easier and even makes screenshots of the app to show them in the AppStore or the PlayStore. But it’s worth mentioning, Fastlane supports React Native too.
Switching to a new version of the development kit is made easy by Flutter Doctor because it takes only one command line to do it. This tool does even more than that. It provides a helping hand to configure your computer properly for development.
The pace of development of the platforms
React Native has a monthly cycle of releasing major versions, but in the past few months they had delays and the release plan was not followed. It doesn’t mean that it has less updates nowadays, though. Actually, it gets more and more minor updates between two major releases. The community is big and they passed 71k stars on GitHub. (Which means developers are excited about this library.)
Finding a new team / team member is fairly easy for React Native, because React is a widely-used library among front-end developers. They can adopt easily to the new concepts in React Native.
If you were wondering about the example you saw above, here are the specifics we measured developing the RN NewsApp.
- The developer’s complete React Native experience is one project, circa 6 weeks long about 6 months ago.
- The app took 4 hours of reading and prepping, then 4 hours of coding altogether.
Flutter is a bit of a different story. Finding a developer is harder because the stable framework is new (came out on December 4th, 2018) and the Dart language is not a commonly used one. But it’s easy to learn for someone who used Java before. The Flutter community is a rapidly growing one. They reached 45k stars on Github recently. (Flutter is also popular.) Their release schedule aims to make a stable release every quarter.
Need something more tangible? The NewsApp created above is not meant to be stunningly beautiful or full of animations. We managed to build the Flutter version in 2-3 hours.
Both platforms have good and almost equal contributor ratings. So in this perspective both options are great.
Flutter has three kinds of tests. The executor is bundled with the framework. Unit tests can verify low-level-logic correctness, while Widget and Integration tests can be used to verify UI components’ (Widgets) and Application behavior. As on any other platform or framework maintenance cost, dependencies and execution times grow as test complexity goes up. Flutter also supports several analytics and crash reporting tools for deployed applications, most commonly used are Firebase Analytics and Crashlytics.
Flutter and React Native: In conclusion
It depends on your project.
Flutter is backed by Google. There are tons of extensions available for the framework already (which means that you can implement lots of features and connect to server(less) solutions for example). Flutter apps are built in the Dart 2 language and there are lots of libraries written for supporting them. Since Flutter went 1.0 stable on December 4th, 2018, it’s safe to assume that more and more libraries will be published in the near future as well. Since Flutter is still new you might wonder: “Is there any apps on the market written in Flutter?” Plenty of them! The very first was for Hamilton, a famous Broadway show, followed by the Google Ads app, Alibaba the online marketplace and Abbey Road Studios’s Topline app. If you are still not convinced, check out the official list here.
Neither React Native, nor Flutter is ready to cost-efficiently handle all the issues that can arise in complex mobile applications. However, these cross-platform solutions do have their time-saving and money-saving perks when it comes to certain requirements. You should definitely keep them on mind, especifically Flutter when you need awesome and never-before-seen design elements and React Native when you need sound functionality behind simplistic screens. However, do not be enchanted by the empty promise of ‘one source code, two platforms,’ because cross-platform solutions only save money in specific cases. Do your research, consult a knowledgeable development team before you make up your mind.