Hussain Fakhruddin is the founder/CEO of Teknowledge mobile apps company. He heads a large team of app developers, and has overseen the creation of nearly 600 applications. Apart from app development, his interests include reading, traveling and online blogging.
Latest posts by Hussain Fakhruddin (see all)
The global mobile app market is not showing any signs of stalling in the near future. According to a recent report, the market is set to grow at a CAGR of well over 19% in the 2016-2023 span, breaching the $310000 mark by the end of that period. Interestingly, the demand for cross platform applications is also rising steadily over the years. From a fairly modest $3.6 billion in 2014, the cross-platform industry will swell to ~$8 billion by the end of this year (a rise of nearly 122%). It’s safe to say that both mobile apps in general, and cross-platform apps in particular, are on the fast track of growth.
Launched in early-2015, Facebook’s React Native is still one of the most popular open-source cross-platform development frameworks for mobile developers. However, it has got a new challenger – in the form of Flutter (from Google). A stable version of Flutter was released at the end of February – and early reports suggest that it has several high points of its own. In today’s discussion, we will do a point-by-point React Native vs Flutter comparison, and try to find which one is better for app developers:
User interface quality
React Native absolutely aces it, as far as the overall UX of the framework is concerned. It is based on native components for both Android and iOS – and is comfortably much more dynamic than tools like Cordova or Ionic. While Google’s Flutter also comes with fairly easy-to-use and customised UI designs, the absence of some important components can prove to be tricky. For instance, working with the Cupertino library might not be the easiest task in the world. In this framework, proprietary widgets and owner widgets lie at the base (instead of components) – and while the UI is good enough, React Native is on an altogether different level in this regard.
Note: React Native uses the Flux/Redux architecture, while Flutter follows the BLoc pattern architecture.
In terms of code reusability, Flutter is a couple of paces ahead of React Native. On Facebook’s framework, customising and styling the platform can be slightly time-consuming – and the option of code reuse is also somewhat restricted. In comparison, Flutter lets cross-platform developers to overwrite code on a real-time basis, making things that much easier. While working on lengthy app projects, smooth code recycling often becomes an important factor for developers, and Flutter has the better options on this count. It should also be noted that, while React Native requires developers to specify the differences between the iOS and Android versions of an app, on Flutter the two versions can be exactly the same.
Note: Flutter uses the Cupertino library for iOS projects, and Material Design for Android projects; on React Native, the flow is – Objective-C APIs for iOS apps and Java APIs for Android apps.
Note: Flutter can be used to create apps for Google Fuchsia. The framework is powered by the Skia C++ engine.
Support from third-party libraries
React Native has been around for three years, and not surprisingly, it has much more third-party packages than Flutter. In terms of online support and developer communities too, React Native is several steps ahead of its newest rival. While the number of packages in the Flutter ecosystem is increasing rapidly, React Native still has ~5X the number of Flutter packages (the total Github stars for React Native is also double of Flutter). As a direct result of the greater online and third-party support, developers are likely to find the task of adding dynamic features to enhance usability in an app project easier in React Native. Flutter is still very new and awareness levels are still low. It remains to be seen how its external libraries and online support stack up to those of React Native over time.
What Flutter lacks in terms of online community support, it more than makes up with its super-efficient documentation features. The frameworks has extensive integrated development frameworks (IDEs) with built-in support for React Native. Flutter developers can also use the underlying apps while documenting in the framework. Over on the React Native front, documentation is not quite as smooth or organised, although there are some useful components. In fact, documentation in Flutter is probably the best among all the cross-platform app frameworks.
Note: Compatibility with Visual Studio, Intellij Idea and Android Studio also boosts the usability of the Flutter framework.
Once again, it is difficult to pick a winner between Flutter and React Native in terms of development ease. Working with the class and functional components of React Native is relatively simple, as is using the ‘stateless’ and ‘stateful’ widgets in the Flutter application. Getting onboard is easy for both frameworks, with React Native installable from the Node Package Manager, and Flutter having the option for binary downloading from source. Once developers get a hang of the Dart language, the ease of using Flutter becomes comparable with that of React Native. For some developers, the presence of lesser widgets in React Native can be an extra point of convenience.
Note: With Flutter, developers can get even more close to native apps, than with React Native.
App developers, irrespective of whether they are working on iOS or Android, often have to make runtime changes in their codes. This requirement is taken care of in both React Native and Flutter – which support easy hot reloading (i.e., adding new/edited files at runtime, without interfering with the running of the application). Changes in codes can be checked and validated almost instantaneously – and in both frameworks, hot reloading is instrumental in speeding up the process of UI building. Of course, React Native and Flutter are both open-source as well.
Not much of a difference in here either, but React Native does have an edge when it comes to development time. The availability of multiple ‘ready-to-use’ components expands the overall app development scopes manifold. As a direct result, developers get greater flexibility, the efficiency is higher, and the average time required for developing a project comes down. While Flutter does not lag by much, the need for more recognition in this framework eats up some additional time. This is another point where Flutter can catch up with React Native in the foreseeable future.
Note: Flutter is increasingly being used for building visually rich apps for startups.
11. Who’s using Flutter and React Native?
Both the frameworks under discussion are backed by big players (Facebook for React Native, Google for Flutter). Although Flutter is the new kid on the block, it already several big projects – like Alibaba, Hamilton and the AppTree platform – to show off in its portfolio. React Native is, of course, already hugely popular – and has been used to create powerhouse apps like Skype, Facebook, Instagram and Airbnb. Over the next couple of years or so, many more big players will have apps built with either React Native or Flutter – and the competition will be even closer.
12. Framework stability
Let’s just say that, while React Native is already a mature, consistent and uniformly reliable cross-platform framework, Flutter is an evolving one. In fact, Flutter, in its present version, is already much more powerful and usable than the initial ‘alpha version’ (which was not at all ideal for large projects). The availability of greater community support for React Native also builds reliability and stability. The features of Flutter are exciting, the performance is high-quality and fairly stable – but it does have a bit of catching up to do in terms of consistency.
13. Working with native components