Zhu Zhan: Tencent cloud small program solution

Welcome toTencent Cloud + community, get more Tencent mass technology practice dry goods oh ~

Good afternoon everyone, today I bring you the theme of Tencent cloud small program solutions. First of all, I would like to introduce myself. My name is Zhu Zhan. I come from Tencent Cloud.

Do a field survey before you start. Raise your hand. How many of you have experience developing applets? Thank you very much! A little bit more than I thought. How many of you have used applets? I’m sure you’ve all used it.

Why do you say that we have used wechat small program? From March 2017 to November 2017, the growth trend was relatively stable, with tens of millions of dollars. In December 2017, there was a sharp increase. That point was the release of small games, that is, the time to jump to become national games, everyone tried to top the list. After this hot spot, its daily activity did not appear a cliff type decline, or to maintain a very high level, the current daily activity is probably like this. This is the background for our salon today.

Applets architecture

Speak before we WeChat applet solutions, still want to tell me the architecture of the small program itself, we do mobile development generally has two modes, the first is a web application, also is the native applications, these two kinds of model and hybrid development mode, their features are very sharp, such as web applications, do not need to install, it is convenient to share and transmissibility is better. Native applications generally need to be installed, and the size of the installation package varies from tens of megabytes to hundreds of megabytes are normal.

In terms of development, Web applications are free of installation, while native applications need professional development to be installed, which requires relatively high developer skills. Native applications have high requirements for developers, so they can make full use of the capabilities of our terminals. The great advantage is that user experience will be better. Small program is a combination of the advantages of the two development modes, the first is free of installation, a user to wechat inside open small program, run out, do not have to do what installation action.

At the same time, its development mode is also a kind of Web mode, its front end and our H5 front end is very similar, with JS development costs will be much simpler. The user experience is comparable to native apps, which we’ll look at later. The most important point is that the small program is based on wechat platform, it will enjoy the convenience brought by wechat, it has cross-platform development ability. Although our H5 applications generally have cross-platform capability, H5 is based on the development of Web standards. Students with development experience know that our business standards are a long process, and the ideal is beautiful, but the reality is dull. But small programs do not have this problem, wechat is a natural social software, its dissemination and shareable meaning is very good. We can open a small program through wechat scan, can share a small program through group chat, such as the recent popular play a play small program, in fact, it has a high degree of dissemination.

Applets basic architecture and user experience

Let’s take a look at the bottom layer of the applet and its user experience. This diagram is the basic architecture of the applet. Its upper layer is divided into two parts, one is the view layer, also known as Webviews, and the other is the thread, logic layer, also known as appService. In traditional Web rendering, if there is complex processing in the logic, the interface tends to lag. Applets don’t have this problem, and if you don’t call something rendered, it won’t cause your interface to lose fluency. Because they run in different threads, the two layers can not directly interact, must be through some means, such as an intermediate layer to interact, its basic function is to connect THE JS operating environment and the underlying system, system ability can realize JS and native ability call each other, the two layers on both sides communicate with each other, After triggering an event, users will respond to Serverless. If they want to update a certain content of the interface, wechat API will be displayed in the form of invocation.

This picture is to introduce small programs apply colours to a drawing of a figure, compile packaging stage, when we write a small program can write a class WXML, contains a WCC compiler tools, users at the time of running the applet, the incoming data and your logic layer do a compilation, rendering into the interface, which is one of the most simple local update process.

This is a small program to load several simple sketch, small program in the mobile loading, to pull a small program on CDN bag, small program in the mobile architecture may have a wait time, when the installation package to the local cache, next time again open directly read from the cache to install the contents of the package, if there is a new version, Instead of waiting for a new version of the APP to be updated before opening the APP, you simply use a layer of cached apps and replace them with a new installation package when you start again.

The difference between cold and hot loading

Hot loading is what we implemented at the system level after the applets came out, and the threads running the applets are running in the background, not being destroyed, and it takes about 5 minutes or so. During this time, when you access the applet, you move directly from the background to the foreground at a relatively low cost.

Applet also provides a Webview preloading performance, in addition to the current view of the Webview, you can also see a new Webview in the background, when you switch, because the Webview initialization time is relatively expensive performance, in the applet level, if you want to achieve a smoother experience, You need to do some pre-processing.

Problems applets developers face on the server side

In addition to the guarantee of small program fluency, small program also provides some native components, have H5 development experience all know, sometimes write a long list and H5 application, and some native application contrast is very obvious, H5 table sliding, especially for some old Android system feeling is very obvious. Since the experience wasn’t up to my standards, I replaced the Web component with a native one.

Why are applets so fast? I mentioned installation package caching, subcontracting loading. Small program solution evolution process, small program is a new innovation of the client side, I guess small program developers are mostly web front-end, or terminal developers, they may be a little short of small program server.

In summary, applets face some problems on the server side, such as having to deal with a lot of non-business logic. For example, if you’re dealing with a user login, how do you save the session in the applet? What is your agreement with the client? You also have to understand the server application knowledge, your server how to match, your server how to expand, my small program explosion how to do? For some developers with development experience is not a problem, for more client development students, these are very tricky problems, to understand the whole system. Take login as an example. The following picture is the login flow chart provided by wechat official. It looks a little complicated. Some of the difficulties in this diagram are here. When wechat is logged in, and when the small program is initiated, it goes to the server. How to do the protocol of the session? How to store on the server side? Where does wechat provide an APP? There are users need to save, if you save it will bring security problems, with wechat recommended scheme, you have to deal with yourself.

The second scenario is Websocket channel service, the development cost is high; Stability is difficult to ensure; All kinds of exceptions need to be considered, high coupling with business.

Wafer Solution

For these situations, we launched a solution called Wafer in 2016. Take the session scenario just now as an example, our session server called Wafer encapsulates complex logic, gives consideration to security and convenience, and only focuses on the few interfaces we provide. Our session server, which also supports independence, can easily do a horizontal extension.

For the Websocket mentioned earlier, a channel server is proposed, which is a PAAS level application, providing each developer with a unique access address for the developer to use in the program, applets and credit servers, access to the Websocket, and then to the business server.

To sum up, there are these points: no need to develop with SDK, direct use; The platform provides stability and performance assurance; Automatic realization of disconnection reconnection; Independent credit servers, message handlers.

Wafer architecture

This was the wafer of an architecture diagram, because we wafer1 was put forward, aimed at corporate customers, compared to the safety of extensibility, a lot of work has been done in this aspect, we bring up single channel server, this scheme is now looks a little problem, especially in WeChat open, when a small program to develop personal after registration, Problems emerge, such as the architecture being unprofessional, each node needing load balancing, and certificates needing to be handled themselves. Wafer’s server needs to be managed by each developer, and the code needs to be deployed by itself.

In view of the shortcomings of WAFer1, we proposed wafer2 solution in the first half of 2017. It is a simplified version of WAFer1, which has done some simplified merging of WAFer1, taking into account security and convenience. For example, it has combined session server and business server. In the era of wafer1 we will let users to deploy his server, now here we are hosting type management, users can buy your own server, but I don’t need to do the server configuration, also automatically free deployed SSL certificates, and WeChat we do a depth of cooperation, the wafer2 solution into the space WeChat developers.

This picture shows the interface of wechat developer tools. On the upper right, there are some functions of Tencent Cloud and some solutions, such as uploading code to the development environment and using DevTools to start single-step debugging.

For the development environment, we provide free domain names, one-click distribution of the operating environment, through a series of binding and association after free build small program basic framework.

System support for node.js remote debugging, test tool integration, support to set breakpoints, view variable values, its function is very powerful, used by people are good.

We also put Tencent cloud some features and highlights, as well as more distinctive ability, through the FORM of API exposed to small program developers, through an interface to complete the identity card recognition function and image OCR recognition function.

Intelligent voice is exposed to developers in the form of API. You only need to adjust an interface to complete the function of voice to text.

The operation process

Now introduce the operation process, we use wafer2 to make an association between Tencent cloud account and small program account, create a small program number, customer code and server code. The address of the client code and server code, the small program compilation will know when uploaded to the cloud server, these are interface functions, upload or support installation package, as well as the restart function after installation.

Just mentioned the allocation of free domain name, need to configure the domain name in the client quickly set up the front and back of the small program, according to this process, the whole process about 10 minutes. We also provide a variety of demos for you to understand the use of Tencent cloud, using the function of uploading server and uploading pictures.

After introducing Wafer2, we thought, what else can we do? Wafer2 wraps for developers because of the many functions, such as we landed, and channel server, also need developers to deploy services, although we made some hosting, but you need to consider the capacity of the server, or the load balancing, we landed at want to don’t have to own server can log in, and directly managed to our cloud, Can not write their own server running environment, directly on our cloud function. And that’s what we’re going to do for a while.

Q/A

Q: Just now you mentioned channel services. If you are an enterprise and your data is stored in the private cloud, do you understand that all channel services are stored in Tencent cloud?

A: That’s right, but we won’t store your data.

Q: Wafer2 has a server, can you log in?

A: No, there are A lot of environmental issues with deploying your own server.

Q: Node.js and PXP are also very popular online, can you make a comparison in each aspect? One last suggestion, which one is better? Or does Node.js have a pit?

A: For me, I have no preference between the two languages. I will look at the developer’s preference. But in terms of ability, in fact, we provide JS function in wechat development mini program.

Q: Which is better, Node.js or PXP?

Node.js is A relatively new technical architecture, Pxp is more traditional, depending on your business scenario analysis.

For more information, please click the link below:

Small program cloud solution.pdf

Question and answer



How does wechat applets interact with the database?

reading



Huang Wenjun: Serverless small program backend technology sharing


Sidelai: I admire the practice of small programs in e-commerce


Zou Wei: How to develop a small game

Has been authorized by the author tencent cloud + community release, the original link: https://cloud.tencent.com/developer/article/1116776?fromSource=waitui