It’s been another April and a full year since the last in-depth review of the cross-end development framework was released.

It was a year of great success both in terms of user size and commercialization. Wechat mini programs have more than 300 million daily lives, and alipay, Baidu and Bytedance mini programs each have more than 300 million monthly lives.

In the field of small program development, big changes have taken place this year. Development framework from simple micro channel small program development, transition to multi-end framework has become the standard, further improve the development efficiency has become a strong demand of developers.

This year MPVUE stop updating, Taro began to explore Taro next, UNI-app products and ecology continue to improve, wechat launched a new support H5 and wechat small program kbone framework…

Many of last year’s deep reviews have retired and some of the rookies have caught the eye, so it’s time for a new wave of reviews for the 2020 edition.

Evaluation target screening

Cross-end framework is a heavy investment. In the more than one year of competition among frameworks, many frameworks are gradually abandoned by developers due to lack of investment. Uni-app and Taro have become the mainstream of the market by relying on continuous strong investment.

On the basis of the stable version, Taro Next has recently been launched. The two versions are quite different, and this time we will evaluate them respectively.

Although kBONE framework has not been available for a long time, after all, it is an official release of wechat, and many people follow it, so Kbone will be included in the evaluation target this time.

So, the subjects of this review (in order of date of publication) :

  • Wechat native development
  • Taro, produced by JINGdong Bump Laboratory, website address: taro.jd.com/
  • Uni-app, produced by DCloud, website address: uniapp.dcloud.net.cn
  • Kbone, tencent WeChat team produced, website address: wechat – miniprogram. Making. IO/kbone/docs /

In addition to the measured data such as performance, this evaluation will collect data openly through the framework website and github, Qiudong, Tencent Classroom and other three communities as far as possible, hoping to give you a comprehensive evaluation basis.

Function implementation

Taro and Uni-app are typical multi-end frameworks that can be published to each end. Kbone only supports wechat mini programs and H5.

Both Taro and UNI-APP encapsulate common interfaces and components into cross-end apis and cross-end components. The component specifications follow the specifications of wechat small programs, and some platform-specific apis. These two frameworks also have solutions:

  • Taro: Support mixing with small program code, can be mixed through the way to call the framework has not yet encapsulated small new API
  • Uni-app: Supports conditional compilation. In the conditional compilation code block, you can call the new APIS and components of each platform at will

Taro and Uni-app have unlimited access to all apis and components of each applet platform.

Kbone follows the web development habits, using HTML tags and JS API; When involving WeChat unique API, but through the process. The env. IsMiniprogram judgment environment, then write WeChat native code. For wechat built-in components (such as Swiper) that have no tags to replace in HTML, use the WX-Component tag or use the WX-prefix. Such built-in components can be wrapped in a layer of custom components, with corresponding performance overhead.

In addition to interfaces and components, we take wechat applet as an example to find several typical capabilities to compare framework support:

The framework taro uni-app kbone
Wechat custom component ⭕ ️ ⭕ ️ ⭕ ️
Tripartite plug-in ⭕ ️ ⭕ ️ ❌
The subcontract to load ⭕ ️ ⭕ ️ ⭕ ️
sitemap ⭕ ️ ⭕ ️ ⭕ ️
wxs ❌ ⭕ ️ ❌
Development of cloud ⭕ ️ ⭕ ️ ⭕ ️

Additional remarks:

  • If the original third-party components of small programs are referenced in the Taro project, the project will no longer have the ability of multi-end conversion. For example, if the third-party components of wechat small programs are used, the project can only be converted into wechat small programs, and the escape into other platforms will be invalid. See the official website of Taro for details
  • If uni-app uses wechat custom components, it can be compiled and distributed to app /H5/ wechat mini program /QQ mini program, please see the official website of Uni-app for details
  • Taro does not support WXS based on #2959
  • #58; #58; #58; #58; The basis for not supporting WXS: #129
  • Cloud development in wechat platform, all three frameworks support, but Taro/Kbone only support wechat small program platform, UNI-App supportApp/H5 / small programsAll platforms are developed using the cloud, as shown belowServerless/cloud developmentChapter.

WXS is an important tool to improve performance and experience. In addition to WXS of wechat small program, there are also SJS of Alipay and Filter of Baidu. These advanced technologies are fully supported by Uni-app. Reference: Enigmatic WXS, how can Uni-app use it to dramatically improve performance

From the above function comparison: wechat native ~ uni-app > Taro > kbone

Performance (wechat applet)

We continued with last year’s test model to see if the performance of each development framework improved over the course of the year. Details are as follows:

  • Development content: develop a copy of micro blog applet home complex long list, support pull down refresh, pull up page, like.

  • The interface is as follows:

  • Development version: a total of 5 versions have been developed, including wechat native version, Taro version, Uni-app version and Kbone version, which are installed by default through CLI according to the official website guidelines.

  • The current stable version of Taro is version 2.0, but recently the cross-framework Taro Next is being promoted, so we tested the data of two versions of Taro 2.0 and Taro Next simultaneously based on the same React code.

  • Test code open source (making warehouse address: https://github.com/dcloudio/test-framework), Tips: if you have any classmates think test code written inappropriate and welcome to submit PR or Issus

  • Test models: Redmi 6 Pro, MIUI 11.0.5 Stable Edition (latest edition), wechat 7.0.12 (latest edition)

  • Test environment: Before each framework starts testing, kill each App process and empty memory to ensure that the test machine environment is basically the same; Static data is read locally each time to mask network differences.

We took the example of the micro blog applets mentioned above to test two performance problems: long list loading and response of a large number of like components.

Long list loading

A twitter list is a list of many components. This complex list puts more pressure on performance and is good for performance testing.

Accurate timing is required from the time the pull-up load is triggered until the data is updated and the page is rendered. Human visual timing is definitely not good, we use the method of program burial point, and set the following timing:

  • Timing starts: interaction events are triggered, before frame assignments, such as at the start of the onReachBottom function
  • End timing: Page rendering is complete (start of wechat setData callback function)

Tips: The beginning of the setData callback function can be considered as the time when the page rendering is complete, because wechat setData is defined as follows (wechat specification) :

Test method: Start from the empty list on the page, automatically trigger the pull-up loading through the program, add 20 lists each time, record the single time; Calculate the average time it takes to pull up the page until the rendering is complete.

The test results are as follows:

Description: Article 400 weibo list, for example, starting from an empty list page, every 1 seconds to trigger a tensile load on the new article 20 (weibo), recording a single time consuming, trigger 20 times after stop (article 400 weibo page), calculate the 20 times the average time consuming, results WeChat native on this 20 times trigger pull – > render to complete an average time of 538 milliseconds, Uni-app is the fastest at 446 ms, while Kbone is the slowest at 4057 ms

You first look at this data, may be more confused, don’t worry, there are detailed instructions below

Explanation 1: Why taro Next/KBONE test data is incomplete?

Because Taro Next and Kbone use dynamic rendering scheme, such scheme will greatly increase the number of DOM nodes on the page when the page is complex and there are many components, and even exceed the limit of DOM nodes on wechat (the following alarm information). In our field test on Redmi 6 Pro, when the page components exceed 600, Taro Next and Kbone implement the imitation microblogging App will report abnormal operation and stop rendering (page white screen), so the two test frameworks have too many components, and the test data is incomplete. This means that when the page has too many components, you can’t use either framework.

dom limit exceeded please check if there’s any mistake you’ve made

In addition, kbone’s official website has the following introduction:

Kbone takes a performance toll in exchange for more comprehensive Web side feature support.

Therefore, the test data of Taro Next and Kbone are obviously not of the same magnitude as Taro 2.0 and UNI-app.

If your app is a long list scenario, taro Next and Kbone are obviously not appropriate.

Point 2: Why did the test data show that Uni-app performs slightly better than wechat’s native framework?

This problem was explained in last year’s assessment. To avoid confusion for new students, let me explain it again.

Wechat native framework time is mainly in the setData call, if the developer does not optimize alone, will pass a large amount of data each time; However, uni-app and Taro do diff calculation automatically before calling setData, passing only the changed data each time.

For example, if the current page has 20 pieces of data, when the pull-up load is triggered, 20 new pieces of data will be loaded, and when the native framework passes the following code test, setData will transfer 40 pieces of data

data: {
    listData: []
},
onReachBottom() {// Pull up loadletlistData = this.data.listData; listData.push(... Api.getNews()); // Add data to this.setdata ({listData}) // Send full data to view layer}Copy the code

Developers can use the native framework of wechat to optimize and streamline the transfer of data (only 20 changes of data are passed each time). For example, modify as follows:

data: {
    listData: []
},
onReachBottom() { // Pull up load
    // Get the index of the next render by length
    let index = this.data.listData.length;
    let newData = {}; // New change data
    Api.getNews().forEach((item) = > {
        newData['listData[' + (index++) + '] '] = item // Assign, index increments
    }) 
    this.setData(newData) // Incrementing the data and sending it to the view layer
}
Copy the code

After the above optimization and modification, the performance data of wechat native framework is as follows:

As can be seen from the test results:

  • After manual optimization by developers, wechat native framework can achieve better performance;
  • uni-appCompared to wechat native, performance is close, is an order of magnitude; And as the amount of data increases, the performance consumption does not increase significantly, from 438 to 454, only 16 milliseconds change
  • Taro 2.0As the data volume increases, the performance loss increases with the change of nearly 200 milliseconds from 595 to 790.
  • taro nextandkboneBy contrast, the gap is quite large.

This result is similar to web development, which has native JS development, VUE, react framework, etc. If you do not do special optimization, native JS write web pages, performance is often worse than vUE, react framework performance.

It is precisely because of the excellent Vue and React frameworks, good performance and good development experience that the use of native JS development has been gradually reduced.

Explanation 3: Why is this year’s performance test data different from last year’s?

Careful students will find that the same test phone, the same test code, why this year’s performance data will be much better than last year’s data?

  • Taro, Uni-App and wechat native, the data of the three frameworks have been greatly improved, when 400 records, at least 300 milliseconds of optimization
  • Uni-app and optimized wechat native, with the increase of data volume, the change of time consuming data is not obvious, but last year was a significant linear growth

In fact, through the data comparison of the original project of wechat, it can be concluded that in 2019, wechat has made a significant performance optimization for the small program running.

This should be good news for developers, as small applications can perform better and carry better user business.

Summary: wechat native development (manual optimization) ~ UNI-app > wechat native development (not manual optimization) ~ Taro 2.0 > Taro Next > kbone

Response speed of the like component

Does a component in the long list, such as the like component, change the unliked and liked status in a timely manner when clicked? It’s the benchmark for this test.

Test method:

  • Select a microblog and click the “Like” button to realize the switchover of “like” status (highlighted for “liked” and gray for “unliked”).
  • Thumb up buttononclickThe function starts to clock,setDataCallback functions start and end timing;

Averaged over a number of tests on a Redmi 6 Pro, here are the results:

Note: That is, when the number of lists is 400, the app developed by wechat, the “like” button needs 26 milliseconds to change from clicking to the state.

Data description of test results:

  • Taro Next/kBONE test data is incomplete due to the same reason as above. When there are too many components, the page is no longer rendered
  • Taro 2.0, Uni-App and wechat native have similar performance experience in the like component, but Taro Next and Kbone have a big performance gap, which is also due to the dynamic runtime framework.

Component data update performance evaluation: uni-app ~ taro 2.0 > Taro next > kbone

To sum up, this performance test has done two tests, long list loading and component status update. Based on the two experiments, the conclusions are as follows:

Wechat native development (manual optimization) ~ uni-app > wechat native development (not manual optimization) ~ Taro 2.0 > Taro next > kbone

Performance (Alipay applet)

This year, a new performance test based on Alipay applet was added. We also tested the long list loading and the response of the like component as described above.

Scenario 1: Long list loading

List a number of Taro 2.0 uni-app
200 1954 850
400 3155 1012
600 4284 1119
800 5278 1258
1000 6555 1452

Scenario 2: The like component responds

Number of components Taro 2.0 uni-app
200 38 33
400 34 45
600 37 37
800 40 39
1000 51 48

Tips:

  • Kbone does not support other mini programs, so this time only taro 2.0 and Uni-app performance data were tested.
  • Based on the implementation principle of Taro Next, the performance of Taro Next is much worse than that of Taro 2.0. Only data of Taro 2.0 is provided here (the measured data of wechat mini program in the previous chapter has also verified this inference).
  • Alipay applet for automated performance testing, please enable component2 compilation option in the project configuration

Through the above test data, the running performance of the small program in Alipay is uni-app > Taro 2.0

Across the side support

All three frameworks address the problem of platform isomorphism, where cross-end comparisons are necessary.

Taro and Uni-app are relatively mature and support all mainstream platforms. Kbone only supports wechat applet and Web side. Let’s focus on comparing Taro and uni-app.

Applet platform

Both Taro and UNI-app support wechat, Alipay, Baidu and Bytedance small programs with basic functions.

Both sides have many big factory cases. Taro has jingdong, Hara, Taopiao and other company mini program cases, uni-app has Tencent, Huawei, Vivo, Lenovo, Chinabr.com and other company mini program cases.

App platform

  • Ability to

Taro has a low degree of integration with wechat mini program engine, and many functions need to be developed native on iOS and Android respectively. For example, the App side is very common three-party login, payment, sharing and other capabilities, taro is not encapsulated.

Uni-app offers a wealth of capabilities at the base engine level, as well as a rich plug-in market that really makes developers more efficient.

  • performance

Taro uses react Native rendering engine on the App side. Although the UI of the rendering layer is native, its performance has been poor in terms of real-time interaction and UI operation with high response requirements. The communication loss between JS layer and view layer makes many developers feel weak.

The APP engine of UNI-App simultaneously provides developers with the choice of native rendering engine and small program engine, and provides RenderJS technology, and supports WXS, BindingX and other technologies, which solves the problem of communication loss between JS layer and view layer, and has better performance in the UI operation with high response requirements. Like this Canvas animation:

  • Development experience

Taro’s developers need to build their own iOS/Android development environment, which is quite complicated. (official text below)

If you haven’t worked with the Android development environment before, brace yourself for the fact that it’s a fairly tedious process. Read the following instructions carefully and perform configuration operations according to the document.

Uni-app allows front-end developers to build apps without relying on native engineers. Its development of small programs, can be smoother into commercially available apps.

The core appeal of cross-platform development is to improve efficiency. If the development of an App is completed by three groups of engineers, including front-end engineers, iOS engineers and Android engineers, the efficiency is actually very low.

In addition, uni-app provides the Uni Applet SDK, a tool that helps native apps quickly build their own applet platform. This is something no other framework provides.

H5 platform

Taro’s H5 platform has improved a lot over the past year, and its usability has improved dramatically. However, there is still no support for WXS and small program components compared to uni-App.

Fast application

Taro supports fast applications earlier than uni-app.

However, there are some changes in the development of fast app in 2020. Uni-app provides two solutions for releasing to fast app in response to the new situation (the current two versions are under community maintenance) :

  • Quickapp – VUE version: Develop fast applications using Vue. This solution is led by Xiaomi, but Huawei Kuaiapp.com does not support it.
  • Quickapp-light: Fast application (Light edition) based on small program architecture, see www.hellohub.cn. This solution is led by Huawei, but mi Kuai application does not support.

Straddle flexibility

Conditional compilation is indispensable for cross-side development. Because you can’t use unity to wipe out the unique features of each platform.

Good conditional compilation is critical to the flexibility of development on all sides, allowing developers to navigate between sharing and personalization.

Taro, Uni-app, and Kbone all support using the process. Env in JS code to determine the platform and then write platform-specific code.

Taro provides additional support for multi-end file encoding for uniform interfaces, as well as the use of IFDEF conditional compilation in style files.

Uni-app is fully conditionally compiled, directories, files, configurations, components, JS, CSS, everything can be conditionally compiled with IFDEF.

Conclusion: uni-app > Taro > kbone

Development experience

Taro, Uni-app, and Kbone all support CLI mode and can be developed in mainstream front-end tools, and they are basically equipped with d.ts syntax prompt library. The three frameworks all support vUE or React popular framework syntax, supporting the IDE tool chain is rich, coloring, verification, formatting perfect.

Compared with wechat native, the development experience of these three development frameworks is more excellent.

But in the dimension of development tools, the framework is uni-app, which is produced by Dcloud. IO, which is also produced by HBuilderX. HBuilderX has done many optimizations for Uni-app, such as code tips, go to definition, EasyCom, run debugging… Therefore, the development efficiency and ease of use of UNI-App are beyond other frameworks.

Development experience dimension, comparison results: Uni-app > Taro,kbone

Serverless/cloud development

Serverless is a hot concept, called the next generation of cloud technology, is really “cloud”.

Wechat took the lead in introducing Serverless technology into the field of small program development, namely cloud development, to help developers complete their business in the cloud. Subsequently, Alipay, Baidu online their own cloud development. According to wechat’s public data, there are already half a million developers using the wechat Cloud.

But there is a natural limitation to miniprogram manufacturer-led cloud development: it is too tightly tied to the platform and cannot share data with other platforms.

We take wechat cloud development as an example, if you only develop wechat small program, data exclusive existence of wechat platform, that is no problem; But if you also have App or other home small program, at this time the data of wechat small program is stored in the wechat platform, the data of other platforms is stored in the developer’s own server, at this time there is a data split. Suppose a user first uses a small program, and personal data is stored on the wechat platform; After the sticky upgrade to App, the App side can not read the data of the wechat platform at this time, then the user can not view the previous historical data on the small program, or even need to re-register in the App platform. This is not good for developers.

Therefore, the cross-end Serverless solution is the optimal solution for developers.

Current mainstream framework support for cloud development:

  • Taro: Only micro programs are supported. For details, see The Mini Program Cloud Development Template
  • Uni-app: DCloud, together with Ali Cloud and Tencent Cloud, provides a cloud development platform based on Serverless mode and JS programming, and supports all platforms of APP /H5/ miniprogram. See uniCloud for details
  • Kbone: Supports only wechat small programs, see Cloud Development for details

In the Serverless dimension, Uni-App is significantly ahead of other frameworks.

Plug-in market

In addition to the highly productive nature of the framework itself, the construction of a developer ecosystem is also crucial to the success of a development framework.

Uni-app took the lead in launching the plug-in market at the end of 2018, supporting front-end components, JS SDK, page templates, project templates, native plug-ins and other types, and providing appreciation, paid purchase and other means to stimulate the passion of wheel writers. At present, nearly 1500 plug-ins have been released on the market, and many plug-ins have been downloaded more than 10,000 times.

Taro was launched on the material market in May 2019, and 90 materials have been released on the market. According to the top charts, the number of downloads is not very large, with the largest number of downloads in the hundreds.

There is currently no plug-in market for Kbone.

Tips:

  • The data collection time of the number of plug-ins and downloads is 2020.04.03 16:00

Uni-app takes the lead in the plug-in market.

Learning resources

In addition to the frameworks’ official websites, developers often learn systematically through video tutorials, community blogs, etc.

The richness of relevant learning resources can also reflect the popularity of a framework, so we collected data from several three-party sites.

Video tutorial

The framework Tencent’s class Netease Cloud Classroom For class network
taro 4 1 2
uni-app 16 16 1

Tips:

  • Video tutorial data collection time is 2020.04.05 22:00

The development of communication

In addition to learning resources for beginners, communication during the development period is also very important. For this, we mainly look at the community and communication groups organized by the official organizations.

Community BBS

Uni-app question-and-answer community, posts rich, precipitation more; At present, it has precipitated more than 20,000 related posts, updated hundreds of posts every day, and uv million monthly.

For users who are used to using github issue feedback, uni-app also supports issues, with a total of 1391 issues.

In the early days, Taro managed product bugs based on Github issues. Up to now, there have been nearly 4,898 issues. After the launch of the developer community in May 2019, and the material market launch time is the same, currently precipitation of 1300+ posts, daily updates in about 10 posts, related data calculation method is as follows:

  • Total number of posts: Top selection of the Taro communityplate, calculate the total number of all topics under each section, as shown in the figure below.
  • Posts updated daily: Calculates the total number of posts that have been replied to or commented on within 24 hours, based on the last reply time in the post list

Kbone has added an official kbone framework section to the wechat open community. Due to the late launch of the product, there are only over 100 posts so far.

To summarize the community posts and issue data, the situation is as follows (collected at 2020.04.03 23:00) :

Communication group

The framework WeChat group QQ group Communication Group developers (estimated)
taro 16 – 8k
uni-app 20 40 + 90k
kbone – 1 0.5 k.

Tips:

  • Taro has 16 wechat groups, according to its official websiteTaro Development exchange 15 groups are fullIt can be inferred that each wechat group has 500 people, and the number of communication groups is 500*16 = 8000
  • There are 35 QQ groups on the official website of UNI-app, 20 wechat groups and more than a dozen special QQ groups, among which 30 QQ groups reach 2000 people. The number of communication groups: 30 * 2000 + 5* 1000 + 20*500 + 5000 = 90,000 people
  • Kbone has a QQ communication group on Github’s ReadMe, which shows 500 people are full when they apply to join

In addition to communication groups, DCloud has announced that the number of uni-app developers has reached one million. Taro and Kbone have not yet released such data.

Overall, the comparison results of the development communication dimensions are as follows: uni-app > Taro > kbone

Other indicators

github

The framework star contributors
taro 24.6 k. 122
uni-app 19.7 k. 72
kbone 2.7 k. 7

Taro has been very successful in attracting more developers to contribute code and documentation to the open source community.

Baidu index

Through index.baidu.com, you can view the search index of the mainstream framework, which represents the search volume of netizens and the collection of relevant articles. Currently, Kbone has not been included in Baidu index. The following is the recent comparison chart of Uni-app and Taro’s Baidu index:

conclusion

All reviews provide a basis for decision making, and the final outcome depends on the developer’s team technology stack, business demands, future plans, etc.

But to conclude this review article, we’d like to offer our own advice:

  • If you know React and don’t know Vue.js, recommend Taro.
  • Uni-app is recommended if you are familiar with vue.js;
  • If you already have H5 code, just want to add wechat small program platform, and the performance requirements are not high, you can consider kbone;
  • Uni-app is preferred if your business is multi-faceted;
  • Uni-app is recommended if you want to get your services online quickly using the Serverless solution.

Any reader who thinks any of the ratings in this article are distorted is welcome to report issuse here.