In-depth evaluation | Comprehensive comparison of five mainstream multi-terminal development frameworks

Which one is the best cross-platform development framework for 2021?

At present, there are many professional cross-platform development frameworks on the market, so which framework is more suitable for developers? The author specifically summarized and compared the characteristics of different frameworks.

The author at home and abroad has selected a total of 5 mainstream evaluation objects, namely RN, Flutter, Ionic, NativeScript, and AVM developed by the UFIDA APICloud team.

At present, Flutter is the most popular one, followed by RN, depending on the application scenarios and fields of the enterprise. AVM, Ionic, and NativeScript are also used by many enterprises and individual developers.

1. Comparison of installation environment and development tools.

The installation environment of any framework represents whether the framework is friendly to novices. Therefore, the author especially introduces the situation of different frameworks from the installation environment and development tools to compare the cost and threshold for newcomers to get started. The author is a MacOS user. The following full text introduces the development environment and development tools under Mac.

1.1 React Native

RN is a cross-platform mobile application development framework open sourced by Facebook in April 2015. It has been developed for more than 6 years now. The latest version is 0.66. There will be an update release on December 10, 2011. A small version will be released as a whole. It's still very vital. Official website: https://reactnative.dev/

Let's take a look at the installation environment and development tools. From the latest official website, you can see that it is more convenient if you just get started. You only need to install Nodejs version 12 or higher locally. Then use the Expo tool recommended by the official website to quickly set up a local development environment. Because I am a MacOS user, I have installed Xcode before, so the overall installation is fairly smooth.

The first is the command line tool installation of Nodejs:

yarn global add expo-cli

I don’t talk about the configuration source here. If it is slow, you can switch the domestic yarn source. After the installation is complete, use it directly

expo init AwesomeProject

Install the project, enter the project execution after the project is installed

yarn start

Expo-cli will be reinstalled once, and then start the project locally, open the dev browser interface as follows, on the far left you can see that the local expo debug station is opened, select the local LAN network, and then click Run on iOS simulator to start I have a local iPhone 8 device, and then I saw the current interface, and the template code generated locally is on the far right.

The author uses vscode as an editing tool, and the official recommendation is also vscode. The directory generated using scaffolding is similar to a normal React project. The entry is in the App.tsx file and supports modified hotRload. The whole process is not high for front-end development, at least until the debugging and development stage, if it only involves UI is written, and you can start working directly after configuration.

1.2 Flutter

Flutter has been more than 3 years since its birth (released v1.0 in 2018). It is a cross-terminal development framework by Google. Unlike RN, Dart is used for the development language instead of JavaScript. The official website is here: 161cda65dceb08 https: //flutter.dev/

In recent years, the development has been relatively rapid, and major companies have introduced main-end business. Many businesses including the author's company also use Flutter for UI development. Below, the author briefly introduces Flutter's development environment and tools.

First of all, you must download and install the complete Xcode and Xcode developer tools development tools. By default, everyone has installed them, so I won't repeat them later.

You need to download the Flutter SDK first: https://docs.flutter.dev/development/tools/sdk/releases

After decompressing the SDK, set the corresponding SDK environment variable address:

cd ~/development

unzip ~/Downloads/flutter_macos_vX.X.X-stable.zip

export PATH="$PATH:`pwd`/flutter/bin"

If you encounter a problem during the process, you can use flutter doctor to check the problem and fix it. If there is an error or missing environment, it will prompt you how to modify it, which is more convenient.

If flutter doctor reports no error, then the flutter command line is installed. Let's take a look at the development experience.

First of all, I use vscode for development. You need to install the officially recommended vscode plug-in. Just search for Flutter installation in the plug-in market, and then you can create a new Flutter project through the plug-in.

Configure the corresponding iOS simulator locally, click the debug button on the left side of vscode to select the corresponding simulator, and you can directly start development and debugging.

The screenshot is a small application project made by the author. The directory structure is relatively simple. The main.dart in the lib directory is the entry file. The only shortcoming is that Flutter is not friendly to the front-end development syntax. Dart is not complicated, but it is compatible with JavaScript. There are still quite a few discrepancies, which require a certain amount of time to master and learn, and the usage of many corresponding system libraries is also different.

Overall, it is more complicated to configure than RN. For front-end development, Dart syntax is a challenge. In addition to Dart, you need to understand Flutter's own state management mechanism, widget concepts, and the functions of the corresponding material-related libraries to write applications. To get started, the threshold for newcomers is still relatively high.

1.3 Ionic

Drifty Co. launched Ionic in 2013, which can be said to be the originator of hybrid development (hybrid). Before his launch, everyone generally developed hybrid development applications under PhoneGap. Ionic was highly integrated with Angular at the beginning. It has already supported the integration of React and Vue, and can use Cordova's library. The overall ecology is still good. The advantage is that Web technology is the main advantage, but the disadvantages are also obvious. The performance and performance of Webview are comparable to those of RN and Flutter. The performance comparison of Code is definitely worse. Some features that are not supported by the Web require a large number of native plug-ins to support.

Let's take a look at his experience of installation environment and development tools. First, install the global cli command line tool, Nodejs version 12.14 and above.

npm install -g @ionic/cli

ionic start myIonicApp blank --type vue

ionic serve █

It seems relatively simple, but there are more things to install. It is recommended to set npm as a domestic source in advance, otherwise it will take a long, long time to wait.

After using serve, a webpack-dev-server is actually set up locally.

Opening the 8100 address is actually a normal web project. Those familiar with vue can tell at a glance that IonicVue exists as a plug-in of Vue.

Then take a look at how to preview it on the simulator. First, you need to install the following two tools, which are pre-dependencies.

npm install -g ios-sim

brew install ios-deploy

Then build the project in the project directory first, and then we directly use Ionic Cli:

npm run build

ionic capacitor run ios -l --external

Choose a local simulator, and then you can see the interface, but because the author’s local Xcode is an old version of 11, compilation errors will be reported, so you need to upgrade to the latest Xcode12 or above, but the author’s Xcode cannot be upgraded. , Because the author’s computer system does not support higher levels of Xcode, so I changed to android debugging later.

I have installed android studio before, need to update the SDK to the latest, and then find the AVD panel in the tools to create an emulator.

After starting, you need to check with adb devices. If the device is online, proceed to the next step:

ionic capacitor add android

ionic capacitor run android

This step is very, very slow for the first time. It should be the same as ios. It needs to be compiled into an apk and then synchronized to the simulator.

The final effect is this, seeing the last few lines of the log is to deploy a debug apk to the simulator.

On the whole, the installation steps of Ionic are not complicated. If the network is better, the whole process takes less than half an hour. If it is the latest version of MacOS, it should be smoother to upgrade Xcode to the latest version. Looking at the official website, the debugging method is to use the chrome or safari web debugging tools to debug, so everyone understands that this Ionic wraps the webview, and the debugging method is the same as the webview debugging method.

1.4 NativeScript

NativeScript was developed by Progress, a listed company that has been focusing on development tools for more than 30 years. Like its name, the capabilities of the entire NativeScript were developed specifically for iOS and Android, but written in JavaScript. Unlike the Ionic mentioned above, it is a shell Webview. NativeScript still bridges the gap between Js and Native. It really uses Native Code for page rendering, which also makes it more expressive than Ionic. From the official website It also supports different web framework writing methods, such as Vue, React, including TS support. Of course, it can also be written with native JS and HTML. Official website: https://nativescript.org/ .

Let's take a look at his installation environment and development tool experience. The MacOS system environment is still set up.

The same is the Cli tool that needs to install NativeScript first:

npm install -g nativescript

In the process, you will encounter downloading dependencies from codeload. You can set up a proxy or modify the host of codeload to solve it. The author encountered it, but this is not a nativescript problem :).

140.82.114.9 codeload.github.com

使用 ns 命令创建 NativeScript 项目：

ns create myNativescriptApp

Choose to create an empty project with a Vue template. The command line will guide you interactively. You can edit it by opening it with Vscode. The directory structure is basically the same as that of a normal Vue project. The entry is app.js in the app directory, and the Vue instance is nativescript. -vue alternative.

Run the project on multiple devices:

` `$ ns run ios

` `$ ns run android

Debug the project with Chrome DevTools:

` `$ ns debug ios

` `$ ns debug android

Let's take a look at what it looks like under android. iOS also cannot run because the local Xcode version is too old. The first compilation takes a long time and requires patience.

After running, it is similar to Ioinc. There is also a debug apk installed in the emulator. After testing the local modification of the front-end code, webpack will watch and sync locally to the emulator to achieve hot updates. The speed is ok, but it needs Frequently restart the app to take effect.

1.5 AVM

AVM is a set of cross-end JavaScript framework developed by APICloud. Its full name is (APICloud-View-Model). The writing type Vue is also compatible with React JSX. It has two-way binding, componentization and state management support, and is equipped with system-level APIs. It supports cloud compilation and publishing to different platforms. The official website is: https://www.apicloud.com/AVMframe , with its own development IDE support, I think there will be an update of the SDK in December this year (2021-12-3) ), the JS Framework part is all open source, including the JS component library.

Let's take a look at his installation environment and development tools. First, you need to register for an APICloud account, because they inherit the function of cloud compilation, and ide also requires account login to synchronize code. Then download the APICloud Studio 3 official website. If it is a Mac system, you must pay attention to it. It cannot be opened directly in the download directory. It needs to be copied to the application folder before use.

After downloading, open it, and those who are familiar with vscode should be able to find that this is an IDE based on the secondary development of vscode.

The entry file is the stml code file in the pages directory. Right-click on the top to preview the real-time preview and you can see the effect directly on the right. It should be noted that only standard H5 components and page effects can be previewed here, and native API functions cannot be previewed, so it is recommended For real development, you need to install AppLoader on a real machine for debugging, similar to RN's Expo.

Download address of : 161cda65dcee3b https://docs.apicloud.com/Download/download#apploader

After installing, keep your Mac and mobile phone on the same network, and use AppLoader to scan the QR code in the IDE to see the real machine effect in real time.

System-level APIs such as network and wifi can be used and previewed normally on the real machine, and there will be prompts when errors are reported. The development experience is very similar to a small program.

On the whole, the development environment and development tools are integrated, the process is relatively smooth, and there are no command line tools in the whole process, but they should be used according to the guidance of the official website documents.

1.6 Summary

After a preliminary explanation of the five frameworks, you can see that basically everyone’s development process is divided into two categories, one is to directly package debug on the mobile phone for development and debugging, such as Ioinc, NativeScript, and Flutter, the other one The class requires an additional AppLoader for auxiliary debugging, such as AVM and RN. Of course, the latter also supports direct installation of the package to the real machine, but the debugging method is still different.

In terms of development tools, basically everyone can use Vscode for development, and they all support hotReload. Some provide their own IDE with a relatively high degree of integration, such as AVM.

Second, performance comparison

Below, the author will talk about the comparison of different frameworks from a performance perspective. This may be the most concerned by everyone. The author made a horizontal comparison by writing a simple and super long viewlist. The author put the code here, https://github.com/xiaojue/ListViewDemo , you can refer to it later to implement a 1000-line graphic list , Left picture and right text.

RN effect:

Flutter effect:

Ionic effect:

NativeScript effect. Here, NativeScript development experience is the worst. I will elaborate on the API analysis part later:

The effect under AVM:

The code implementation is very simple, there is no special optimization, no scroll loading, no interactive events, directly filled with 1000 data, and all the official list components are used.

Performance After entering the device directly with adb shell, use the top command to observe the app process:

Among them, we use the android developer function and GPU screenshots to identify the number of frames, and the compilation speed is directly counted by the time command, all using the time taken for the first debug startup.

for example:

time ns debug android

frame	RAM	CPU usage	FPS	debug compilation speed
RN（expo go）	300M	78%-116%		0m32.229s
Flutter	190M	37%-43%		0m21.336s
Ionic	138M	49%-65%		<p>0m55.549s</p><p></p>
NativeScript	147M	19%~20%		0m27.862s
AVM	122MB	6%-10%		0m0.094s

A brief analysis, the first is the memory usage, which is basically more than 100MB, RN and Flutter are the most, and AVM is the least. Then there is the percentage of CPU. I kept pulling down the list to look at the CPU occupancy rate. Among them, RN is the highest, but its fps is very low. This means that the higher the cpu occupancy rate, the more calculations, but the bottom of the fps indicates that there is no lag. Performance is better.

For example, we see that Ionic's cpu occupies only half of RN, but the fps is extremely high, and there is obvious lag. So we can say that the performance of RN is much better than that of Ionic rendered by webview, including NativeScript and AVM. This is the same reason. The higher the cpu ratio, and the lower the fps, the better the performance. However, there is a problem with the high CPU usage, which is that it will be compared. Electricity...

Finally, let's look at the compilation time. This is related to the debugging experience. The AVM is the fastest, basically syncing to the real machine in milliseconds. The others are basically in seconds, and you need to run build. Of course, Expo and AVM both have a pre-loader, so it is definitely faster than the one without the loader program. The author of AVM is not sure why it is so fast. This is really surprising to the author, but one thing is that the installation of AVM on the author’s android emulator failed, so the author used the real machine to evaluate it. There may be some impact. The real machine The performance is higher.

3. Whether to support multi-terminal compilation (including small programs)

The multi-terminal here not only refers to android, ios, h5, but also includes whether to support the compilation of domestic small programs. Because the current business scenarios of many companies need to run in different APPs, whether to support multiple terminals is very important for our domestic users. The author deliberately added this comparison item. In addition, the current PC-side compilation is also supported by various companies, so the comparison of windows and macOS platforms has also been added.

frame	Android	iOS	H5	Applets	windows desktop	<p>macOS</p><p>desktop</p>
React Native	√	√	√	alita，remax，Taro	react-native-windows	react-native-macOS
Flutter	√	√	√	MPFlutter	√	√
Ionic	√	√	√	X	√	√
NativeScript	√	√	X	X	X	X
AVM	√	√	√	√	X	X

The overall research situation is as shown in the figure above. The part of the check mark is that the official website directly supports compilation. The cross sign means that the official website does not support it, and there is no more mature open source solution. Some framework support such as RN and Flutter are written separately. Some fairly mature open source solutions can be used.

On the whole, if you only develop Android and iOS applications, these five frameworks are fine. If you want to support applets and desktop software, you need to consider more. At present, RN and Flutter ecology are the most complete, followed by Ionic , Of course, if you are a developer based on WeChat applets and do not consider desktop, then AVM may be a better choice.

Fourth, the ecological situation

4.1 Open source ecology, popularity

We directly use NPMCompare to compare, because Flutter and AVM do not have corresponding packages on NPM, I will list them separately later.

In terms of downloads, RN is far ahead. Ionic and NativeScript are not enough to see. RN is definitely the first. Ionic is better than NativeScript. From the perspective of issues, NativeScript is better, but it may be caused by too few users. Ionic and NativeScript all add up, not as good as RN.

Let's look at Flutter and AVM again, because we didn't find the corresponding packages and downloads, we took the data from took a look at 161cda65dcf303 https://www.statista.com/statistics/869224/worldwide-software-developer-working -hours/ .

It can be seen that the data obtained is similar to our above results. The total share of Ionic and NativeScript in 2021 is only 16%+5%=21%, Flutter is the first 42%, and RN is the second 38%. It can be seen that Flutter has gradually increased from 2019 to 2021, and will eventually overtake RN in 2021.

The above is the comparison of the main warehouses of several main frameworks. The data comes from https://www.githubcompare.com/ can be seen from it that Flutter and RN are basically the boss and the second child from the open In terms of issues, RN is better than Flutter. In terms of time, everyone started doing it 7 or 8 years ago, and the update situation is similar.

Let’s analyze the hot words in search engines.

Judging from the results of Google Trends, domestic apicloud, ionic, and nativescript are similar in popularity. Compared with react native and flutter this year, more people in China are turning to flutter.

4.2 API support, component richness

This part compares the native capabilities and component support of the five frameworks from the API level.

The author simply developed a list function earlier. Let's compare the number of basic components (including layout components) and API capabilities of each framework below.

frame	Number of components	Number of system API/Plugin	Development experience
RN	34	33	React seamlessly cuts in
Flutter	171	104	Dart grammar, has a certain threshold and adaptation time
Ionic	90	291	Support React, Vue, Angularjs, JS, TS development
NativeScript	31	87	Real-time debugging ability is too weak
AVM	31	219	Strong real-time debugging capabilities, Vue-like syntax compatible with React JSX

Source reference:

RN component: https://reactnative.dev/docs/components-and-apis

RN API：https://reactnative.dev/docs/accessibilityinfo

Flutter component: https://docs.flutter.dev/reference/widgets

Flutter API：https://api.flutter-io.cn/

Ionic component: https://ionicframework.com/docs/components

Ionic API：https://ionicframework.com/docs/native

NativeScript component: https://docs.nativescript.org/ui-and-styling.html

NativeScript API：https://docs.nativescript.org/api-reference/index.html

AVM component: https://docs.apicloud.com/apicloud3/

AVM API：https://docs.apicloud.com/Client-API/api

Although the data is quite different, for example, although the number of APIs and components of RN is less, they are all divided by modules. For example, in a single API Class, there are actually many methods that can achieve many capabilities. Only the number is listed here, and it only provides a rough, preliminary and intuitive feeling about the cost of learning, whether it is really enough, or it needs to be truly developed to have the absolute right to speak.

I think Flutter is unique in terms of development experience. Because Dart is different from TS and JS, there are still some conflicts between the concept of UI development and the front-end. Other frameworks developed using JavaScript technology, AVM, RN, and Ionic are actually pretty good. But Ionic supports the use of various JS libraries for development, such as React, Vue, NG, etc., while AVM supports Vue and react syntax features, and RN must be React. Although NativeScript also supports the development of different front-end frameworks, the overall development experience is the worst. Its real-time compilation, debug function and layout system are really bad. I don’t recommend reentering the pit here. There are really few users. The reason, for example, the author, a beginner, immediately persuaded him to leave after reading their layout documents.

And looking at all the frameworks, the most detailed documentation is RN, Flutter, and AVM. However, RN and Flutter are not sufficiently localized, while Ionic and NativeScript have relatively little domestic information and relatively confused documents, and they have not been updated for a long time.

Five, summary

Although the previous author analyzed the situation of each framework from different angles, such as getting started, development environment and simple performance comparison, ecological situation, etc. But for these frameworks, there is actually a lot of room for research. This article is only an objective record of the author's first use and investigation of different frameworks. Therefore, it is inevitable that some areas are not comprehensive, but they have basically reflected the situation.

From the performance point of view, AVM's development experience and compilation speed are very good. Although it is a domestic framework, it is not worse than foreign ones, followed by Flutter, RN, and finally Ionic and NativeScript.

In terms of development experience, RN and Ionic are more comfortable, followed by Flutter and AVM. Flutter is because of Dart syntax, but needs to be studied separately. Small and medium-sized enterprises and individual developers need to consider; while AVM does not support TS and other language frameworks only support JS syntax. The worst is NativeScript, which basically cannot be debugged in real time, and the API is very unfriendly.

To sum up, the author thinks that the hottest in 2021 is Flutter, which has already surpassed RN. On the whole, most of the current choices and shares of domestic and foreign users have been divided up by Flutter and RN. In other frameworks, AVM and Ionic have their own advantages, but from the perspective of user experience, difficulty in getting started, and community conditions, domestic AVM is definitely more suitable for domestic developers. After all, there is localization, cloud integration, and the debug experience is also amazing.

Therefore, it is not a problem for big manufacturers to directly go to Flutter, Dart is not too difficult, and this part of the cost is not a problem. However, if other companies and individual developers choose AVM for the domestic market, RN is more appropriate (compared to NativeScript and Ionic, AVM naturally supports domestic small programs, which is an important bonus, while RN documents and ecology are more) , Finally, if you consider the desktop adaptation, then Flutter looks more suitable.

Click on the link below: https://www.apicloud.com/index?uzchannel=272