Nowadays, the cross platform app development has gained popularity as it enables you to develop mobile apps that can be used on multiple mobile platforms. There are numbers of cross platform available today, which are worth comparing.
Previously, we had React Native introduced by Facebook. It got an overwhelming response from the app developers. However, last year, Google has also launched its SDK (Software Development Kit) – Google Flutter that helps to create cross platform apps with ease.
By introducing Flutter, Google literally tried to resolve the issue of cross platform app development, which otherwise has always been a major challenge for the app developers.
However, if we look at the current statistics, the market related to cross platform app development is expected to reach at $7.5 billion by this year.
However, the focal point of today’s discussion is making a very crucial comparison between two frameworks that help in creating cross platform apps. The opponents are Google Flutter on one hand and React Native on the other.
Flutter has been introduced last year only at the Google I/O Developer Conference 2017, while React Native has been there from 2015.
Introduction to Flutter and React Native
First, let’s cover the basic (yet essential) details about Flutter and React Native.
What is Flutter?
Flutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development Kit (SDK), complete with widgets and tools.
What’s Flutter for?
Flutter enables cross-platform app development.
It gives developers an easy way to build and deploy visually attractive, natively-compiled applications for mobile (iOS, Android), web, and desktop – all using a single codebase (source: official Flutter website).
* Please note:
- When it comes to developing desktop apps with Flutter, the API is still in the development stage. Google is working on extending Flutter to support desktop as a target environment, allowing developers to create macOS, Windows, and Linux applications with the technology.
In the long run, this effort will lead to a fully integrated solution where developers can create apps for desktop platforms as they do for mobile platforms – at the time of writing, however, the solution is in development (source).
- Flutter for Web is currently available as a technical preview only. Flutter for Web is a code-compatible implementation of Flutter that allows you to compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in (source).
A little more about Flutter…
- It’s free and open source
- It’s based on Dart – a fast, object-oriented programming language (Google released Dart 2.3 with new support for UI-as-code features – note that Dart is now in its 2.6 version). Dart is relatively new, and is easy to learn – especially for experienced developers more familiar with Java and C#
- The architecture is based on the very popular reactive programming (it follows the same style as React)
- It provides its own widgets, drawn from its own high-performance rendering engine – these are fast, attractive and customizable
- Thanks to the widget experience, Flutter apps have a great look and feel (while you can still create your own custom app design using readily-available UI elements that follow specific platform guidelines)
Who created Flutter?
A team at Google built Flutter.
But as an open-source project, both Google and the Flutter community contribute to its development.
How mature is Flutter?
A brief history of Flutter:
- February 2018, Mobile World Congress – First beta release of Flutter
- April 2018, Google I/O – Flutter beta 2 release
- May 2018, Google I/O – Flutter beta 3 release
- Flutter joins GitHub’s top 100 repos
- June 2018 – Flutter Preview 1 release
- September 2018 – Flutter Preview 2 release
- November 2018 — Dart 2.1 release
- December 2018, Google I/O – Flutter 1.0 release
- A crucial milestone for the technology – since Dec. 2018, Flutter has been considered as stable and ready for production
- February 2019, Mobile World Congress – Flutter 1.2 release
- May 2019, Mobile World Congress:
- Flutter 1.5 release
- Flutter for Web preview version
- Dart 2.3 release
- July 2019, Flutter 1.7 release
- September 2019, Flutter 1.9 release
As you can see, Google shifted from the Flutter beta version to the final stages of stabilization for Flutter 1.0 at a rapid pace.
Better still, since the release of Flutter 1.0, the team hasn’t rested on its laurels. It has actively worked on making the toolkit stronger and more resilient – prioritizing enhanced stability, performance, and quality.
Moreover, Flutter 1.5 includes hundreds of changes in response to developer feedback (source).
Flutter is now one of the top 20 active software repositories on GitHub (16th place as of December 11, 2019), which proves the developer community uses it and continues to contribute to its improvement.
In summary, Flutter remains a fledgling technology.
Yet, given the pace of Flutter’s improvements – and its explosive popularity – we can say with confidence that it’s impressively stable and mature for its age.
And judging by the rate of development, we expect to see Flutter for Web become stable within 12-months, as well.
What popular apps are made with Flutter?
- Xianyu app by Alibaba (App on App Store, App on Google Play) – Alibaba is one of the biggest e-commerce companies in the world
- Hamilton app (App on App Store, App on Google Play, Website) – official app for the Broadway Musical
- Google Ads app (App on App Store, App on Google Play)
- Reflectly (App on App Store, App on Google Play, Website)
- App for JD Finance – a leading digital technology company (App on App Store)
- Topline app by Abbey Road Studios (App on App Store, App on Google Play)
What is React Native?
What is React Native for?
React Native is an effective framework for:
- Cross-platform development
- Developing applications for both Android and iOS using a single codebase
- Using the same design as React
* Please note:
- React Native uses components that are analogous to widgets in Flutter.
To develop web and desktop applications with React Native, it’s best to use external libraries.
Who created React Native?
Facebook created React Native.
How mature is React Native?
A brief history of React Native:
- Summer 2013, Facebook hackathon – React Native started as an internal Facebook project
- January 2015, React.js Conference – React Native 1 Preview release
- March 2015, F8 Conference – Official Launch of React Native
- Facebook declares React Native, ‘open for use and available on Github’
Looking at the above, two things are for certain: React Native is older than Flutter, and it boasts a bigger community. Not to mention the fact that the Facebook team has had plenty of time to stabilize the API as well as focus on fixing any underlying issues.
And let’s not forget – Facebook is working on several other notable enhancements as well:
- Lean Core – reducing an app’s size by moving optional components/features to separate repositories (to add to an app as/when needed)
- TurboModules – for improved handling of native modules
- React Native Fabric – re-architected UI layer
Flutter vs. React Native: In a nutshell
|What is it?||A portable UI toolkit for building natively-compiled apps across mobile, web, and desktop* from a single codebase||A framework for building native applications using React|
|Official release||December 2018, Google I/O||March 2015, F8 Conference|
|Free and open source||Yes||Yes|
|Popularity||81,200 Stars on Github (December 2019)||83,200 stars on Github (December 2019)|
|UI||Flutter apps look as good on the up-to-date operating systems as they do on older versions.Since they only have one codebase, the apps look and behave similarly across iOS and Android – but thanks to Material Design and Cupertino widgets, they can also imitate the platform design itself. How’s that possible?Flutter contains two sets of widgets which conform to specific design languages: Material Design widgets implement Google’s design language of the same name; Cupertino widgets imitate Apple’s iOS design.This means that your Flutter app will look and behave naturally on each platform, imitating their native components.||Application components look just like native ones (e.g. a button on an iOS device looks just like a native iOS button, and the same on Android).The fact React Native uses native components under the hood should give you confidence that, after any OS UI update, your app’s components will be instantly upgraded as well.That said, this can break the app’s UI but it happens very rarely.If you want your app to look near-identical across platforms – as well as on older versions of an operating system (as Flutter achieves) – then consider using third-party libraries (like this one). They will enable you to use Material Design components, in place of native ones.|
|Sharing code||Currently on iOS and Android – but the long-term vision for Flutter is to offer an integrated solution that allows developers to write one code for both desktop & mobile, and for the web.Flutter for Web support is available as a tech preview but still, this isn’t an alpha channel yet.When it comes to developing desktop apps with Flutter, APIs are in their early stages of development and so will be probably released, just further down the line.||iOS and Android – but there are select libraries that allow you to use the same code to build iOS, Android, web, and Windows10 apps.You can also extract shared code in mobile, desktop, and web apps, to a separate repository; treat it as a separate project; then inject it in the same way as another dependency.This allows a developer to focus on writing code for a specific platform without having to consider compatibility with another one.|
|Top apps made with this technology||Xianyu app by Alibaba, Hamilton app for Hamilton Musical, Google Ads app||Instagram, Facebook, Facebook Ads, Skype, Tesla|
|Time-to-market||Typically much faster than native development.||Possibly as fast as development with Flutter.However…React Native uses bridge and native elements, so it may require separate optimization for each platform – a problem that widget-based Flutter doesn’t run into. It may make the app development with React Native longer.|
|Competitive advantage||Great look and feel thanks to rich widgets;Rapidly growing community, and popularity;Excellent documentation with strong support from the Flutter team (which makes it easy to start developing with Flutter);Improving Flutter for Web, offering the potential for one codebase across mobile and web platformsDifficult to beat time-to-market length||Stability (5+ years on the market);Many successful, prominent market players using React Native;Mature, vast community;Easy-to-learn technology;Plenty of tutorials and libraries, which allow quick and easy development;Code can be easily reused for both web app and desktop app development.|
|When it is not the best fit||If…• Your app needs to support 3D Touch (for now, Flutter doesn’t support 3D – but it features on the Flutter team’s long-term roadmap)• The design of your app is platform-specific• Your app requires multiple interactions with an OS; or requires rare, little-known native libraries• You need a minimalistic UI, but rely on significant use of the phone hardware (e.g. an application that plays music, or only takes pictures)• You want to create an instant app (small-sized app)If your app sounds like any of the above, it’s probably better you choose native app development.|
Predicting the future: Flutter & React Native
More and more companies are attracted by Flutter. After all, we’re witnessing monthly improvements in the Flutter SDK as Google continues to refine its tool. Plus, the community is always helpful and enthusiastic. What’s more, we can expect that soon Flutter will enable us to create not only mobile applications but also apps for web and desktop.
Putting it all together – and given leading companies like Alibaba are already using Flutter – the future looks promising for the toolkit.
As for React Native – well, Facebook is currently focusing on a large-scale re-architecture of the technology.
The team is doing its level best to improve support for both React Native users and the wider community. And thanks to this, the community can now easily suggest changes to the framework’s core functionalities through an RFC process that uses a dedicated GitHub repo.
The actual results of such architecture improvements are:
- Big changes in the 0.60 version:
- it’s easier to manage iOS dependency by using the most popular dependency manager CocoaPods by default,
- you can migrate React Native to AndroidX,
- you can extract optional features as part of lean core process.
Creating an open environment to discuss React Native is a significant step. It’s both a sign of ongoing improvement as well as a signal for the technology’s bright future.
Given React Native has such a stable position in the marketplace – and is on a trajectory of continuous development – it’s unlikely we’ll see the toolkit left in the dust any time soon. Read about the long-term vision for React Native in this article.
Still, Flutter is an imposing competitor to React Native.
Well, it can be said that it is extremely difficult to pick the winner at the end, more so because both React Native and Flutter has their own set of pros and cons.
One must not forget that Flutter is still new in the hub of app development industry and React Native made its inception way before to gain a good audience ground.
Although Native passes the edge over Flutter after an honest comparison but the later has bright future. The final choice has to be made by the developers based on their specific requirements.
FAQs About Flutter Vs. React Native
Which is better Flutter or React Native?
It is hard to pick the winner at the end, as Flutter and React Native both have their own set of pros and cons. React Native is a more mature framework where Flutter is also getting positive feedback from the developers.Which is faster Flutter or React Native?
It is wrong to predict the future, but Flutter has the potential to cross all the boundaries. Flutter makes a way to the bright future.