post-photo

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.

Flutter is a framework, written in Dart 2. React Native is a library, written in JavaScript. To see the difference, think about the screens you see. When a developer writes code for the User Interfaces, React Native generates native iOS & Android screens. Flutter on the other hand creates its own sceens and therefore doesn’t have to be restricted by the native platforms’ limitations.

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? (pointright)

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.)

text text text

You should note the following things:

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.

###Flutter

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.

text text text text

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.

text

Imagine a bridge like this. 😉

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.

Licensing

For many projects it’s important to decide which open source libraries are allowed to use during development.

React Native

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.

Flutter

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

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.

React Native

React Native deployment is pretty straightforward: the JavaScript code bundles up, compiles right into the native code and from that point, it works just like a native application would. Actually, this is the main directive: make it look like the original, since we already know how to deploy that. Many say the React Native documentation is hazy and chaotic, but it offers detailed description on how to run your app on any device and how to deploy it on the Play Store or the AppStore.

Flutter

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

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.

Flutter

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.

Testing

React Native

React Native can be tested with the regular Android and iOS testing solutions, but with a pure RN project it has very little effect. JavaScript code can be tested in many ways, the most recommended is Jest. It works just like frontend testing. After deployment, you can use analytics tools like Fabric to follow your app’s performance and crash reports.

Flutter

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.

React Native is mostly backed by Facebook (duh…). With the ever-growing number of JavaScript libraries, RN tries to catch up with native development’s capabilities in a rapid pace, enabling developers to create more and more complicated cross-platform applications. A few examples of applications written in React Native: Facebook, Instagram, Pinterest, Skype, Tesla. If you want to see more, there is a full list here.

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.

member photo

Karo oversees our marketing, branding, leadership development and generally people-related efforts. She is also a cognitive scientist and a yoga enthusiast.

Latest post by Karolina Tóth

Mobile Apps in a Blink

member photo

He is an Android developer, loves to work with Rx Java and CustomWidgets. Not surprisingly, he codes not only at work, but also in his free time.

Latest post by Tamás Agócs

Life after Google Analytics

member photo

Müzli has been with #TeamWanari for a year! He loves implementing beautiful designs.

Latest post by Krisztián Martinkovics

Mobile Apps in a Blink

member photo

His great sense of humor makes even the dullest coffee break a joy. 🙂

Latest post by Renátó Kiss

Mobile Apps in a Blink