Flutter vs React Native - What’s best for cross plateform mobile Application.

Today, all the companies creating Android and iOS platforms application to reach maximum end users. To create a native Android and iOS app, they have to maintain two source code that creates a gap between the applications as they are made by different teams. To resolve this, they have to move on the cross-platform apps that have a lot of pros and cons:


                                       
                                                    The Complete 2020 Flutter Development Bootcamp with Dart

Advantages

1. Write once, deploy everywhere: The most important advantage of cross-platform development is having a single codebase that you can use to build multiple operating systems apps.
2. Uniformity across apps: A single codebase provides us the benefit to maintain the app and manage the same look and feel across all platforms. All updates and fixes are also automatically reflected everywhere.
3. Saving resources: A single codebase can be managed by one smaller team instead of separate teams with different skill sets working on multiple native versions of the app.  
4. User base: Once you published your app on multiple platforms. It will increase your market reach without any added effort, consequently increasing your chances of getting a big user base.

Disadvantages

1. Performance issues: The cross-platform frameworks apps are close to native apps, but they still don’t integrate seamlessly with the respective platforms that are reducing the app’s speed and degrading performance.
2. Inconsistency with platforms: The Cross-platform framework does not provide all the features offered by each different platform. So, you have to work on some app components to improve app performance.

There are many cross-platform frameworks available to develop one code base mobile apps that provide the closest performance to the real native applications. The most powerful framework is Google’s Flutter and Facebook’s React Native. Let's have look strengths and weaknesses of both and do an objective comparison.
 

Flutter

Flutter is an open-source cross-platform framework that is developed by Google. It was announced in 2017 at Google’s I/O developers conference. Flutter framework uses Dart language which was also developed by Google. Dart is a fast, object-oriented language with several useful features...  read more about Flutter.
 

React Native

The React Native is also a cross-platform mobile development framework released on GitHub by Facebook. React Native use the popular Javascript library to build apps for both the Android and iOS platforms. 

React Native and Flutter comparison

In this post, we going to compare the following aspect of Flutter and React Native that'll help us to understand and decide which one best for our next cross-platform mobile application.

• Programming language
• Technical architecture
• Installation
• New project configuration
• UI components and development API
• Developer productivity
• Performance
• Community 
• Documentation & Toolkit
• Testing support
• Build & release automation
• DevOps and CI/CD

 let’s start exploring each of them in detail.
 
1. Programming Language: One of the best benefits of using a cross-platform framework is the ability to use a single programming language to develop apps for both iOS and Android.

• React Native: use JavaScript along with JSX syntax to build cross-platform apps. JavaScript is a very popular language in the web community and React Native uses it for mobile development as well as web programming. Additionally, developers can choose Node.js for back-end development.
• Flutter: use Dart programming language which was introduced by Google in 2011 and is rarely used by developers. Dart is extremely similar to other traditional object-oriented languages like C# and Java, and it was designed to address the issues that can be confusing with JavaScript. Dart syntax is easy to understand for JavaScript and Java developers as it supports most of the object-oriented concepts. It’s easy to get started with Dart as there is great and easy-to-follow documentation available on the official Dart site and here.

Comparison: JavaScript is widely used by most web developers that's why it is easy to adopt the React Native framework. Dart also has a great feature but it’s rarely used and less known in the developer community. The advantage really depends on the current skill set of the developer. So, it’s clear that React Native wins(1/0) the point in the programming language category.

2. Technical Architecture: is the most important aspect of a cross-platform mobile app development framework, if you going to work with it. It explains the internal components of the framework.

• React Native: React Native architecture relies on JS runtime environment architecture, also known as JavaScript bridge. The JavaScript code is compiled into native code at runtime. React Native uses the Flux architecture. In short, React Native uses the JavaScript bridge to communicate with the native components.
• Flutter: Flutter architecture uses the Dart framework which has most of the inbuilt components like Material Design and Cupertino, packed inside which provide all the required technologies needed to develop mobile apps. So, it’s bigger in size and often does not require the bridge to communicate with the native components. The Dart framework uses the Skia C++ engine which has all the protocols, compositions and channels. 

Comparison: Flutter framework has most of the native components in the framework itself and it doesn’t always need a bridge to communicate with the native components. React Native uses the JavaScript bridge to communicate with native components which results in poor performance. So, it’s clear that Flutter wins(1/1) the point in the technical architecture. 



3. Installation: The installation method should be straightforward without having too many complicated steps so that it could be easily learned by developers that are just starting with it.

• React Native: The React Native framework can be installed by using the Node Package Manager (NPM). If you have worked with JavaScript, the installation of React Native is easy otherwise you have to learn the node package manager. The node package manager installs the packages locally or globally. The developers will need to understand where exactly the binary is located. If you going to install React Native on macOS, we have to use the HomeBrew package manager as well.

• Flutter: Flutter can be installed by downloading the binary for a specific platform from Github or official web site. After that, you to set the global path of the package and install some Flutter plugins that's make Flutter installation complicated. read more about the installation here.

Comparison: Flutter installation require extra steps for adding the binary to PATH and downloading it from the source code. React Native can be installed by just using package managers and without the hassle of downloading the binary from the source. So, it’s clear that React Native wins(2/1) the point for framework setup and installation.

4. New Project Configuration: The process of starting a new project on the developer machine always takes time. It requires lots of software installations and configuration.

• React Native: The React Native project assumes that the developer already has all the required setup for developing for iOS and Android. There is little info of command the line tools but it won’t be enough to start a new project. A new React Native project can be created and run on iOS simulator with the help of following commands:
  

  $ react-native init MyProject
  $ cd MyProject
  $ react-native run-ios
  

• Flutter: The Flutter has detailed information on the IDE setup and platform setup for both iOS and Android. You can read all the required setup details on Flutter install here. On top of this, Flutter has a CLI tool called flutter doctor that guides developers through the setup. It inspects which tools are installed on the local machine and which tools need to be configured. read more about the new project setup here.

Comparison: So, it’s clear from the comparison above. Flutter offers better documentation and CLI support for setup a new project configuration. So, Flutter wins(2/2) the point for new project configuration. 
 
5. User Interface Component and APIs: The support of native components on the cross-platform framework is most important. Without the support of the native component, the mobile app won’t feel like a native app. So, the cross-platform must have large native platform components to develop the user interface.

• React Native: The React Native framework provides just UI rendering and device access APIs to create mobile apps. To access most of the native APIs, React Native has to rely on third-party libraries. The full list of development components and the official APIs can be found here.

• Flutter: Flutter framework has UI rendering, device API access, testing, navigation, stateful management and loads of libraries. This rich set of components removes the need to use third-party libraries. If you have a Flutter framework, it means you have everything needed for developing mobile apps. Flutter also has widgets for Material Design and Cupertino that allow developers to easily render the UI on both iOS and Android platforms.

Comparison: So, Flutter is rich with development APIs and UI components while React Native is dependent on third-party libraries. So, Flutter wins(2/3) the point for screen design components. 



6. Developer Productivity: Developer productivity says, how fast you can develop an application. Every company always thinks about time and quality to start an app development without any kind of wait or distraction.

• React Native: If you have JavaScript skills, then it’s fairly easy to use those skills for cross-platform app development. React Native has a hot reload feature that saves the time of developer time while testing the changes in the UI. In terms of IDE support, you are free to use any text editor or IDE for application development.

• Flutter: Flutter also has a hot reload feature and it’s very easy to get started with the demo app. Dart is not a common programming language and there is a lack of support for it in many IDEs and text editors. But as, we said above dart is very easy if you know java and kotlin. Apart from this, If you use any IDE to develop an app, then debugging is very easy.

Comparison: So, if you know JavaScript only, then you should work with React Native. But if you know Java or Kotlin, then you have to work with Flutter. Here, I'm giving the point(2/4) to Flutter because debugging is better than React Native.

7. Performance: Although there hasn’t been a lot of benchmark tests between apps made with both platforms, Flutter apps would theoretically beat React Native apps in performance because of the way the Flutter framework works.

• React Native: React Native, on the other hand, makes use of a Javascript bridge to interpret the UI components to be rendered, which then invokes Objective-C APIs or Java APIs to render the iOS or Android component on the screen. This extra layer of abstraction might make React Native apps slower.

• Flutter: Flutter takes an entirely different approach to render apps on the screen. To start with, Flutter does not make use of native components from either platform. Instead, it creates its widgets and makes use of the GPU to render it on the screen. It compiles all Dart code to native ARM code which can then be run directly by the CPU. This makes apps built with Flutter quite fast. Flutter’s application is compiled using arm C/C++ library so that it’s closer to machine language and gives better native performance.

Comparison: Flutter creating new widgets to improve mobile application performance. The Dart framework which has most of the inbuilt components like Material Design and Cupertino, packed inside which provide all the required technologies needed to develop mobile apps. Here, I'm giving the point to Flutter(2/5).

8. Community: As soon as developers start to show interest in new technologies, they form a community to share knowledge, helps each other and solve the problems they are facing.

• React Native: React Native released in 2015 and has gained in popularity ever since. There is a community of React Native developers on GitHub and lots of meetups and conferences around the world.

• Flutter: Flutter has been around for a while but it gained a lot of attention when Google promoted it in the Google I/O conference in 2017. The Flutter community is growing rapidly these days, meetups and conferences are taking place online. 

Comparison: The React Native community and resources have grown in size since the framework was launched. Flutter is still new, although community support is growing rapidly. So, React Native wins(3/5) the point for big community support. 

9. Documentation & Toolkit: As soon as developers start to show interest in new technologies, they form a community to share knowledge, helps each other and solve the problems they are facing.

• React Native: The documentation of the React Native framework is not organized because most of the components design by third parties and they do not provide proper documentation. 

• Flutter: Flutter providing very good documentation, it makes the mobile app developer’s life easy by allowing them to use them while documenting their applications. Hence as far as documentation and Toolkit is considered Flutter is the best option when compared to the counterpart. 

Comparison: To start any new technology, documentation makes life easy. So, here Flutter wins(3/6) the point for documentation.



10. Testing Support: The test cases are a great way to get quick feedback on the code. A mature technology should have 
testing framework to allow the developers to create unit, integration and UI tests for the apps.

• React Native: React Native is a JavaScript framework that's why it has few unit level testing frameworks available in JavaScript. Jest tools can be used for snapshot testing. But, when it comes to integration or UI level testing, React Native not provide official support from React Native. There are third-party tools like Appium and Detox that can be used for testing React Native apps but they are not officially supported.

• Flutter: Flutter provides a rich set of testing features to test apps, widgets, and integration levels. Flutter has great documentation on testing Flutter apps here, you can also read the Nevercode blog on testing Flutter apps for detailed information on how Flutter apps can be tested. Flutter has a great widget testing feature where we can create widget tests to test the UI and run them at the speed of unit tests.

Comparison: The React Native community has no official support for integration and UI level testing, while Flutter has great documentation and a rich set of testing features. So, Flutter wins(3/7) the point for testing framework and libs. 

11. Build & Release Automation: Releasing mobile apps to the App Store or Play Store is a big process. It involves the complex task of code signing all another application setup. When it comes to cross-platform mobile app development, it gets even trickier.

• React Native: The React Native official documentation doesn’t have any automated steps to deploy the iOS apps to the App Store. However, it provides a manual process for deploying the app from Xcode. There is an article on how to deploy React Native apps to App Store here but the entire process looks manual. However, we can use third-party tools like fastlane to deploy iOS and Android apps written with React Native. The process of using fastlane to ship React Native apps as described in this article. It means React Native has to rely on third-party libraries for build and release automation.

• Flutter: Flutter has a strong command-line interface. We can create a binary of the app by using the command line tools and following the instructions in Flutter documentation for building and releasing Android and iOS apps. On top of this, Flutter has officially documented the deployment process with fastlane here.

Comparison: Flutter has a great build automation tooling and can be used to deploy apps from the command line. React Native apps lack support for the CLI tools that are officially supported for build automation. So, Flutter wins(3/8) the point for testing framework and libs.

12. CI/CD Support: Continuous Integration and Continuous Delivery practices are essential for any application to get continuous feedback and avoid releasing buggies code.

• React Native: React Native doesn’t have any official documentation to set up CI/CD. However, there are some articles that describe CI/CD for React Native apps.

• Flutter: Flutter has a section on Continuous Integration and Testing which includes links to external sources. However, Flutter’s rich command-line interface allows us to set up CI/CD easily.

Comparison: Flutter apps are easy and painless to set up on CI/CD services by using its strong CLI tools. React Native doesn’t provide any official instructions for CI/CD practices. So, Flutter wins(3/9) the point for testing framework and libs. 

Conclusion

React Native and Flutter frameworks have their pros and cons in terms of stability, performance, documentation and other aspects as mentioned above. Some of the industry experts have predicted that Flutter is the future of mobile app development and as we compare above aspects, it’s clear that Flutter has entered the cross-platform development race very strongly.