Cross-Platform Technologies Compared — React Native and Flutter in 2020
Introduction
Many development teams and tech companies are interested in the use of cross-platform technologies. The promise of having one codebase that can be deployed to both iOS and Android users, and even potentially as your website, is alluring. This is especially true for startups who want to get to market as fast as possible, or for companies where mobile is not the primary part of their business.
In the cross-platform world, there are many competing technologies: React Native, Flutter, Ionic, and Xamarin (to name a few). Of these, the current industry leaders are React Native and Flutter. In this post, we are going to take a look at each of these technologies, their pros and cons, and draw a comparison between them.
React Native
React Native is the most well-known cross-platform technology. It has been around a number of years being developed and popularized by Facebook.
The main draw of React Native is bringing the concepts of React, a very popular web development framework, to mobile. Many of the concepts and methodologies are translated to the mobile codebase, which makes it relatively easy for a developer who is familiar with React and web coding to start coding a mobile app by learning a few new things vs. starting from the ground up with an entirely new technology they haven’t worked with before.
Pros to React Native
- If you have developers in-house experienced with React, it is a much smaller jump for them to start learning React Native and using that.
- Its programming language is JavaScript, which is extremely well-known and it’s likely your developers will have experience with that language already.
- React Native has the largest sized community and has a good amount of help available online.
- React Native has been in production for 5 years, and has had plenty of real world use in large scale production apps (Facebook, Instagram).
- Most non-UI packages you can use in web development with npm are available to use in React Native.
- Hot reloading: as you make edits to code and save them, your test device will quickly refresh with the updates. This can make your development speed really fast. Native development does not have this capability.
- Under the hood, React Native tries to use Native components as much as possible. This way your app still matches up closely to the look and feel of a native app.
Drawbacks to React Native
- It’s inefficient, which can cause problems if your UI is not very simple. Under the hood, it has 2 layers for views: the DOM layer, then the actual Android and iOS View layers. When updates happen, it needs to update both in 2 steps. This can really bog down your user experience if your UI gets complex.
- Some components that you would expect React Native to have, do not exist yet or are underdeveloped. This forces you to find an open-source package, or develop your own.
- In order to write native code (a distinct possibility), besides doing that, you also have to write bridging code to make them work. This is a really big challenge for non-senior developers and developers not experienced in Native / React Native.
- If you end up writing native code, now all of a sudden you have 3 parts to your codebase instead of the 1 shining codebase you wanted.
- React Native has been around for some years, but it’s still in beta, and updates to the platform usually cause breaking changes. This can slow down your team because they have to spend time updating different stuff to upgrade versions.
- While you can use some well-known testing suites, such as Jest, React Native doesn’t come pre-packaging with any UI testing support. While many teams don’t bother with UI tests and focus on testing core business logic, this is a downside if you care about UI testing.
Our Thoughts
React Native is a really good solution if you have experience with React and want to get your team off the ground quickly, developing a mobile app. If you can hire a couple of senior engineers to help you with writing native and bridging code, you can have a pretty solid mobile team. If not, you might get frustrated as what is provided out of the box for React Native is not super-rich or feature complete. This will leave you scouring the internet for open source solutions from 3rd parties, that might be hit and miss in quality, or developing your own. React Native is good, and could be great, but doesn’t yet achieve the promise of having one codebase to rule them all.
Flutter
Flutter is the new kid on the block when it comes to cross-platform technologies, but it has a ton of steam behind it as Google is really investing in its success. A lot of the news around Google events relating to Android has shifted to focusing on Flutter.
On the technical side, Flutter gets a lot of brownie points — unlike React Native and some of the other tech, it uses only 1 rendering layer, and all the code runs natively so it is very performant. The difference in performance is proven and notable.
Besides mobile, Flutter has also recently released support for web apps and mobile web. That concept is sort of the Holy Grail for development — being able to develop one single codebase that can be a website you can visit, as well as an app you can install on your phone that can take advantage of the features provided by Android & iOS. This is a newer feature for Flutter, so we will see how that works out.
Pros to Flutter
- It is really strong in the performance category. It is as good as Native because the code actually runs natively instead of in layers, like the other cross-platform tech does.
- Under the hood, Flutter runs like a game engine and uses a completely different rendering system than native apps. In our opinion, the UX feels more crisp than its competitors as a result. You are however trading off some elements of the Native look and feel. They do their best to match this.
- Flutter has a lot of positive momentum behind it in the community and looks to be moving forward a lot faster than React Native.
- Flutter is very robust when it comes to its out of the box components and tools. Most of the things you expect to have are already there, without needing to hunt down 3rd party creations or make your own.
- Akin to React Native, Flutter also supports hot reloading while you work.
- Flutter comes pre-packaged with many testing features for UI, widgets, and integration.
- Google is doing a lot to create robust documentation and video tutorials. Learning flutter from the ground is very centralized and entry-level friendly.
- Flutter really shines when you follow material design guidelines, UI components, and transitions.
Drawback to Flutter
- Flutter uses Dart as its programming language, which is a strange choice since that is not a well-known language. If your developers have no experience with Flutter, it is likely they’ll be learning how to use Dart on top of learning Flutter. However, that isn’t too hard to do as it is pretty similar to JavaScript. It should be noted though.
- Flutter is still fairly new (first released in 2018) — its community is not as big as React Native yet, so there is less help available online.
- Flutter has some good apps using it in production, but not as impressive a lineup as React Native, which is used by Facebook and Instagram.
- If you want your app to look and feel native, Flutter is not as good a choice as React Native. They do a good job of trying to match the iOS and Android design styles, but tech like React Native tries to use the actual real views.
Our Thoughts
Flutter is looking promising and has a ton of upward momentum. The recently released feature that allows you to also deploy to the web is intriguing and something we are excited to try out. While you are trading off the use of true native components, what you gain is truly having one unified codebase. When you need to make a custom widget, you are coding it in Flutter/Dart rather than having to write native code for both iOS and Android + bridging. You should be able to build a Flutter team without needing to hire native developers. The thing that frustrates us most about Flutter is the choice of Dart as a programming language. It just adds that little extra layer of needing to learn a new language if you are introducing a developer to the team. However, a good developer should have no problem with this.
Conclusion
Currently, we are most excited about Flutter, as their positive momentum is a lot stronger than React Native’s, and we like their direction and roadmap. We like that in Flutter when you do need to make custom widgets/UI, you can do that all in Flutter and don’t need to write any native code or bridging. In React Native, you might end up needing to do that, which immediately raises the technical bar of your project a few pegs and makes it challenging for engineers without experience with this.
However, Flutter is still new and somewhat unproven, whereas React Native has been around for a bit comparatively and has some big-time apps under its belt. Flutter still has a bit of that “wild west” feeling where there is not a ton of history or help online, and you are figuring it out yourself. However, it looks like Google is pushing this forward as the future for cross-platform app development and possibly Android development itself. Between React Native and Flutter, it is hard to make a conclusive decision right now as to which is better, but we are leaning towards Flutter internally for our apps and recommendations.
As ever, QuarkWorks is available to help with any software application project — web, mobile, and more! If you are interested in our services you can check out our website. We would love to answer any questions you have! Just reach out to us on our Twitter, Facebook, LinkedIn, or Instagram.
