Are you choosing between React Native and Flutter? Discover the difference between these two and what pros and cons they have.
The phenomenon of mobile apps dramatically affected the world of development. With over 3.6 mobile users worldwide, the creation of mobile apps requires new solutions that are less time and effort-consuming. In 2021, there are two main hybrid frameworks for app development, Flutter vs React Native. And the popularity of both of them keeps rising.
42% of developers choose React Native for building apps, while Flutter is chosen by 39% in 2020. The third popular framework is Cordova that is chosen by only 18%! Flutter has already been used by over 2 mln of developers, and 500,000 use it monthly. The numbers are really impressive, but they mostly depend on the popularity of mobile apps among users. The matter is, 92% of mobile users spend time with apps and social media, and only 8% use web browsers. For business owners, presenting on all platforms is obligatory, and they won’t miss a chance to attract clients via various channels.
However, for most businesses developing native apps for each platform is an unbearable waste of time. Therefore, they are looking for some technologies that would help in developing cross-platform mobile applications. And here they start wondering what is better: React Native vs Flutter? Indeed, hybrid apps are the best solution for the business. The segment of hybrid apps is growing fast, and it seems that in several years, hybrid apps will displace native apps.
Nick, Tech Lead of Mobile Development department at NIX, says: “There are many tools and features that are equally good in React Native and Flutter: Code Reusability and Hot reload with its ability to make changes on the fly. Also, there are features that are equally bad, like stage management for instance. When it comes to performance, Flutter works without the use of additional APIs unlike React Native, and in fact, the framework does all of the work to connect the divide between the device and the codebase. When it comes to native appearance, React Native is more dynamic with a powerful and flexible API.”
So why are Flutter and React Native so popular? Obviously, native applications work better on mobile devices. Users with technical background will notice that graphic transitions take less time for UI rendering than cross-platforming. However, for a random user, the difference will be almost unnoticeable. Therefore, they start to consider Flutter vs React options.
All native frameworks use codes that communicate to the IS core directly. But the problem is that native frameworks are written in different programming languages depending on the OS and device. As we can understand, creating a native app for Android and iOS will require at least two developers. But the mobile world is not limited to the OS only. There are too many peculiarities which imply involving more developments, which results in spending more money.
To develop an Android app only, a company needs to hire Java, C, and C++ developers. For iOS, the developers with knowledge of Objective C and Swift must be hired. For small and medium businesses, it’s impossible to afford these costs. So why pay more if it is possible to choose between React vs Flutter, a cheap and fast way to build an app. In a nutshell, the list of hybrid app platform advantages contains the following aspects:
- Hybrid apps are more cost-effective. Developing an app on Flutter or React Native saves time, and the results are almost as satisfying as with a native app.
- They need shorter development time. Time is money. So when a company saves time of development, it additionally saves costs.
- They have offline support. There is no need to contact support anytime something is wrong with the code. Offline libraries have all answers. A developer just needs to know where to find them.
- Hybrid apps are easier to maintain. With all the updates of the systems, it may be difficult to track how the updates affect various codes. With hybrid apps, this is no longer a problem as you have one code for all applications.
- They run on both iOS and Android platforms. No need to spend more time and money on developing another app.
- They offer easy integration with third-party apps.
- Hybrid apps are often considered the best for an online marketplace. And it is true. The advantages are various, while the disadvantages are so minor that they can be ignored.
So why choose native app development if we can choose hybrid apps? There are two perfect solutions in cross-platforming development – Flutter vs React Native. They both possess a huge number of features, have open-source frameworks, and are powerful enough to develop almost any application. At this point, a new question appears: what is better for development, Flutter or React Native? In this article, we will try to find the answer to this question.
What is Flutter?
Flutter is a cross-platform framework developed by Google. First released in May 2017, it continues its rapid growth and becomes more popular in the developers’ circles. If we compare React Native vs Flutter 2021 stats, we will notice that Flutter becomes more popular among the developers. Such regions as Kenya, China, Bangladesh, Japan, Jordan choose this framework. Compared to 2020, when 30% chose Flutter, in 2021, this number grew to 39%.
What’s so special about Flutter? First of all, it is the ability to create cross-platform applications using a single codebase. It means that there is no need to develop separate apps for the web, mobile, and desktop. With Flutter, there appears one single tool that helps to develop apps easily.
Todd Fabacher, Chief Executive Officer with over 25 years history of working in the computer software industry, says about Flutter: “This has been attempted many times before with moderate success, but Google has finally solved the mobile development puzzle with Flutter. It is open-source and free, which is perfect for students and others on a limited budget. My advice is just to download it and get started. It is that simple. It will be the best investment in yourself or your company that you will ever make.”
No more compromises on speed, quality, or performance – Flutter helps to build beautiful apps within a single codebase. Flutter consists of a framework built with Dart. The rendering engine is designed predominantly in C++. It’s interesting to know that apps built using Flutter are more intuitive and easier to navigate. The matter is that with this framework, app developers can modify UX. This process requires changing the variable in the state. In React Native vs Flutter comparison, this point is extremely important.
On March 2, 2021, Flutter 2 was announced by Google. The news is fascinating, as this update fundamentally shifts the way developers build apps. It uses a codebase for 5 OS: iOS, Android, Windows, macOS, and Linux, and additionally, it targets such browsers as Chrome, Firefox, Safari, and Edge. What does it mean for the developers? Flutter finally can help in building apps for the web!
According to Google, “Flutter’s web support builds on these innovations, offering an app-centric framework that takes full advantage of all that the modern web has to offer.”
Development
Although Flutter belongs to one of the fastest cross-platform frameworks to build an app, the speed of development is lower than in React Native. The matter is that when working with Flutter, it’s important to add different code files for Android and iOS systems. However, it happens only when an app requires more complicated UI elements. However, Flutter has and access to several third-party UI libraries with ready-to-use components. Due to this, the development time can be decreased. And to tell the truth, these libraries make the development process more convenient.
Another great point about Flutter is Hot Reloading” or “Hot Restart.” Due to these features, a developer can see all the changes instantly.
Performance
As we have already mentioned, Flutter is written in Dart language, which allows compiling a code quicker than JavaScript. Moreover, thanks to this, Flutter displays animations at 60 fps as a standard. As a rule, all Flutter apps have a high performance by default. Still, it is necessary to consider some common problems that may affect the rate. Flutter provides users with recommendations that help to reach the desired results. These recommendations include:
- Performance optimization in with tree shaking and deferred loading
- Performance improvement with image placeholders, precaching, and disabled navigation transitions
- Creating Flutter widgets that perform
Also, Flutter recommends controlling build costs, applying effects and widgets only when you really need them, using lazy methods for grids and lists, and building and displaying frames in 16ms. We should notice that in comparison to Flutter vs React Native performance, Flutter is not a leader. However, many developers admit that Flutter has too many other advantages, which make it a better choice.
Documentation
Flutter is known for perfectly structured documentation, which has answers to all the questions. Despite the low speed of the development, many still prefer Flutter due to the documentation. Perhaps the only drawback of Flutter documentation is that you need to visit a website each time you need to check something. But from another point of view, the documents are so well-structured on the website that the inconveniences are almost unnoticeable. Flutter documentation is available on open source at docs.flutter.io website. Flutter documentation covers but is not limited to:
- Libraries
- animation
- cupertino
- foundation
- material
- painting
- physics
- rendering
- scheduler
- semantics
- services
- widgets
- Dart
- Core (including support for asynchronous programming, classes, and utilities supplementing the collection support in dart:core, encoders, and decoders for converting between different data representations, built-in types, collections, and other core functionality for every Dart program, etc.)
- VM (including Foreign Function Interface; File, socket, HTTP, and other I/O support for non-web applications, concurrent programming using isolates)
- Web(including HTML elements and other resources for web-based applications, low-level support for interoperating with JavaScript, utility methods to manipulate package:js)
- Platform_integration(Android and iOS)
- flutter_test
- flutter_driver
- flutter_localizations
- flutter_web_plugins
- archive
- async
- boolean_selector
- characters
- charcode
- clock
- collection
- convert
- crypto
- file
- integration_test
- intl
- matcher
- meta
- path
- platform
- process
- source_span
- stack_trace
- stream_channel
- test_api
- vm_service
- webdriver
You can find everything you need about Flutter in the documentation. However, some developers say that despite a huge variety of information, the Flutter library is still not so well-structured as the library of React Native. Again, this is where Google Flutter vs React Native compete, but the winner is still unknown.
Pros and cons of Flutter
Like any other framework, Flutter has some advantages and disadvantages. However, the decision on what framework to use is up to the developer. To make the right choice, it is important to compare react native vs flutter performance and understand what you like more.
Pros of Flutter
We’ll start with the pros that make Flutter the best choice for the developers. Here’s the list of advantages of Flutter over React Native:
- It looks great!
- It’s rich in widgets;
- The community is rapidly growing
- Well-structured documentation
- Permanent improvements for web development
- It requires less testing
- The apps are fast
- It helps to create the same UI for older devices
- Flutter 2 helps to build apps for the web!
Cons of Flutter
Even though the list of Flutter advantages is impressive, some disadvantages are still important to consider.
- It is not native
- The apps are bigger than native ones
- It still has a limited set of tools and libraries comparing to native apps
These disadvantages are minor, and they do not interfere with app development. However, in some cases, the cons of Flutter may be decisive when choosing a cross-platform development framework.
What is React Native?
React Native is another popular cross-platforming framework developed by Facebook engineers. Such apps as Facebook, Instagram, Pinterest, Uber Eats, Walmarts, Tesla are developed on React Native. React Native popularity increases every day, and more and more developers prefer it to other options. React Native is based on ReactJS.It uses JavaScript to create a mobile application for both Android and iOS. As well as Flutter, it also allows developing an app using one codebase.
Tom Occhino, Engineering Manager at Facebook, told about React Native: “Engineers are choosing to use React every day because it enables them to spend more time focusing on their products and less time fighting with their framework. It wasn’t until we’d been building with React for a while, though, that we started to understand what makes it so powerful.”
Today, React Native has a big community which makes it the most popular cross-platform development tool.
Development
React Native is known for its fast development time and access to a few third-party UI libraries with ready-to-use components that allow saving time during the development. Also, it enables delivering new functionalities to supported platforms immediately, which also requires less time. Like Flutter, React Native possesses several features that simplify and speed up the development process. For example, it also has a Hot reload feature. It means that a developer can make instant changes and see the results immediately.
React Native is easy to install, but unlike Flutter, it creates packages. Some developers find it annoying, but for many, this plays any importance. React Native provides only UI rendering and device access APIs. It means that the framework relies on third-party libraries. And it depends on them. In this Flutter vs React comparison score goes to Flutter. So which is better Flutter or React Native, from the perspective of development? It seems that React Native has the score.
Performance
As we have already mentioned, React is written in Native and JavaScript languages. It is not enough to demonstrate a high level of performance for apps. Therefore, developers need to combine extra interactions with native ones to get the desired effect. As the architecture of React Native is made up of two parts, JavaScript and native, the framework requires a JS bridge to interact with native elements. This is another thing that makes React Native a little bit slower than other tools.
Documentation
If we compare flutter and react native, React Native documentation is not so impressive, but many developers find it more user-friendly. It includes guides and popular topics, so you can always find everything that you may require. Basically, it covers:
- Core components and native components
- React fundamentals:
- components
- JSX
- props
- state
- Handling Text Input
- Using a ScrollView
- Using List Views
- Troubleshooting
- Platform-Specific Code
- Environment setup:
- Setting up the development environment
- Integration with Existing Apps
- Integration with an Android Fragment
- Building For TV Devices
- Out-of-Tree Platforms
- Workflow:
- Running On Device
- Fast Refresh
- Debugging
- Symbolicating a stack trace
- Testing
- Using Libraries
- Using TypeScript
- Upgrading to new versions
- Design:
- Style
- Height and Width
- Layout with Flexbox
- Images
- Color Reference
- Interaction:
- Handling Touches
- Navigating Between Screens
- Animations
- Gesture Responder System
- Inclusion:
- Accessibility
- Performance:
- Performance overview
- Optimizing Flatlist Configuration
- RAM Bundles and Inline Requires
- Profiling
- Profiling with Hermes
- JavaScript Runtime:
- JavaScript Environment
- Timers
- Using Hermes
- Connectivity:
- Networking
- Security
- Native Modules:
- Native Modules Intro
- Android Native Modules
- iOS Native Modules
- Native Modules NPM Package Setup
- Native Components:
- Android Native UI Components
- iOS Native UI Components
- Direct Manipulation
- Guides (Android):
- Headless JS
- Publishing to Google Play Store
- Guides (iOS):
- Linking Libraries
- Running On Simulator
- Communication between native and React Native
- App Extensions
- Publishing to Apple App Store
Pros and cons of React Native
Both Flutter and React Native have some peculiarities that make them more or less attractive. Here, we will dwell upon the pros and cons of the RN. Netguru presents their vision on pros and cons of React Native:
Pros of React Native
If you are still hesitating whether React Native is worth your attention, the advantages will help you make your mind:
- It has a Hot Reload feature, which helps with fast coding
- One codebase that helps to create apps for two and more platforms
- It uses JavaScript
- The code can be reused
- It has an active and supportive community
- If you hire Reactjs developers, they easily learn React Native
- It saves up 50% of the time on testing
- It has fantastic performance
Nader Dabit, Developer Advocate, AWS, defines the following pros of React Native:
- Faster speed development
- Lower cost of development
- code reuse
- easier to find developers
- Ship across multiple platforms
- Possible to ship over the air updates bypassing App Store / Play Store.
Cons of React Native
Although there are many advantages, there are still some disadvantages in React Native usage. Here they are:
- Still, it is not native
- It does not have many out of box components
- The choice is limited
- Abandoned packages and libraries
- UI can be easily broken
- Apps are bigger than native ones
Documentation
Flutter has very brief documentation for the developers who are from other platforms like Android, iOS, React Native, or Web. However, mobile, web, or desktop development is not required to learn flutter. In the case you have experience in developing applications for other platforms, then you may study flutter documentation and learn very fast.
To start a project you need to download the installation package as a flutter.zip file with the stable version of the Flutter SDK.
We can do this with the following line:
curl -O https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v1.12.13+hotfix.8-stable.zip
mkdir ~/development
cd ~/development
unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.8-stable.zip
Add the flutter tool to your path:
export PATH=”$PATH:`pwd`/flutter/bin”
You can see if there are any dependencies that need to be installed to complete the installation with the following command:
flutter doctor
We can then create and run a new Flutter app by executing the following from the command line:
flutter create flutter_list
cd flutter_list
open -a Simulator // if you don’t run simulator
flutter run
That’s it, we’ve successfully launched our Flutter app.
The React Native documentation rather discusses components, APIs, and topics that are specific to React Native only.
React Native can be installed via the node package manager. If you use macOS, work with HomeBrew. If you don’t have HomeBrew, you should install it.
Let’s install it with the following command:
$ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
After installing Homebrew:
brew install node
brew install watchman
npm install -g react-native-cli
Now we can access react-native from the command line. Let’s create a new React Native project called react_native_list:
react-native init react_native_list
cd react_native_list
react native run ios
That’s it, we’ve successfully launched our React Native app.
Dynamic vs. static programming
There exist two major differences between dynamic typing and static typing. You need to be aware of them when writing transformation scripts. First, dynamically-typed languages perform type checking at runtime, while statically typed programming languages perform type checking at compile time. Java script that is used in React Native is considered a dynamically typed language. Unlike, Dart, which is used in Flutter is statically typed. With its combination of static and runtime checks, Dart has a sound type system, which guarantees that an expression of one type cannot produce a value of another type. For more information, read about Dart’s type system.
Project size
In terms of a project size Flutter may need 2 GB of available disk space minimum, 4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image. The app size may averagely take in android go devices up to 60mbs just for default app in Flutter new project. This is normal for flutter due to additional necessary files, etc.
Comparatively, React Native app size, for example, may be reduced from 26.1 MB to 3.1 MB, which makes it a recommended framework for mobile app development, though very hard to debug, etc.
Layout
React Native uses the Facebook Flux architecture. In short, React Native uses a JavaScript bridge to interact with native modules. JavaScript code is compiled to native code at runtime. So our project layout may look like this:
The Dart framework uses the Skia C++ engine which has all the protocols, compositions, and channels. Flutter has everything you need to develop applications in the Flutter engine itself.
So our project may look like this:
Where may be such project attributes as:
Android is a native Android app project that runs and builds our Flutter project;
ios is xcode is the iOS project that is used when building the Flutter iOS app;
lib is the main folder where the code of your Flutter application is stored;
pubspec.yaml is a project configuration file that you will often use when working with project settings. If you want to add a library, you will use this file.
Flutter vs React Native: Summary Comparison
As we can see now, Flutter and React Native have many things in common. First and foremost, they are both open-source frameworks that anyone can use. They both are developed by leading companies: Google created Flutter vs React Native was created by Facebook. To compare basic info about Flutter and React Native, you can check this info by NIX.
Flutter is easier to use as it is more resistant to system updates. It means that when iOS or Android update the OS, the app will remain the same. On the contrary, React Native depends on native elements, so when the update is released, some problems may appear in the launch app. Currently, Flutter supports Android 4.1+ or iOS 8+, while React Native supports Android 4.1+ and iOS 10+.
The biggest difference between React Native and Flutter is that Flutter has plugins developed by the Google team, like geolocation and mapping. Unfortunately, React Native app works better with apps with a one-time location and does not require tracking.
All in all, Flutter and React Native are great choices to save time and money on mobile app development. What framework to choose will depend on the preferences of the developer and the company.