WeGeek | WePY open source framework

The geek who came to the column today is the Tencent WeChat payment team.

One month after the mini-program public beta, the WeChat payment team open-sourced the component development framework WePY on the mini-program, which was sought after by many developers as soon as it was published on Github. Relevant dry goods spontaneously shared by netizens.

Although the WePY open source framework is now highly respected, recalling the original intention of open source, Gcaufy from the WeChat payment team said: "WePY open source framework is not to open source to share a very successful solution, but I think this set of solutions Can solve some practical problems encountered in the development of small programs, and hope to help the outside world to help improve this solution together. "

Next, let's take a look at the development story behind the WePY open source framework.

If you have some development experience, you will obviously feel that the development of applets is very easy to get started-the applets themselves provide some features such as modularity, templates, data binding, etc., which greatly facilitates users who are used to using the MVVM framework. But at the same time, due to the limited operating environment, small programs cannot yet use popular frameworks on the market.

In the course of several months of development, the author Gcaufy has been hoping to design a set of plans, which is more likely to make small program development closer to the current development habits, and the WePY open source framework came into being.

The principle of the WePY open source framework is very simple: after the code developed by the WePY open source framework is compiled, it can generate a code that runs perfectly on the small program side, making the small program development closer to the traditional H5 framework development, which can be supported like the development of H5. Introduce the npm package, and support component development and support for JS new features, etc., to achieve a Vue-like development experience.

WePY open source framework to achieve pre-loading of small programs

We know that traditional H5 can improve user experience through pre-loading, so can small programs be implemented?

The answer is yes. Using preloading in applets is simpler and more convenient to implement than in H5, but it is also easier to be ignored by developers.

When traditional H5 starts, page1.html will only load the page and logic code of page1.html. When page1.html jumps to page2.html, all the Javascript data of page1 will disappear from the memory. Data communication between page1 and page2 can only be passed through URL parameters or browser cookies, localStorge storage processing.

When the applet starts, it will directly load all page logic code into memory. Even if page2 may not be used, when page1 jumps to page2, the logic code Javascript data of page1 will not disappear from the memory. Page2 can even directly access the data in page1.

This difference in mechanism of applets happens to preload better.

Normally, we are used to writing data in the onLoad event. But page1 of the applet jumps to page2, there is a delay of 300ms ~ 400ms to the onLoad of page2. As shown below:

Because of the characteristics of the applet, you can get the data in page1 in advance, and then use it directly in page2, so you can avoid the 300ms ~ 400ms of redirecting. As shown below:

For the above problems, WePY open source framework encapsulates two concepts to solve:

• Preload data

Used in small programs to actively transfer data to page2. For example, page2 needs to load a long time-consuming data. I can load it when page1 is idle, and use it directly when I enter page2.

• Pre-query data

Used to avoid delay in redirecting, call page2 pre-query when jumping.

The WePY open source framework adds the onPrefetch event, which will be actively called when redirected. This improvement extends the life cycle; at the same time, the onLoad event also adds a parameter for receiving preloaded or pre-queried data:

// params
// data.from: 来源页面，page1
// data.prefetch: 预查询数据
// data.preload: 预加载数据
onLoad (params, data) {}

WePY open source framework to achieve data optimization of small programs

Some developers may not understand it. In fact, the view layer and logic layer of the applet are completely separated. The communication between the two depends on WeixinJSBridge. Such as:

• The developer tool is based on window.postMessage
• iOS 中基于 window.webkit.messageHandlers.invokeHandler.postMessage
• Based on WeixinJSCore.invokeHandler in Android

The data binding method this.setData () is also the same, so it is easy to think, will frequent data binding cause the communication cost to increase greatly?

In order to verify the performance problems of setData (), the WeChat payment team made a related test: dynamically bind a list of 1000 data for performance testing, mainly for the following three situations:

• Optimal binding: The setData () operation is finally executed after adding in memory.
• Worst binding: perform a setData () operation when adding a record.
• The most intelligent binding: no matter what operation is performed in the middle, a dirty check is performed at the end of the run, and the setData () operation is performed on the data that needs to be set.

After ten refresh and running tests, the following results were obtained:

It can be clearly seen from the test results that the performance data is about 40 times different when implementing the same logic. By analyzing the test results, we can know that during the development process, we should try to avoid multiple setData () operations in the same process.

So what are the optimization methods?

Manual maintenance can certainly be achieved, but when the page logic is responsible, even if a lot of effort is spent on maintenance, it may not necessarily ensure that setData () only exists once per process, and the maintainability is not high. Therefore, the WePY open source framework chose to use dirty checking for data binding optimization.

Although the WePY open source framework borrows Vue from its syntax, the principles are completely different. For example, the WePY open source framework uses ng's dirty check design instead of Vue's getters and setters. Users no longer have to worry about how many times the data has been modified in the process, only need to do a dirty check at the end of the process, and execute setData () as needed.

Improvement of development efficiency using WePY open source framework

In addition to the above optimizations based on performance, the WePY open source framework has also made a series of optimizations in development efficiency.

Support rich compiler

• js can choose to compile with Babel or TypeScript.
• Wxml can choose to use Pug (formerly Jade).
• wxss can choose to use Less, Sass, Styus.

Support rich plug-in processing

• You can configure the plug-in to compress and obfuscate the generated js, compress pictures, compress wxml and json to save space, and so on.

Support ESLint syntax check

• Adding a line of configuration can support ESLint syntax checking, which can avoid low-level syntax errors and unify the style of project code.

Life cycle optimization

• The WePY open source framework adds the onRoute life cycle. Used to trigger after a page jump. This optimization is because there is no page jump event in the applet. The onShow event can be used as a page jump event, but it also has a negative effect, such as pressing the HOME button to switch back, or pulling up to cancel after payment, and pulling up after sharing will trigger the onShow event.

Optimize event transmission

The original writing method of reference:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.target.dataset.alphabeta === 2 // 大写会转为小写
  }
})

Optimized:

<view @tap="bindViewTap("1", "2")"> DataSet Test </view>
methods: {
  bindViewTap(p1, p2, event) {
    p1 === "1";
    p2 === "2";
  }
}

More details can be found in WePY open source framework document: HTTPS: //tencent.github.io/wep ... .

WePY open source framework 2.0 plan

At present, the WePY open source framework is mainly maintained by relevant people in the WeChat payment team in their spare time with several external contributors. There are many enthusiastic contributors in the technical community. Not only do they participate, but they also bring in some new contributor strengths, and from time to time provide some more core functions.

When asked about the "WePY open source framework 2.0 progress" question, the WeChat payment team said it will now enter the WePY 2.0 internal testing phase, and I believe that we will meet with you in the near future.

"Hope 2.0 is a brand new and worthy developer version."

To learn more about the development of small programs, welcome WeChat to scan the QR code below to follow the WeChat Geek WeGeek public account, and build a WeChat ecosystem.

This article is reproduced in: Ape 2048 WeGeek | WePY open source framework