Preface: The following article was published in April 2019, and the 2020 review version is also available. Click on the latest review:
Cross-end development framework in-depth review of the 2020 edition

Last week, the Taro team published a comprehensive review of small program multiterminal frameworks to give developers a taste of the industry’s leading cross-terminal frameworks. Thanks to the TARO team.

However, it takes a lot of time to perfect this thing. Instead of just looking at the documentation, it requires:

  • Write test demos of multiple platforms and compare the functions and performance of each platform. Is their actual situation as advertised in the document?
  • Really learn about each framework, understand their learning curve, and get a feel for their documentation, tutorials, community ecology, and capabilities when you encounter problems in the real world.

Our uni-app team spent one week to complete this in-depth evaluation. Here we share the problems encountered in the actual development of test cases for different frameworks, and the final test results.

Introduction to evaluation experiments

  • Development content: to develop a complex long list of microblogging small program home page, support pull-down refresh, pull-up page turning, thumb up.
  • The interface is as follows:

  • Development Version: A total of 6 versions have been developed, including WeChat native version, WEPY version, MPVue version, Taro version, Uni-App version, and Chameleon version (sorted by the release time of these products, the same below), which are approved according to the guidance of the official websitecliInstall by default (should be the latest stable version).
  • The test code open source (making warehouse address: https://github.com/dcloudio/test-framework),

Tips: If you feel that the test code is not properly written, please submit PR orIssus

  • Test models: Redmi Redmi 6 Pro, MIUI 10.2.2.0 stable version (latest version), WeChat version 7.0.3 (latest version)
  • Test environment: Before each framework starts testing, kill each APP process and clear the memory to ensure that the test machine environment is basically the same; Each read from the local static data, shielding network differences.

  • Test dimension:

    1. What is the cross-end support?
    2. How about performance?
    3. To study the threshold
    4. Tools and surrounding ecology

1. What is the cross-end support

Developing once and running everywhere is every programmer’s dream. But reality tends to turn out to be a once-in-a-lifetime, mis-tuned experience.

Do the frameworks to be reviewed really need to be developed at once and released multiple times, as advertised?

We successively released the above imitated Weibo APP to each platform to verify the compatibility of each framework on each end. The results are as follows:

platform WeChat native wepy mpvue taro uni-app chameleon
WeChat applet ⭕ ️ ⭕ ️ ⭕ ️ ⭕ ️ ⭕ ️ ⭕ ️
Pay treasure small program ❌ ❌ ⭕ ️ ⭕ ️ ⭕ ️ ❌
Baidu applet ❌ ❌ ⭕ ️ ⭕ ️ ⭕ ️ ❌
Headline applet ❌ ❌ ⭕ ️ ⭕ ️ ⭕ ️ ❌
The H5 end ❌ ❌ ❌ Pull-up load/pull-down refresh is invalid ⭕ ️ Pull-up load/pull-down refresh is invalid
The App end ❌ ❌ ❌ Pull up load failure ⭕ ️ The list could not scroll and could not test pull-up load/pull-down refresh

Test results:

  • ⭕ indicates support and functioning, a “zero” indicates no support, and others indicate support but some bugs or compatibility issues
  • wepyVersion 2.0 claims to support other small programs, this test is based onwepyOfficial website guide to installwepy-cliThe default version is 1.7.3, which does not yet support multi-port
  • chameleonEarly adopter version of Alipay, Baidu small program, this test is based onchameleonOfficial website guide to installchameleon-toolThe default version is 0.1.1. Other applets are not yet supported

From this simple example, we can see the cross-end support evaluation conclusions: uni-app > Taro > Chameleon > MPVUE > WEPY, native WeChat applet

But only the above test is not comprehensive, the actual business is much more complex than this test case. But we couldn’t develop a lot of complex business to test, so we needed to add some information from each document. The documentation for each framework describes the level of cross-side support for various components and APIs. We went through the documentation of several companies, and found that they basically took the WeChat applet as the baseline, and then implemented various components and APIs at other ends:

  • taro: H5 terminal has implemented most of WeChat’s API, and APP terminal is quite different from WeChat.
  • uni-app: Component, API, configuration, most of which have been implemented in each end, some of which are not supported by individual API. It can be seen that UNI-App achieves relatively complete platform compatibility only by implementing a set of WeChat simulator in the H5 terminal and a set of WeChat small program engine in the APP terminal.
  • chameleonSome of the most commonly used components and APIs have been implemented on each side, with few platform differences. But many components and APIs require developers to write their own code for each platform.

Cross-end frameworks, on the one hand, should consider the common API cross-end support provided by the framework, and at the same time, should also consider how the different features of the different sides are compatible. After all, each end will have its own characteristics, can not be completely consistent.

  • taro: Provides JS environment variable judgment and a unified interface of the multi-terminal file, can be extended in components, JS, files, does not support other links of the sub-platform processing.
  • uni-app: Provides conditional compilation model, all the code including components, JS, CSS, configuration JSON, files, directories, all support conditional compilation, can not be limited to write different code.
  • chameleon: provides a polymorphic scheme, can be in components, JS, file extension multi-terminal, does not support other ways of sub-platform processing.

Cross-end framework, also involves a UI framework cross-end problem, the evaluation results are as follows:

  • taro: Yes, it’s officialtaro ui, support small program (WeChat/Alipay/Baidu), H5 platform, do not support APP,As shown in the
  • uni-app: Yes, it’s officialuni ui, can be all end operation; There’s also a plug-in market for uni-apps with a lot of three-way UI components,As shown in the
  • chameleon: Yes, it’s officialcml-uiExtended component library, can run all end, but the number of components is slightly less,As shown in the

Finally, add the cross-end case:

  • Mpvue: WeChat terminal cases are abundant, no other terminal cases have been seen
  • Taro: WeChat terminal is rich in cases, Baidu, Alipay, H5 terminal also has a small number of cases
  • Uni-App: There are a lot of cases on WeChat, APP and H5 terminals, and the official examples have been released to 6 terminals
  • Chameleon: I don’t see any side cases

Based on the above information, the final evaluation conclusion of this project is as follows: Uni-app > Taro > Chameleon > MPVUE > WEPY, native WeChat small program

There have been friends to set off a real straddle and false straddle dispute, through this Demo measured, this debate can be put to rest.

2. What is the performance of the cross-end framework

Cross-end frameworks are basically in Compiler + Runtime mode. Will the Runtime introduced degrade performance?

In particular, how the performance compares to native WeChat applet development is a general concern.

Again, we used the above microblogging applet as an example to test two performance problems: long list loading and the response of a large number of thumb up components.

2.1 Long list loading

A list that mimics a microblog is a list that contains many components. This kind of complex list puts more pressure on performance and is suitable for performance testing.

Accurate timing is required from trigger pull-up loading to data update and page rendering. Human visual timing is certainly not good, we use the way of program burial point, developed the following timing timing:

  • Timing starts when interactive events are triggered, before framework assignment, e.g., at the start of a pull up (onReachBottom) function
  • Timing end: page rendering finished (at the beginning of WeChat setData callback function)

Tips: The setData callback function starts with the time when the page is rendered, because WeChat setData is defined as follows (WeChat specification) :

field type mandatory describe
data Object is Change the data this time
callback Function no SetData caused an interface updateRender to completeAfter the callback function

Test method: start from the empty list on the page, automatically trigger the pull-up loading through the program, add 20 lists each time, and record the single time; Trigger pull-up loads for N times at fixed intervals, making the page reach a list of 20*N entries. Calculate the average time taken to complete the pull-up > rendering for N times.

The test results are as follows:

List a number of WeChat native wepy mpvue taro uni-app chameleon
200 770 625 969 752 641 1261
400 876 781 4493 974 741 1970
600 1111 – – 1250 910 2917
800 1406 – – 1547 1113 4040
1000 1690 – – 1878 1321 5196

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 876 milliseconds, The fastest uni-app is 741 ms and the slowest MPVUE is 4493 ms

If you look at this data for the first time, you may be confused, but don’t worry, there is a detailed explanation below

Description 1: Why is the MPVUE/WEPY test data incomplete?

At the beginning of MPVue and WEPY, WeChat applet did not support custom components and could not carry out component-based development. In order to solve this problem, MPVUE and WEPY compiled the VUE component written by users into a template in WXML, which realized component-oriented development ability in a way and improved code reusability. This was a great technical solution under the technical conditions at that time.

However, in such a scheme, a large number of DOM nodes will be added on pages with many complex components, even exceeding the limit of the number of DOM nodes of WeChat. We measured on Redmi 6 Pro and found that when there were more than 500 page components, the simulated Weibo APP implemented by MPVue and WEPY would report the following exceptions and stop rendering. Therefore, the test data of these two test frameworks was incomplete when there were more components. This means that both frameworks cannot be used when there are too many components on the page.

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

Tips:wepyThe reason why the performance is higher than the WeChat native framework below the 400 list is related to the custom component management overhead and business scenarios (wepyIt is compiled into a template, and does not involve component creation and management overhead). In the following case of microblog thumb up, when component data transfer is involved, the performance advantages of WeChat native framework are revealed, as shown in the test data below.

Note 2: Does uni-app perform better than the WeChat native framework? Playing god?

In fact, at 200 records (200 components) on the page, the Taro performance data is also better than the WeChat native framework.

The WeChat native framework spends most of its time on setData calls. If the developer does not optimize it separately, it will pass a large amount of data each time. While uni-app and taro all automatically do diff calculation before calling setData, passing only the data with changes each time.

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

Data: {listData: []}, onReachBottom() {// let listData = this.data.listData; listData.push(... Api.getNews()); SetData ({listData}) // Send data to view layer}

Developers using the WeChat native framework can optimize their own, simplify the transfer of data, such as the following changes:

Data: {listData: []}, onReachBottom () {/ / loading / / by length for the index of the next rendering index = this. Data. The listData. Length; let newData = {}; / / new change data Api. The getNews () forEach ((item) = > {newData [' listData [' + (index++) + '] '] = item / / assignment, }) this.setData(newData) // increment data, send data to view layer})

After the above optimization and modification, the performance data of the WeChat native framework was tested again and shown as follows:

Number of components WeChat native framework (before optimization) WeChat native framework (optimized) uni-app taro
200 770 572 641 752
400 876 688 741 974
600 1111 855 910 1250
800 1406 1055 1113 1547
1000 1690 1260 1321 1878

It can be seen from the test results that the WeChat native framework can achieve better performance after manual optimization by developers, but the performance gap between Uni-app and Taro and WeChat native is not that big.

The result is similar to web development, which has native JS development, Vue, the React framework, etc. Without special optimization, the performance of native JS web pages is often inferior to that of Vue and React frameworks.

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.

WeChat native development manually optimized, Uni-app > WeChat native development not manually optimized, Taro > Chameleon > WEPY > MPVUE

2.2 Response speed of thumb up component

Can a component in a long list, such as thumb up, be clicked to modify the unliked and liked status in a timely way? It’s the measurement point for this test.

Test method:

  • Select a microblog and click the “thumb up” button to switch the state of thumb up (highlighted with likes and gray without likes).
  • Thumb up buttononclickThe function starts timing,setDataCallback function starts and ends the timing;

Multiple tests were conducted on the Redmi 6 Pro and the average results were as follows:

List the number of WeChat native wepy mpvue taro uni-app chameleon
200 91 279 666 92 93 101
400 111 501 1507 125 107 145
600 144 – – 152 148 178
800 176 – – 214 181 236
1000 220 – – 229 234 272

Note: For WeChat native apps with 400 lists, it takes 111 milliseconds for the thumb up button to change from click to state.

Test result data description:

  • The Weby/MPVue test data is incomplete for the same reason as above. When there are more components, the page is no longer rendered
  • The data communication performance of the component is close to that of the WeChat native framework, but much higher than that of the WeChat native frameworktemplateImplement component development framework (WEPY/MPVUE) performance

Component data update performance measurement: WeChat native development, Uni-app, Taro > Chameleon > WEPY > MPVUE

To sum up, this performance test has carried out two tests, long list loading and component status update. Combined with two experiments, the conclusion is as follows:

WeChat native development manual optimization, Uni-App > WeChat native development not manual optimization, Taro > Chameleon >> WEPY > MPVUE

3. Learning thresholds

DSL syntax support

Mainstream cross-end frameworks basically follow React and Vue (Vue-like) syntax, whose main purpose is to reuse engineers’ existing technology stack and reduce learning costs. At this point, the cross-end framework’s support for the original framework (React/Vue) syntax is an important measure. If the support is low and the syntax is very different from the original framework, the developer will have to learn a new framework and the cost will be too high.

In the actual development, it is found that each multi-terminal framework does not fully implement all the syntax of Vue and React on the Web. Taro’s syntax support for JSX is relatively perfect, and its document describes the plan of future version.

More JSX syntax support. After 1.3, the only syntax that limits productivity is to create loop components in a map

Based on the Vue.js core, mpvue and uni-app framework are implemented in the small program by modifying the Runtime and Compiler of Vue.js, and support most of the Vue syntax. The uni-app was compiled to WeChat using MPVue, but the framework has been rewritten to support more Vue syntax such as filters, complex JavaScript expressions, etc.

Both wepy and chameleon are VUE like implementations, which only support part of VUE syntax, and need to learn their rules separately during development.

DSL syntax support evaluation: Taro, Uni-app > mpvue > wepy, Chameleon

Completion of learning materials

  • The completeness of official documents and search system:uni-appThe document content is rich, the sample demo is complete,taroSecond, several other frameworks are relatively weak.mpvueAlthough the document is small, but its concept is not complex, and there is no support for H5, APP, components, API documents can be directly read WeChat documents, the learning difficulty is also very low.
  • Tutorial aspects:uni-appOfficial video tutorials, many three – party professional training institutions also recordeduni-appTutorials, including Tencent’s own Next Academy, have also been recordeduni-appTraining video courses for public sale;mpvueThere are also three-way video tutorials for sale in Tencent Classroom;taroThere are no video tutorials, but the official Nuggets brochure is available;wepyandchameleonThere are no specialized courses.

Evaluation of the perfection of learning materials: Uni-app > MPVue, Taro > Chameleon > WEPY

Technical support and community activity

There will always be problems in development, and official technical support and community activity are important.

At present, Uni-App, Taro and Chameleon all have full-time staff to provide technical support. Uni-App has also introduced intelligent customer service robots separately due to the excessive communication group.

An active community means you have people to ask questions about, or people who have contributed to articles for you to search. Uni-App officially has more than 30 communication groups (many of which have groups of more than 1,000 people), and there are a large number of communication posts in its self-established forums. Taro and MPVue have nine WeChat groups of 500 people; WeChat on Weby’s website is no longer available. Chameleon was launched late and has a small user base. With the exception of uni-app, other frameworks do not have their own forum community.

During the development of this evaluation demo, our students (who also master Vue and React) really felt the learning threshold caused by the differences in grammar, learning materials and community when learning and studying various multi-end frameworks, and spit out a lot of channels.

Comprehensive evaluation, the conclusion of this evaluation: Uni-app > Taro > MPVUE > WEPY > Chameleon

Tips: This review ignores the learning thresholds of React and Vue frameworks themselves

4. Tools and surrounding ecology

tool

All multiterminal frameworks support the CLI pattern and can be developed in the mainstream front-end tools. Each framework basically comes with a library of d.ts syntax hints. Because mpvue, uni-app and taro directly support Vue and React syntax, the supporting IDE tool chain is rich, and the shading, validation and formatting are perfect. Chameleon recommends plug-ins for some editors, and wepy has some vscode plug-ins maintained by three parties.

In the tool-attribute dimension, the framework that is significantly higher is uni-app, which is also the company that produces HBuilder, dcloud. IO. The HBuilder/HBuilderX series is a homegrown development tool with 3 million developers. HBuilderX has done a lot of optimizations for the Uni-App, so the development efficiency and ease of use of the Uni-App are not comparable to other frameworks. Of course, for developers who are not used to HBuilderX, this advantage of uni-app is not realized.

The surrounding ecological

An underlying framework, its surrounding facilities are very important, such as UI library, JS library, project template.

  • WEPY: With a long history and many open source projects, it has certain advantages.
  • MPVue: It was released earlier and has accumulated more history.
  • Taro: The Taro UI is officially available, and there are some open source projects on GitHub.
  • Uni-App: It provides a plug-in market, rich UI library and surrounding templates
  • Chameleon: It hasn’t formed the surrounding ecology.

It is important to note that the plug-in ecology of Uni-App and MPVue is mutually interactive, both being Vue plug-ins. So the two sides also held a joint plug-in competition. The surrounding richness of this joint ecology is the richest among the current frameworks.

By the way, I would like to advertise that you are welcome to participate in the Uni-App/MPVue plug-in development competition and receive the iPhone XS Max and other rich prizes.

In summary, the tools and the surrounding ecological assessment conclusions: uni-app,mpvue > wepy > taro > chameleon

Other common metrics

Making star:

wepy mpvue taro uni-app chameleon
17136 16650 17078 4728 4287

GitHub Star: Weby > Taro > MPVue > Uni – App > Chameleon

Tips:

  • Star number acquisition time: 2019.03.31 21:30
  • The number of STAR is related to the time of product release as well as users’ usage habits. In addition touni-appOther frameworks are mainly GitHub’s Issus.uni-appDevelopers in generaluni-apptheQ&a communityIn the communication feedback, the page views of GitHub are low.

Baidu index

The Baidu index represents the number of searches by developers and the number of pages containing keywords. The following is the baidu index of each cross-end framework in the past 7 days:

Tips:

  • wepyNot included in the Baidu index, indicating that its search volume and the number of pages containing the keyword are not enough.
  • taroandchameleonThe name of is taken from an existing name, and the index that actually refers to the development framework should be lower.

case

Just look at the examples released to WeChat applet, comprehensive comparison of quantity and quality, WEPY > MPVUE > Taro, UNI-App > Chameleon

If you look at the multi-terminal case, comprehensive comparison, uni-app > taro > mpvue > wepy > chameleon

With the exception of the Uni-App, the other cross-end frameworks are produced by first-tier developers who use these frameworks for their internal projects and are battle-tested. At the same time, few other big developers are using such frameworks.

There is a problem of face, there is a problem of compatibility. Many developers build frameworks that can meet their own business needs, but after opening up to the outside world to meet all developers, they still need to put a lot of work to improve the product. Many developers are not in this main business and do not do so.

This is why many open source projects are called KPI projects.

To be fair, the team at Uni-App was surprised and impressed that Bump Lab had put so much effort into polishing Taro. The Chameleon team also made a big initial investment, but the launch time is still short, and if they can keep it going for a long time, it will be admirable. The Uni-App team itself is a professional developer service, with many cases, but most of them are entrepreneurs.

It can be said that the whole multi-terminal framework market is still in its infancy, before more developers can accept it, it needs the joint efforts of all framework authors.

Other Supplementary Notes

1. Supplementary notes on open source and APP

Some friends mentioned the lack of open source of UNI-APP in their evaluation. It should be noted that Uni-App is a front-end framework like other multi-terminal frameworks and is pure open source.

With the exception of uni-app, other frameworks either use EXPO (a encapsulation library based on React Native) or use Weex for the app side.

As anyone who has done this development knows, there are many differences between a native typography engine and a Web typography engine. Also, both React Native and Weex are renderers, and the ability part requires developers to write native code, which can’t be cross-ended. Expo encapsulates some capabilities more than React Native, but it also imposes new limitations.

The app side of the uni-app is a real applet engine, supplemented by the optional weex engine. This is why Uni-App offers better compatibility on the app side than other cross-end frameworks.

And this engine, another open source project called H5P, is partially open source.

There is no fully open source applet engine in the industry.

However, the license for the app side of Uni-App is completely free and you can use it with confidence.

In fact, you don’t have to wonder why dCloud has a small program engine, because the industry’s first small program was not WeChat, but dCloud.

On the App side, I could write a long professional review. In the future, the uni-app team will do another paper comparing the app terminal with frameworks such as React Native, Weex, Cordova and Flutter.

2. Conversions and mixes

Taro provides conversion of native applets to Taro projects, as well as support for embedding some pages written by Taro in native applets, which is a feature of Taro that other cross-end frameworks do not provide. This goes a long way toward lowering the barriers to entry.

conclusion

It is always experiments and data, not conclusions, that are real and objective. Developers with different needs can draw their own conclusions based on the above experimental data.

But as a complete review, we must also provide a summary, although it may involve our subjective feelings:

If you want to multitask, increase productivity, and avoid too many pitfalls, the Uni-app is better.

If you only develop small programs for WeChat, but not many, then using uni-app, WeChat native development, or TARO are better choices.

  • If you use WeChat native development, you need to be careful to manually write optimization code to controlsetdata
  • If you arereactB: Yes, then usetaro
  • If it isvueB: Yes, then useuni-app.uni-appIt has more advantages in performance, surrounding ecology and development efficiency

If you are mainly looking for WeChat and H5 terminals, then both Uni-app and Taro will work. You can choose according to the technology stack you are familiar with.

If you primarily need to cross the App side, the uni-app is more compatible, and the App side of other frameworks is vastly different. If you only care about apps and don’t care about applets and H5, then be sure to check out our follow-up review: in-depth comparisons between Uni-app and Cordova, React Native, and Flutter.

In addition to uni-apps and taro, mpvue is also a good choice if you’re looking primarily for small programs and don’t need complex components. After the release of MPVue 2.0 version, the search index has increased significantly, and we hope that it can continue to update and usher in a second boom.

Chameleon is relatively new and offers very few components and APIs, but its future plans are interesting to watch.

After this review was written, Xiaobian felt a little nervous.

On the one hand this evaluation is not too mild, easy to offend people. However, we believe that this kind of review will inspire all cross-end framework practitioners to invest more in improving the product, which is a great thing for the industry and for front-end developers.

On the other hand, while readers may think the uni-app is perfect at its current stage, we know that there is much to be desired. The UNI-App team will continue to devote their efforts to the benefit of front-end developers in China!

Readers who find any of the measurements in this article distorted are welcome to report them hereissues.