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: The Flutter vs React Native debate essentially boils down to a comparison of the Dart programming language and Javascript. While most app-makers are already familiar with the latter, Dart is less known – and understandably, will need some time to catch up (although it also has some great features).
-
Learning curve
When you hire React Native developers, you ideally look for people who already have experience in working with Javascript (and preferably, on the React.js platform). For newbies too, learning Javascript is not particularly difficult. However, Dart – although feature-rich – is not a particularly intuitive programming language, making the learning curve of Flutter slightly steeper. The fact that React Native has fully automated adaptive components is yet another point of convenience. In Flutter, components often have to be manually configured – which presents an additional layer of work.
Note: React Native uses the Flux/Redux architecture, while Flutter follows the BLoc pattern architecture.
-
Code reusability
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.
-
Javascript framework vs Reactive framework
That’s another way the React Native vs Flutter debate can be viewed as. The React Native framework is built on the powerful React library, and there is a single code base for both iOS and Android projects. Many React Native developers for hire prefer this platform due to the relative overall simplicity of the Javascript framework. On the other hand, the Dart language-based Flutter is based on a reactive framework. Since the entire cycle of sending requests to servers and taking actions on the basis of the server response is done away with, the risks of null references are absent in Flutter. In fact, this is one of the additional advantages of the Dart language.
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.
- Framework performance – There is very little to choose between Flutter and React Native regarding overall performance. The easier and more extensive code reusability of Flutter probably hands it the slightest of advantages – and the combination of Dart framework and the accompanying Javascript layer brings a lot of flexibility to the hands of the developers. The underlying C++ engine of Flutter also enhances the performance of the platform. React Native has been hailed as the ‘future of hybrid apps’ – but it is in the hybrid application structure of this framework that things can be slightly rocky (however, native app development on React Native is absolutely seamless). Both frameworks are excellent in terms of performance – but some developers, while working on hybrid apps, might find Flutter to be more user-friendly.
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.
-
Project documentation
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.
-
Creating apps
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.
-
Hot reloading
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.
-
Development speed
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
Flutter has a definite advantage here. Nearly all the key native components are included in this framework. As such, the need for a ‘bridge’ to connect/communicate with native modules is often done away with. However, Javascript bridge is an essential part of the React Native framework – and there have been reports of developers facing issues while using the bridge to build native applications. For experienced app developers in particular, the Flutter framework might seem more straightforward than React Native, for working with native components.
As is evident from our discussion, it is difficult – if not downright impossible – to pick a clear winner in the React Native vs Flutter tussle. Both frameworks have their relative high points and slight drawbacks. While React Native brings in all the advantages and familiarity of Javascript and the already mature community support, Flutter has a slightly faster time-to-market and a closer-to-native performance. It will be fascinating to see how Flutter manages to evolve over the coming months, and whether it manages to match (or cross) the popularity of React Native.
