The technology is advancing at a rapid pace. The web is growing rapidly and so is mobile application development. The demand for mobile applications has increased immensely. Companies want mobile applications for their products. The applications are either for promoting their product, better customer services or selling. There are two popular platforms widely used all over the world, IOS and Android. If a company decides to have a mobile application, they need separate applications for IOS devices and Android devices, although the working is the same. This is where a developer needs to learn different languages and procedures to build two applications that are ultimately going to behave similarly. So to encounter this problem, the cross-platform frameworks came out that are used to build mobile applications that work on both IOS and Android platforms. The two of the most popular hot cross platforms are React Native and Flutter.
History
Google and Facebook are already competing in the web community. Google’s AngularJS is one of the most widely used Javascript framework used for building web applications. React, built by Facebook is a javascript library that is heavily used in web application development. AngularJS and ReactJS are often regarded as hot competitors in the web community. But not long ago, when the demand for cross-platform mobile applications started increasing, Facebook launched the React Native platform for building cross-platform mobile applications. Soon Google also launched its Flutter to give competition to Facebook’s React Native.
React Native: React Native was released by Facebook in March 2015.
Flutter: Google launched flutter in May 2019.
Flutter came out rather late. Before the existence of flutter in the market, React Native had already made its name in the mobile application development community.
Architecture
Whenever deciding upon a framework, it is essential to consider the basis of it’s architecture. Both React Native and Flutter have completely different architectures.
React Native : It is based on the Flux architecture that is used on Facebook. It relies on the concept of the JS runtime environment known as the javascript bridge. This bridge is used to communicate with the native threads. The code is written in Javascript and then compiled to the native code during runtime.
Flutter : Flutter uses the Dart framework , which in turn uses the Skia C++ engine. Unlike React Native’s Flux, The dart framework does not need any bridge to communicate because it already has most of the components in-built. It is bigger in size. The Skia C++ engine comes with all the necessary protocols, channels, and compositions.
The performance of React Native’s architecture is poor as compared to the Flutter’s because of the javascript bridge used in the former. Flutter has everything needed in its architecture itself.
Programming Language
For a developer, the development of any application depends upon the programming language used. There are many programming languages existing today and most of the developers have knowledge of multiple programming languages. Let’s compare the languages used in React Native and Flutter.
React Native : The programming language used in React Native is Javascript. Javascript is one of the most popular languages in the world and it is also one of the three core technologies of the World Wide Web(WWW).
Flutter : On another hand, Flutter uses Dart which is neither popular nor widely used. It was launched by Google in 2011. It is quite simple and easy to learn because it supports most of the object-oriented concepts.
Anyone with even a little experience in web development knows about Javascript. It is one of the most popular languages. Most of the web frameworks such as Angular, React, Vue are also build in javascript. But dart used by Flutter is quite young. It is less known in the programming community.
Installation
After deciding, the first step is always installation. Most of the time it is a headache, especially for newbies. Both React Native and Flutter have different ways of installation.
React Native : The node package manager or commonly known as NPM is used to install React native in windows and Linux. Developers with the javascript background are already familiar with NPM because it is heavily used with it. NPM install locally or globally, depending upon the user’s choice. For macOS, Along with NPM, the Homebrew package manager is also needed.
Flutter : Flutter does not require any package manager for installation. It is directly downloaded from the GitHub for the specific platform. For macOS, we need to set the path.
Using NPM is very easy and simple. For non-javascript background developers, it is fairly easy to learn NPM because it is not more than writing three to five commands in the command line. Moreover, NPM is used mostly everywhere in the web development world. So learning NPM is always a plus point. On another hand, Flutter is downloaded first from the GitHub and then installed. There are a few steps for its installation that could be a headache. Flutter also needs some kind of package manager for a better installation process.
User Interface Component and API
Using a platform for developing cross-platform applications depends upon the support of the platform for native components. Native components are key for a native application. The API plays another important part. A framework with a proper API to access native modules is very important.
React Native : Like React, React Native also provides UI rendering and device API. It is heavily dependent on third-party modules for native components. No doubt, the UI rendering part of React Native is excellent, but it depends too much on the third-party libraries.
Flutter : On another hand, Flutter is full of rich components such as UI rendering components, testing, device API access, navigation, stateful management, and many other libraries. It hardly needs any third-party library. Moreover, Flutter also comes with widgets for material design. The Cupertino , an IOS-style widget is also provided by flutter to create apps for better rendering.
When it comes to rich components and API access, React Native depends heavily on third-party libraries. It is good and bad at the same time. A developer has the freedom to choose the libraries of his choice or, at the same time, it can be a pain. But Flutter comes with all rich components that a developer needs for creating cross-platform mobile applications. There is no need of looking for any third-party libraries while using Flutter.
Community support
The community plays an important part in the growth of any technology. In modern times, the developers form communities and share their knowledge about the technology they are working on. The experience of developing and error solving has a great impact.
React Native : Since its launch in 2015, React Native’s popularity has increased immensely. React Native’s community on GitHub is quite large and there are a lot of conferences and meetings being held every year, both online and offline.
Flutter : Flutter was launched in 2017 and it is quite young. The community is not that big right now but it is increasing at a rapid pace. Google is promoting its platform every year, having conferences and meetings.
React Native is a popular and widely used cross-platform. Its community is already established. On another hand, Flutter is new and not that popular. Its community is establishing at a rapid pace and Google is promoting it in the best way possible.
Testing
Testing is one important part of any kind of development. Every serious technology comes with testing support. Testing such as unit, integration and UI level are important when it comes to cross-platform mobile application development.
React Native : React Native does not come with many testing options. Yes, it has support for initial level unit testing but when it comes to integration and UI level testing, React Native depends again upon third-party libraries. Appium and Detox are two popular testing tools for the React Native applications.
Flutter : When it comes to testing in Flutter, it provides a rich set of tools for unit and integration testing. It also has tools for testing widgets and UI of the application. Moreover, the documentation for testing Flutter applications is properly maintained.
Again, React Native depends upon the third-party libraries for testing while Flutter comes with many beautiful testing tools. A developer does not need to look for third-party libraries while testing Flutter applications.
CI/CD Support
For any application, whether web or mobile, the support for Continuous Integration and Continuous Delivery is essential. It helps in receiving continuous feedback and avoiding bugs. But using Continuous Integration and Continuous Delivery is quite a headache when there is no proper documentation and resources.
React Native : React Native’s documentation is always been poor and when it comes to Continuous Integration and Continuous Delivery, there is no official documentation. For a developer, it will become very difficult to use CI/CD without proper documentation. However, there are a few resources always available on the internet.
Flutter : As mentioned earlier, Flutter has excellent documentation for almost everything. There is a proper section explaining the setup of Continuous Integration and Continuous Delivery.
Setting up the CI/CD depends upon the documentation and resources. While React Native does not has any official documentation for it, Flutter has a separate section for only CI/CD. This helps not only newbies but experienced ones too.
Popularity
Popularity is one main factor that influences the choice of a developer. No doubt, both React Native and Flutter are one of the most popular cross-platform mobile application development frameworks. But let’s compare, who is more popular.
React Native : On GitHub, React Native has more than eighty thousand stars. Issues on Github are just less than six hundred. React Native is a quite popular technology is 2019. In the last couple of years, its popularity has increased immensely.
Flutter : Unlike React Native, Flutter is a young technology but still it has over seventy-two thousand stars on GitHub, just eight thousand less than React Native. No doubt, Flutter’s popularity is increasing rapidly but when it comes to issues, it has more than five thousand on GitHub. It is way more than React Native’s.
React Native is immensely popular in the cross-platform mobile development community while Flutter ‘s popularity is also increasing. But being a new technology with a new and unpopular programming language, Flutter is struggling a bit.
Conclusion
Both, React Native and Flutter are one of the best when it comes to cross-platform mobile application development. Both have there own Pros and Cons. While React Native uses Javascript and has many similarities to ReactJS, Many developers opt to choose it over Flutter. Flutter is quite young and works with a new programming language. But Flutter comes with a lot of in-built features that React Native does not provide. React Native depends a lot upon third-party libraries and that is good and bad at the same time. It provides freedom to the developer.
No doubt, both of them are going to be hotshots in the future.
Click here for React Native documentation
Click here for Flutter documentation
Originally published at https://kriss.io on August 20, 2019.
Top comments (2)
I think you could also mention that even though RN's architecture impacts its performance the release of the new engine Hermes really improves load times and responsiveness.
I love both actually. Work with any of them