Native development of small programs has a number of points:

  1. Native WXML development has poor Node, precompiler, and Webpack support, affecting development efficiency and engineering build process. So big companies use frameworks for development
  2. The syntax defined by wechat, such as WXML, WXS, and WX :if, is too private. As is learning vUE, learned the full end of the general, rather than just wechat small program
  3. There are so many peripheral tools in the Vue ecosystem to improve development efficiency, such as ides, validators, tripartite libraries… Wechat’s developer tools are hard to use compared to professional editors, and there are few personalization Settings

As a front-end engineer, in addition to wechat small programs, we also need to develop Web, other small programs and even App. People don’t like to switch development tools and change the way of thinking in grammar back and forth.

Uni-app naturally addresses these issues, but developers often have concerns:

  1. I am afraid that some functions in wechat mini program cannot be realized after using UNI-App, and will be subject to the update of UNI-App
  2. Not as good as native WXML
  3. Afraid of immature frame, jump into the pit
  4. Worried about the imperfection of the community ecology

This paper analyzes and compares the functions, performance, learning threshold, development experience, ecology, scalability and other dimensions that developers care about, and gives explanations.

1. Function realization

The most common question developers ask: What if the applets iterate and add a bunch of apis, but the Uni-App framework isn’t updated in time?

This is a misunderstanding, uni-app does not limit the underlying API calls; On the small program side, UNI-App supports the direct writing of wechat native code.

Compared to traditional Web development, frameworks such as Vue and React are immature if they make it impossible for developers to manipulate all the apis provided by browsers. The same goes for small program development. All the native code provided by wechat can be called in the UNI-App framework.

Therefore, if there are some apis (platform-specific or new apis) that are not packaged in UNI-App, developers can directly write wechat native API, namely WX, in UNI-App. Various apis at the beginning.

For example, uni-App does not yet have a cross-platform advertising (AD) component, but developers can still use wechat < AD > to display ads on the mini app side, as shown in the following code:

 <view>
    <view class="title""> < p style=" max-width: 100%; clear: both; min-height: 1em"min-height: 50px;"> <! Uni-app is not packaged yet, but you can directly use the wechat native AD component --> < AD unit-id="adunit-01b7axxxbf53d74e"></ad>
    </view>
    <view class="title"< p style= "max-width: 100%; clear: both; min-height: 1em"min-height: 50px;"> <! Uni-app is not packaged yet, but you can directly use the wechat native AD component --> < AD unit-id="adunit-9f340xxx64533" ad-type="video" ad-theme="white"></ad>
    </view>
</view>
Copy the code

The running effect of small program side is as follows:

Complex uses such as wechat applets custom components, WXS and cloud development are also fully supported in UNI-App.

So, the conclusion is that development using the UNI-App framework is functionally the same as native applets, without any limitations.

2. Performance experience

The second question developers often ask is: Do tripartite frameworks, most of which have layers of encapsulation inside them, increase runtime load and lead to performance degradation?

Uni-app does not lead to performance downloads and is even automatically optimized for many aspects. In many cases, the performance experience is better than wechat native development.

Similar web development using vue.js will not result in worse performance than native JS, but due to the use of virtual DOM and differential update technology, in most scenarios, the performance is better than developers writing code to manipulate the DOM manually.

Small programs need to frequently write setData code to update data, here is very important is the difference data update. If you don’t do differentials, the code will not perform well, and if every logic determines the difference data updates, the code will be too cumbersome to write.

With UNI-app, the underlying automatic differential data update is simple and high performance.

We elaborate from two dimensions of optimization theory and measured data.

2.1 Theory: Framework optimization scheme

In order to improve performance experience, applets do a lot of work from the level of architecture design:

  • Logical layer and view layer are separated to avoid JS operation blocking view rendering
  • Define component tags (WXML) separately to reduce DOM complexity
  • Compact style (WXSS) for improved rendering performance
  • Complex component biogenesis (video/ Map, etc.) to solve the function/experience loss of Web components

Through these specification constraints, the overall performance experience of small programs is greatly improved, but there are still many performance pits, among which setData is the most frequent and common.

Here is a brief introduction to the working principle behind setData, citing the official description of wechat:

The view layer of the applet currently uses WebView as the rendering carrier, while the logic layer uses a separate JavascriptCore as the runtime environment. In terms of architecture, WebView and JavascriptCore are independent modules and do not have channels for direct data sharing. Currently, data transfer between the view layer and the logical layer is actually implemented through evaluateJavascript provided on both sides.

To simplify development, wechat encapsulated the evaluateJavascript call into the setData JS method to achieve data transmission between the view layer and the logic layer. The data flow diagram is as follows:

The execution of setData will be affected by many factors. If setData is transferred too much or is frequently called (see official introduction on wechat), performance experience problems may occur.

Fortunately, UNI-App is optimized for both.

2.1.1 Reduce the amount of data transmitted by setData

Assuming that the current page has a list (initial value is A, B, C, D), now we need to append 4 new list items (E, F, G, H) to the list, we write the code in wechat native mode and UNI-app mode respectively.

Applets native code:

page({
    data:{
        list:['a'.'b'.'c'.'d']
    },
    change:function() {let newData = ['e'.'f'.'g'.'h']; this.data.list.push(... newData); this.setData({ list:this.data.list }) } })Copy the code

As mentioned in the wechat native code, when the change method is executed, all 8 list items a, B, C, D, E, F, G and Hin the list will be transmitted through setData.

Uni – app code:

export default{
    data() {return {
            list:['a'.'b'.'c'.'d']
        }
    },
    methods:{
        change:function() {let newData = ['e'.'f'.'g'.'h']; this.list.push(... newData) } } }Copy the code

As shown in the uni-app code above, only e, F, G and H4 newly added list items in the list will be transmitted when the change method is executed, realizing the extremely simplified transmission amount of setData.

Uni-app draws on the WeStore JSON Diff library. Before calling setData, it compares historical data to accurately and efficiently calculate the difference data with changes, and then calls setData to transmit only the changed data, so as to minimize the amount of data transmitted by setData. Greatly improve communication performance.

Tips: Maybe some students are interested in passing data froma,b,c,d,e,f,g,h8 list items are optimized toe,f,g,hFour list items, not impressed, but we warn you not to underestimate this mechanism, the above is just a demo.

  • In a real list scenario, each list item might contain a thumbnail, title, summary, time, etc., and the data of each list item would be larger (let’s say 1K).
  • Assume that the current page has 20 list items. After four consecutive pull-ups, the page has 100 records. If you pull up again and the page has 120 records, the situation will be different
  • The above wechat native way, 120 records of data (120K) all transmitted in the past
  • Uni-app transfers only 20 new records (101-120) (20K), which is 1/6 of the original data.
  • When the page has 200 records, the amount of data transferred by UNI-App becomes 1/10 of the amount of data transferred by wechat’s native data!

2.1.2 Reduce the call frequency of setData

Suppose we need to change the value of multiple variables, we write the code in wechat native mode and UNI-app mode respectively.

Applets native code:

change:function(){
    this.setData({a:1});
    this.setData({b:2});
    this.setData({c:3});
    this.setData({d:4});
}
Copy the code

The above four calls to setData will result in four logical layer and view layer data communications

Uni – app code:

change:function(){
    this.a = 1;
    this.b = 2;
    this.c = 3;
    this.d = 4;
}
Copy the code

As mentioned above, the code of UNI-app will be merged into {” A “:1,” B “:2,” C “:3,” D “:4} one piece of data, and then setData will be called only once to complete all data transmission, greatly reducing the call frequency of setData.

Uni-app has this advantage due to its deep customization implementation based on the Vue Runtime and the nextTick mechanism of Vue.

2.2 Measurement: performance comparison data

With the above theoretical analysis, we then carried out real machine measurement and compared with the data.

The test model is as follows:

  • Development content: develop a complex long list of the front page of micro blog mini program, supporting pull down to refresh, pull up to turn the page, like. A list that mimics twitter is a list that contains many components. This complex list puts more pressure on performance and is good for performance testing.

  • The interface is as follows:

  • Development version: Use wechat native and UNI-app to develop two sets of code respectively. Uni-app is installed in CLI mode by default.

  • Test code open source (Github repository: https://github.com/dcloudio/test-framework), Tips: if you have any classmates think test code written inappropriate and welcome to submit PR or Issus, under this project and other frameworks test code, developers can be ignored

  • Test models: Redmi 6 Pro, MIUI 10.2.2.0 Stable version (latest version), wechat 7.0.3 (latest version)

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

Accurate timing is required from trigger pull-up loading to data update and page rendering completion. Human visual timing is definitely not good, so we adopt the method of burying the program and develop the following timing:

  • Timing start time: before an interactive event is triggered and a frame is assigned, such as the start of an onReachBottom function
  • Timing end: page rendering complete (wechat setData callback function start)

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

field type mandatory describe
data Object is The data to change this time
callback Function no Interface update caused by setDataRender to completeAfter the callback function

Test method: Starting from the empty list of the page, the program automatically triggers the pull-up loading, and 20 lists are added each time to record the single time consumption. When N pull-up loads are triggered continuously at a fixed interval, so that the page reaches 20*N lists, calculate the average time between these N pull-up loads and the completion of rendering.

The test results are as follows:

List a number of WeChat native uni-app
200 770 641
400 876 741
600 1111 910
800 1406 1113
1000 1690 1321

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, Uni-app is 741 milliseconds.

Contrary to many people’s intuition, uni-App performs even better than wechat native!

There is no doubt that this is the result of the optimization scheme to reduce the amount of data transmitted by setData in the above theoretical analysis chapter. Wechat native transmits the full amount of data each time, while UNI-app automatically performs diff calculation before calling setData and only transmits the changed data each time.

Developers using the wechat native framework can completely optimize and simplify the transmission of data by themselves, such as modifying the following:

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 value, index increment
    }) 
    this.setData(newData) // Delta data, send data to the view layer
}
Copy the code

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

Number of components Wechat native Framework (before optimization) Wechat native Framework (after optimization) uni-app
200 770 572 641
400 876 688 741
600 1111 855 910
800 1406 1055 1113
1000 1690 1260 1321

As can be seen from the test results, after manual optimization by the developers, the wechat native framework can achieve better performance, but the performance gap between UNI-App and wechat native is not big.

However, native development requires developers to be familiar with small program communication mechanism, consciously to write code, simplify data; Uni-app automatic processing, naturally is more worry.

The result is similar to Web development, which also has native JS development, vUE, react frameworks, and so on. Without special optimization, web pages written with native JS often perform worse than the Vue and React frameworks.

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

Through the theoretical analysis and data measurement of performance optimization in this chapter, we can output the following conclusions:

  • Uni-app does not increase applets’ running load and does not drag down performance
  • Uni-app automatically handles many performance tuning points, making it friendlier and less stressful for developers who are unfamiliar with performance tuning or applets architecture

3. Community ecology

3.1 Peripheral Wheels

Applets are built out of the web ecosystem, and many web ecosystems don’t use wheels.

Wechat mini programs still have surrounding ecology, while the ecology of other small program platforms has not been established.

Uni-app has a rich ecosystem around it. There are nearly 800 plug-ins in the plug-in market. See ext.dcloud.net.cn for details.

Uni-app is compatible with the mini-app ecosystem, allowing you to import and use custom components directly. Based on this, the uni-App plug-in market has more VUE components that can be used across multiple ends at the same time with excellent performance.

This makes uni-App’s ecosystem the richest for applets.

For rich text parsing, charts and other components, uni-App’s plug-ins outperform wXParse, WX-Echart and other wechat applets.

If developers need rich and high performance components, they should use UNI-App rather than native applets.

3.2 Active QQ/ wechat groups and forums

Uni-app officially has 70 developer QQ/ wechat communication groups (mostly 2,000 people, nearly 100,000 developers), and more third party groups.

Q&a community with hundreds of posts a day. The degree of activity is the same as wechat mini program official forum, far more than other mini program official forum.

Uni-app training is active among the three parties. Tencent Classroom officials have created courses for UNI-App. Free or paid uni-App training videos can be found everywhere on various training websites.

4. Learning threshold and development experience

First of all, wechat’s native development syntax, like React and Vue, is a bit nonsensically different. For developers, it is like learning a new syntax, which greatly increases the learning cost, which has been criticized by everyone.

Uni-app is more developer-friendly, simply vue syntax + applets API.

It follows the vue.js syntax specification, and the components and apis follow the wechat applets naming. These belong to the common technology stack, and learning them is a necessary skill for the front end. Uni-app does not cost much extra to learn.

Uni-app can be quickly picked up by developers with some experience in vue. js and wechat applets.

Students who have not learned VUE do not need to master all of vUE. They only need to understand basic syntax, data binding, list rendering, components, etc. Others such as routing, Loader, CLI, Node.js, webpack are not required to learn.

Because the HBuilderX tool with Uni-App eliminates terminal development, uni-App visually creates projects, visually installs components, and extends compilers, the learning threshold for Uni-App is lower than vue.js for Web development.

In terms of development experience, there is a big gap between wechat native development and UNI-App, mainly reflected in the following aspects:

  • More componentized development: Component development in Vue is a much better experience than custom component development in applets
  • Application state management: UNI-app supports VUEX
  • Use CSS preprocessors such as Sass
  • Full ES Next syntax support
  • Customize the build policy

Development tool dimension, the gap is larger:

  • Wechat developer tools have been ridiculed countless
  • uni-appThe company that produced HBuilder,DCloud.io. The HBuilder/HBuilderX series are four major front-end development tools (comparableBaidu index), it isuni-appDid a lot of optimization, souni-appThe development efficiency and ease of use can not be reached by wechat native development.

Here’s the takeaway: If you need engineering capabilities, forget about wechat native development.

5. Future scalability

Although the current product is only required to be published to wechat mini program, but if one day, the boss and a monk from outside have coffee, turn around and ask to cover ali, Baidu, Bytedance and other mini program platforms, what should programmers do?

Is it true that bricks are moved everywhere on every platform?

Uni-ap cross-terminal functionality will become a self-saving tool for programmers. Applets developed based on UNI-App can be distributed to multiple applets, even apps and H5 platforms, without modification. It’s not a dream, it’s a reality. You can scan the following 8 QR codes in turn to experience the most comprehensive cross-platform effect! .

6. Conclusion

uni-app WeChat
function The same The same
performance Conventional scenarios are better You need to write complex code yourself to improve performance
Community ecology Rich, more high-performance components rich
Development experience Pure VUE experience, efficient and unified; Strong engineering capability Privatization of grammar; Weak engineering ability
Multiterminal ability At the same time support H5, many small programs, cross-platform App Can only be used for wechat applets

Conclusion: Uni-app should also be used when developing only wechat applets