Flutter vs react native vs native, who is the king of performance

Time:2021-5-5

background

Many years ago, when we discussed what is the most popular solution to build mobile applications, we always compared native development with cross platform development, and someone always raised the stereotype of “slow speed of cross platform applications”. For cross platform technology and its application development, we should not only consider the performance, but also evaluate the development efficiency, company business scenarios and other aspects.

In general, the development efficiency of cross platform development has been greatly improved, and the performance should be acceptable after optimization. At present, the mainstream cross platform technologies can be divided into three categories: one is the hybrid technology that uses native built-in browser to load HTML5, which mainly adopts Cordova, ionic and wechat applets; The other is to use JavaScript development, and then use native components for rendering. The main solutions are react native, weex and fast application; The last one is to use the built-in rendering engine and built-in native components to achieve cross platform, which is mainly used by flutter.

Performance comparison

Comparison index

At present, there are many kinds of comparison for application performance, but the following data are essential, including:

  • Interface (API): interact with mobile app interface (access photos, file system, get GPS location, etc.).
  • Business logic: speed of mathematical calculation and memory operation, which is the most important performance for applications with complex business logic.
  • Page rendering speed: animation smoothness, frames per second when the user interface changes, or some real-time user interface effects.

Comparative data

The following is a horizontal comparison of the performance of flutter, react native and native platforms. Run the same application and then check the performance under different indicators. The data comes from the network.

CPU intensive testing of IOS operating system (Gauss Legendre algorithm)

Flutter vs react native vs native, who is the king of performance
It can be found that in the CPU intensive computing test, Objective-C is the best programming language for IOS development, swift is 1.7 times slower than Objective-C, and unexpectedly, flutter is 15 times faster than swift, and react native is 20 times slower than Objective-C.

CPU intensive testing of IOS operating system (bolwin algorithm)

Flutter vs react native vs native, who is the king of performance
In bolwin algorithm, swift is 1.9 times slower than Objective-C, flutter is 5 times slower than swift, and react native is 15 times slower than swift.

Android CPU intensive testing (Gauss Legendre algorithm)

Flutter vs react native vs native, who is the king of performance
In Android development, Java and kotlin have similar performance indicators and are the best choice for Android development. Flutter is about 20% slower than single platform method, and react native is about 15 times slower than single platform method.

Android CPU intensive testing (bolwin algorithm)

Flutter vs react native vs native, who is the king of performance
It can be found that after using bolwin algorithm, Java and kotlin have similar performance indicators, which is the best choice for Android development. Single platform mode is 2 times faster than flutter, and react native is about 6 times slower than single platform mode.

The above comparison data are obtained after 100 times of testing, and the source code is in thehttps://github.com/nazarcybulskij/Mobile_Bechmarks_

It is found that in the development of mobile applications, the performance of native applications is still the best, but considering the development efficiency, it is also a good choice to use flutter. The following is a book about flutter application development that I will publish recently, tentatively named “flutter cross platform application practice”, and the bibliography is as follows:
Flutter vs react native vs native, who is the king of performance

Application of flutter in epidemic situation of pneumonia

In 2020, it was destined to be an insipid year. At the beginning of the new year, a New Coronavirus pneumonia epidemic swept the country. The updated data of New Coronavirus pneumonia epidemic caused many people to worry. Many measures taken by the city have brought many inconvenience to our lives. Under the influence of the nationwide New Coronavirus pneumonia epidemic, most offline businesses, especially the physical shops, shut down overnight, including intensive restaurant, tourism and cultural activities.

In the face of the epidemic, isolation is the most effective means of prevention and control, and it has also become an important variable to lead the change of business model. In the face of severe epidemic situation, even in the Spring Festival holiday, all kinds of activities such as visiting relatives and friends, business contacts, shopping and so on have pressed the “pause button”. At the same time, governments at all levels actively respond to the disaster and epidemic prevention, achieve timely isolation, and provide timely epidemic development information, so as to win valuable time for epidemic prevention.

The Spring Festival in 2020 is bleak and sad. The outbreak of the epidemic is unexpected to all of us. However, in this battle, the people of the whole country will unite as one, unite as one, and believe that the epidemic of pneumonia will be defeated. Pneumonia epidemic application is a tool application based on this reality, which provides the latest development information of pneumonia epidemic and some protective measures. The novel coronavirus pneumonia is partly effective.
Flutter vs react native vs native, who is the king of performance

Open source library

In the process of flutter application development, the components and APIs provided by the system can not meet all the development requirements. In order to complete the development task quickly, some third-party open source libraries are needed in most cases. The following are some of the open source libraries used in this project, as shown below.

cupertino_ Icons: ^ 0.1.2 // icon library
Dio: 3.0.9 // network request Library
Fluro: 1.5.2 // route navigation library
Provide: 1.0.2 // state management library
webview_ Flitter: 0.3.19 + 8 // WebView Library
device_ Info: 0.4.1 + 5 // device version database
pull_ to_ Refresh: 1.5.8 // pull down refresh
flutter_ Swiper: 1.1.6 // swiper Library
cached_ network_ Image: 2.0.0 // network image
shared_ Preferences: 0.5.6 + 2 // persistent database
Intl: 0.16.1 // Internationalization
open_ File: 3.0.1 // file selection
url_ Launcher: 5.4.2 // open a third party application
Connectivity: 0.4.8 + 1 // network status monitoring
photo_ View: ^ 0.9.2 // large preview
Flittertoast: ^ 3.1.3 // toast message prompt
syncfusion_ flutter_ Charts: ^ 18.1.0 // chart component library

When using, you only need to add these third-party open source libraries to the pubspec.yaml file.

In order to facilitate the majority of developers to learn, open source has been carried out on GIT. Welcome to fork and star. Download the link:Application of novel coronavirus pneumonia

reference material:
1,Comparison of mobile cross platform solutions: weex, react native, flutter and PWA
2,Introduction to flutter and environment construction
3,Dart language foundation of flutter development
4,Flutter Basics
5,Basic widgets for the development of flutter
6,Flutter application debugging
7,Flutter for Web
8,Asynchronous programming of flutter development
9,Network request of flutter development
10,JSON analysis of the development of flutter
11,Route and navigation in the development of flutter
12,Flutter essential open source project
13,International adaptation of flutter
14,Flutter application integrated Aurora push
15,Hybrid development of flutter
16,Build your own hybrid development framework of flutter
17,Detection and optimization of flutter application performance
18,Abnormal monitoring and reporting of flutter
19,How does flutter’s hot reload work
20,Why doesn’t Apple block flutter? Will Apple block flutter later
21,“Flutter in action” open source

Recommended Today

Analysis of super comprehensive MySQL statement locking (Part 1)

A series of articles: Analysis of super comprehensive MySQL statement locking (Part 1) Analysis of super comprehensive MySQL statement locking (Part 2) Analysis of super comprehensive MySQL statement locking (Part 2) Preparation in advance Build a system to store heroes of the Three KingdomsheroTable: CREATE TABLE hero ( number INT, name VARCHAR(100), country varchar(100), PRIMARY […]