Flutter vs React Native for cross platform mobile development

  • Author CreativeLambda.com
  • 29 Apr, 2020
  • 7 min
Flutter vs React Native for cross platform mobile development

The most important decision for each software product owner before even take a step into writing the code, obviously will be the technology stack of future application. The decision taken will be critical for all aspects of the whole development cycle, as well as overall cost of the mobile application and the time needed for development. The best idea behind all cross platform frameworks is that you can share significant amount of code building the same code for different targets - iOS and Android. Today we want to compare some functionality, the abilities and technological potential of both leaders in cross platform mobile development - Flutter and React Native.

The titans

Great news for all type of software development companies is that both mobile frameworks are backed by the leaders in technology space. React Native has been created by development team of Facebook and Flutter has been created by Google. This mean that both have a huge potential and have a lot of attention from developers. The popularity of React Native and Flutter is growing day by day because almost every company need to have a mobile application. So, how to choose between this two pieces of amazing technology? The main characteristics what companies are looking for is the quality of final user interface, the ability to build for different platforms, faster speed of the application and less resources in use. Both titans, Facebook and Google provided developers with set of tools to make their day to day duties more pleasant. And without general change of developer preferences. As always iOS developers can build apps using Xcode, Swift and Objective C, while developers with specialization on Android will use Android Studio, Kotlin and Java. However, while the technology looks the same and final customer device is the same - smartphone, this require completely different set of knowledge. As a result software development companies started to adopt and provide their customers with the solution for cross platform development using same programming language to have the opportunity to deliver effectively new products to the market and help companies in a startup development services space.

History of React Native and Flutter

Facebook started React Native project internally and made it open sourced in late 2015 to bring this piece of technology for wide audience in developers community. Flutter have similar history, was started by Google’s team of developers and have been heavily promoted since 2017. So, basically we are talking about very young frameworks with only 5 and 3 years in active development. Both technologies aim of helping mobile developers to build cross platform apps faster and with the use of single programming language. While technology seems to be very young comparing the time but both projects could be considered as mature because of the amount of code and work done by the community. In our article we are going to compare main functionality and characteristics of both. Some characteristics for our attention are:

  1. The easiness of installation.
  2. Developer productivity.
  3. Programming language in use.
  4. Technical architecture of framework.
  5. Hardware setup and project configuration.
  6. Components of user interface and development API.
  7. Community support.

Programming language

The main benefit of using cross platform framework in development is the use of single programming language.

React Native uses JavaScript to write cross platform mobile applications and we must say that JavaScript is extremely popular among web community. There are many other popular JavaScript frameworks like Vue, React or Angular. This mean that with a little training any developer which already mastered JavaScript will have no problems to write complex React Native applications. Having this in account many companies started to adopt React Native as the core framework for their mobile applications. Javascript is a dynamically typed language which have it’s pros and cons at the same time.

Flutter uses programming language called Dart which was introduced by the same Google in late 2011 and was mainly in internal use by Google before appearance of Flutter. Dart syntax have many similarities with JavaScript and easy to understand by JavaScript or Java developers. As well, Dart supports most number of object oriented concepts and architecture.

Technical architecture

Technical architecture is an important thing to consider while selecting cross platform mobile framework.

React Native uses Flux architecture because of the fact that it heavily relies on JavaScript runtime, known as JS bridge. This mean that JavaScript code is compiled into native code at runtime.

Flutter uses Dart which has most of components in it and is heavier in size but it does not require any bridges to communicate with native modules of the device. Dart have many modules built in, like Material Design and Cupertino - everything you need building cross platform mobile application. Dart uses Skia C++ engine which has all the compositions, protocols and channels needed for developer.

As the result of difference in technical architecture Flutter perform much better than React Native.

Installation steps

Installation steps should be simple without having too much overheads to be easily picked up by new developers for deep learning.

React Native can be installed using NPM - Node Package Manager, just like most dependencies in any JavaScript project. For installing React Native on MacOS we need to use HomeBrew.

Install Flutter by downloading it for a specific platform and by adding it as a PATH variable.

Both installation steps are very simple and will never take much time even for junior developer.

Setup and project configuration

Both projects provides simple getting started guides and React Native assumes that you already has all required setup. There no much information about Xcode commands and the guide directly jumps into creating new project.

Flutter’s getting started guide has detailed setup for each platform, explanations and tips how not to run in issues starting working with the framework. Basically, most of tiered to flutter doctor command and if the tool not reporting errors everything should work just fine.

User interface components and development API

When it is time to use cross platform mobile framework native components are the key for successful adoption. So, it is critical that the framework will provide you with the way to build in easy way native components.

React Native core will provide you with the minimum amount of functionality - UI rendering and the APIs to access the underlying device. This mean that React Native mostly rely on third party libraries.

Flutter will be delivered with the full set of functionality out of the box. You will have everything from state management to navigation and component rendering what reduce the need to use third party libraries in your cross platform mobile application. Most common UI blocs called widgets which allow the developer to wire with easy any complex user interface.

Developer productivity

All companies want to bring new product to the market as fast as possible and this is the reason why so important developer productivity.

If you do have enough skills with JavaScript it will be fairly easy to pick React Native. It uses hot reload functionality which will save you a lot of time applying changes without the need to re-build application.

Flutter also have hot reload functionality build-in as well as many IDEs providing the way how to integrate with Dart language for syntax highlighting and help editing.

Community support

React Native appeared in 2015 and has gained a lot of popularity since than. Community support is available via GitHub issues. There are a lot of meetups and conferences dedicated to React Native around the world.

Flutter also gained a lot of interest from software development companies and the community is growing rapidly as well. Most common way of the community support is GitHub issues as well as a lot of resources provided by Google.

Conclusion

That is possible to have different view comparing both technologies advocating each of them, but taking subjective view of CreativeLambda Flutter is mobile cross platform framework of our choice.