Welcome to Tencent Cloud + Community to get more Tencent's massive technical practice dry goods~
Zhu Zhan, senior engineer of Tencent Cloud, has many years of front-end and back-end development experience. Currently responsible for the evolution, planning and development of Tencent Cloud Mini Program solutions.
Good afternoon, everyone. The theme of my sharing today is Tencent Cloud Mini Program Solution. First of all, let me introduce myself. My name is Zhu Zhan, I am from Tencent Cloud, and I am currently in charge of Tencent Cloud applet solutions and work on design and development.
Do an on-site survey before starting, how many people have experience in developing small programs, please raise your hand! Thanks! A little more than I thought, how many people have used Mini Programs? I believe everyone has used it.
Why do you say that everyone has used WeChat mini-programs? From March 2017 to November 2017, the growth trend was relatively stable, with a volume of tens of trillions. In December 2017, there was a sharp increase. That point is the release of small games, that is, the time to jump to become a national game. , everyone is trying to brush the list. After this hot spot, its daily activity did not drop off a cliff, and it still maintained a high level. The current daily activity is probably like this. This is the background of our salon today.
Mini Program Architecture
Before talking about our WeChat applet solution, we still want to talk about the architecture of the applet itself. We generally have two modes for mobile development. The first one is web application, that is, native application, and there are two hybrid development modes. Modes, their characteristics are very distinct, such as web applications, do not need to be installed, easy to share, and good dissemination. Native applications generally need to be installed, and the size of the installation package varies from tens of megabytes to hundreds of megabytes.
In terms of development, web applications are free to install. To install native applications, professional development is required, and the requirements for developer skills are relatively high. Due to the high requirements for developers, native applications can make full use of the capabilities of our terminals, and the great advantage is that the user experience will be better; mini programs combine the advantages of two development modes. First of all, it is free of installation. Go to WeChat, open the applet, and leave when you are finished, without any installation action.
At the same time, its development mode is also a web-like mode, its front end is very similar to our h5 front end, and the cost of developing with JS will be much simpler. The user experience is comparable to native applications, and we will focus on the analysis later. The most important point is that the applet is based on the WeChat platform, it will enjoy the convenience brought by WeChat, and it has cross-platform development capabilities. Although our H5 applications generally have cross-platform capabilities, H5 is based on the development of web standards. Students who have experience in development know that our business specification is a long process. The ideal is beautiful, and the reality is skinny. But small programs do not have this problem. WeChat is a social software by nature, and its spreadability and shareability are very good. We can open the applet by swiping on WeChat, and share a applet through group chat. For example, the recently popular Danyidan applet, in fact, has a high degree of dissemination.
Mini Program 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 diagram of the applet. Its upper layer is divided into two parts, one is the view layer, which is also webviews, and the other is the thread, logic layer, and It is appService. These two layers are processed in two different threads, which is fundamentally different from the traditional web. In traditional web rendering, if there is very complex processing in the logic, it will often cause the interface to freeze. The applet does not have this problem. If it does not call some rendering things, it will not cause the fluency of your interface to decrease. Since they run in different threads, the two layers cannot interact directly. Some means must be used, such as an intermediate layer to interact. Its basic function is to connect the JS operating environment and the underlying system, and the system capabilities can be realized. JS and native capabilities call each other, and the two layers on both sides communicate with each other. After the user triggers an event, they will respond to Serverless. If they want to update a certain content of the interface, WeChat's api is displayed in the form of calls.
This picture is an introduction to the rendering of the applet. In the compilation and packaging stage, when we write the applet, we will write a WXML-like thing, including a WCC compilation tool. When the user runs the applet, it will communicate with you. The incoming data from the logic layer is compiled and rendered into the final interface, which is the simplest partial update process.
This is a few simple diagrams of applet loading. When the applet is loaded on the mobile phone, a small program package needs to be pulled on the CDN. When the applet is built on the mobile phone, there may be a waiting time. When the package is installed this time After the cache is stored locally, the content of the installation package will be directly read from the cache when it is opened next time. If there is a new version, the applet will not wait for the new version to be updated before opening the APP, but will directly use the previous cache. The applet, when you restart it, replace the old one with the new one.
Difference between cold loading and hot loading
Hot loading is something we implement at the system level after the applet is launched. The thread of the applet runs in the background and is not destroyed. This time is about 5 minutes. During this time, when you access the applet, you can directly move from the background to the front desk, and the cost is relatively low.
The applet also provides a Webview preloading function. In addition to the currently seen Webview view, you can also see a new Webview in the background. When you switch, because the initialization time of the Webview is relatively expensive, in small At this level of the program, if you want to achieve a smoother experience, you need to do some preprocessing.
Problems that small program developers will face on the server side
In addition to ensuring the smoothness of the applet, the applet also provides some native components. Anyone who has experience in H5 development knows that sometimes long lists and H5 applications are written. The comparison with some native applications is obvious. When swiping, especially with some older Android systems, it feels obvious. Since the experience doesn't meet my requirements, I use native components instead of web components.
Why is the applet so fast? Just mentioned the installation package cache, subpackage loading. The evolution of Mini Program solutions. Mini Programs are a new innovation on the client side. I guess the developers of Mini Programs are mostly web front-end or terminal developers. They may be somewhat lacking in the server side of Mini Programs.
We have concluded that small program developers will face some problems on the server side, such as dealing with a lot of non-business logic. For example, if processing a user login, how to save the session should be considered in the applet? How is your agreement with the client? You also need to understand the application knowledge of the server, how to configure your server, how to expand the capacity of your server, and what to do with my small program explosion? For some developers with development experience, it is not a problem. For more client-side development students, these are very difficult problems, and it is necessary to understand the entire system. Take login as an example. The following picture is the login flow chart provided by WeChat official. This picture looks a bit complicated. If you understand it carefully, you will know what it is going to do. Is there a better way? Here are some of the difficulties in this diagram. When you log in to WeChat, and when the applet is launched, it goes to the server side. How to do the session protocol? How to save on the server side? Where does WeChat provide an APP? There are also things that users need to save. If you save them, it will bring security problems. If you use the solution recommended by WeChat, you have to deal with it yourself.
The second scenario is the Websocket channel service, which has high development costs; it is difficult to guarantee stability; various abnormal situations need to be considered, and the coupling with the business is high.
Wafer Solutions
In response to these situations, we launched a solution called Wafer in 2016. Taking the conversation scenario just now as an example, our session server called wafer encapsulates complex logic, taking into account both security and convenience, and only focuses on what we provide A few interfaces will do. Our session server also supports independent, which can be easily extended horizontally.
For the Websocket just mentioned, a channel server is proposed, which is a paas-level application, providing each developer with a unique access address for developers to use in the program, applet and credit server, obtain websocket, and then to the business server.
To sum up, there are the following points: it can be used directly with the SDK without development; the platform provides stability and performance guarantee; automatic disconnection and reconnection; independent credit server, message porter.
Wafer Architecture
This is an architecture diagram proposed by wafer at that time, because we proposed wafer1 at that time, it was aimed at enterprise customers, and we were more interested in the scalability of security. We have done a lot of work in this regard. We proposed the channel server separately. This The solution seems to be a bit problematic now, especially when WeChat is open, when the small program development individual registers, its problems emerge. For example, the architecture is too unprofessional, each node needs load balancing, and the certificate also needs to be handled by itself . The wafer server needs to be managed by each developer, and the code needs to be deployed by themselves.
In response to the shortcomings of wafer1, we proposed a solution for wafer2 in the first half of 2017, which is a simplified version of wafer1, which simplified and merged wafer1, taking into account both security and convenience. For example, it combines session server and business server. Merged; in the era of wafer1, we let users deploy their own servers, and now we conduct managed management here, users can buy their own servers, but do not need to do server-side configuration, and automatically deploy SSL certificates for free, We have an in-depth cooperation with WeChat to bring the wafer2 solution into the WeChat developer space.
This picture is the interface of WeChat developer tools. There are some functions of Tencent Cloud and some solutions on the upper right, such as uploading code to the development environment, using devtools to start single-step debugging, etc.
For the development environment, we provide a free domain name for free, assign the operating environment with one click, and build the basic framework of the applet for free after a series of bindings and associations.
The system supports remote debugging for Node.js, test tool integration, supports setting breakpoints, and viewing variable values. Its functions are very powerful, and people who have used it say it is good.
We also expose some features and highlights of Tencent Cloud, as well as more distinctive capabilities, to applet developers in the form of API, and complete the identification function of ID card and the identification function of image OCR through an interface.
We expose intelligent voice to developers in the form of API. You only need to adjust an interface to complete the function of voice to text.
Operation process
Now let's introduce the operation process. We use wafer2 to associate the Tencent Cloud account with the account of the applet, and create a number of the applet, which has the client code and the server code. The addresses of the client code and server code are known when the applet is compiled and uploaded to the cloud server. These are the functions of the interface. After uploading, the installation package and the function of restarting after installation are still supported.
Just mentioned the free domain name allocation, you need to quickly build the front and back of the applet after configuring the domain name on the client side. According to this process, the whole process takes about 10 minutes. We also provide a variety of demos for you to understand how to use Tencent Cloud, use the functions of uploading servers and uploading pictures.
After introducing wafer2, we were thinking, what else can we do? Because wafer2 encapsulates many functions for developers, such as our login and channel server, developers need to deploy services by themselves. Although we have done some hosting, you also need to consider server expansion or load balancing , we are thinking that we can log in without using our own server, and host it directly to our cloud. Can we directly put it on our cloud function without writing the operating environment of the server ourselves. This is also the direction of our research in the future.
Q/A
Q: The channel service was mentioned just now. If you are an enterprise, the data is placed in the private cloud. Do you understand that all channel services are placed on Tencent Cloud?
A: Yes, but we will not store your data.
Q: There is a server on wafer2 just now, can I log in?
A: No, there are many environmental problems in deploying the server by yourself.
Q: Node.js and PXP are also very hyped on the Internet. Can you make a comparison in various aspects? Finally, a suggestion, which one is better? Or is there a pit in Node.js?
A: For me, I have no preference for these two languages. I will look at the developer's preference, but in terms of ability, we actually provide the function of js in the WeChat development applet. This problem There is no way to answer you directly.
Q: If there are two solutions, which one is better, Node.js or pxp?
A: Node.js is a relatively new technical architecture, and Pxp is more traditional, so it needs to be analyzed according to your business scenario.
For more sharing information, please click the link below:
Mini Program Cloud Solution.pdf
Q&A
How does the WeChat applet interact with the database?
Related Reading
Huang Wenjun: Serverless applet back-end technology sharing
This article has been authorized by the author to publish Tencent Cloud + Community, the original link: https://cloud.tencent.com/developer/article/1116776?fromSource=waitui
