preface
Recently looking at the small program, from a technical perspective applet in Hybrid optimization process there are many worthy of our learning place, so I want to study at the same time also can be output, in this series, I can’t speak how to apply for a small program, how to develop a program, but rather about what can we learn from program, although it still exists many problems, However, the use of a wide range of small programs will promote wechat technology to the utmost. There are many companies that use Hybrid technology, and I hope my series of articles can be helpful to you.
The evolution of page technology in wechat
From a technical point of view, in fact, wechat page technology is the predecessor of small program, as shown in the figure below.
The webpage in wechat can be called wechat Native through JS-SDK, so that developers can use the native capabilities of wechat. When JS-SDK was released, it was welcomed by many developers, but with its wide use, developers encountered many problems.
- hang
Users accessing wechat on an H5 mobile phone will have a noticeable white screen due to the limitations of the mobile device and the network speed. Wechat team used a lot of energy to solve this problem, then appeared the jS-SDK enhanced version, which has a more important function is: offline storage. Offline storage simply means loading Web resources locally instead of pulling them from the server to avoid network speed bottlenecks. Offline storage reduces the network delay and greatly improves the user experience of H5, but there is still the problem of white screen in some complex pages, mainly because the complexity of JS and CSS will occupy a large number of UI threads and affect the rendering of WebView. In fact, most companies currently use a similar JS-SDK solution: flexible web development + rich native features + offline storage.
- There is no native smooth operation
Some teams use the SPA framework to simulate native page switching, but SPA also has its own disadvantages. With the complexity of business, it is likely to make the Burden of WebView more and more heavy, and to achieve this requires developers to have enough time and energy.
- security
It is difficult to defend against attacks. Js in the browser is very flexible, and it can operate Dom and Bom at will, jump at will, and execute dynamically, etc.
Therefore, wechat can solve the problem above, wechat page can do the following:
- Fast loading
- Great ability
- Smooth experience
- security
- Low development cost
That’s the applet.
Technical selection of small program
Applets will have to do something new if they want to solve some of the problems of previous pure web technology
- Whether Native technology can be used
To achieve fast loading and smooth experience, is not directly based on wechat client development Ok? But there’s a catch. Doing so means that the code for the small program needs to be released with the wechat client code, a pace that can’t be met.
- Can you use ReactNative
Although RN uses javascript to explain execution, the rendering aspect is still Native rendering. In fact, RN can solve the problems of loading and rendering, but it still has some shortcomings. Here is the reason given by wechat official
- CSS support issues can’t meet the growing needs of Web developers, and it takes a lot of effort and risk to adapt.
- So far there are still some performance pits and bugs, which are not suitable for more complex pages.
- Unexpected factors, such as the fuss over permits.
Pure H5 has many disadvantages, pure Native is unable to meet the needs of the release, RN is not very mature, so in the end, wechat’s selection of small programs is Hybrid in the face of its own technology ecology, the interface is rendered by mature Web technology, the logic is analyzed and executed by mature Js, plus the original ability provided by wechat Native. However, in order to achieve the requirements mentioned above, small programs still need to make breakthroughs based on Hybrid.
Two-thread model
Dual threading: the logic layer and the rendering layer of the applet are separated by two threads. Js of the logic layer uses Native JSCore to parse and execute, while the interface is still rendered by WebView. The communication process is shown below (the picture is from the official wechat document and deleted) :
In general Hybrid technology, WebView not only performs JS parsing and execution, but also renders HTML and CSS. When the page is complicated, it is likely that the rendering of the interface will wait for JS execution, resulting in a blank screen. Dual-threading can reduce the burden of WebView. Parallel JS execution and interface rendering can be performed in complex page interactions. In addition, Native Jscore only realizes ECMAScript standards. Unlike the browser, it also needs to realize DOM and BOM, so it cannot operate DOM and use BOM through JS in small programs, which also solves the security and control problems to a certain extent.
Applet javascript
As mentioned above, the javascript of the applet is ECMAScript implemented by JSCore. In addition to this, the applet also provides a framework and a set of apis. These low-level upgrades are synchronized with the wechat client upgrades.
(Image from official wechat document, deleted) :
conclusion
The technical system of wechat pages and small programs is in fact consistent with most companies, but wechat as a platform will achieve the ultimate in security and performance. Although most companies do not need to achieve the platform volume of wechat, its technological evolution can still give us a lot of reference, for example, can we also use multiple WebViews? Can we also use dual threads? Can we also do WebView preloading? Can we also do wechat developer tools? Next, we will gradually share with you our own business scenarios.
In order to make some preparation for the following knowledge content, some content and pictures of wechat official website are used in the first article. It is hereby stated that the content is deleted.
Bibliography: Applets development guide
If you want to read more articles, you can follow our wechat official account: Big Front End Engineer
