1.2.1 applet technology development history
From the technical dimensions of view, the applet is not out of thin air to come out of a concept. When the micro-channel in the inlet WebView become an important mobile Web, the micro-channel will have associated the JS API.
Some developers should have the impression the following code:
Listing 1-1 use WeixinJSBridge preview image
WeixinJSBridge.invoke('imagePreview', {
current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
urls: [ // 所有图片的URL列表，数组格式
'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
]
}, function(res) {
console.log(res.err_msg)
})
This is called a micro-channel native components browse pictures JS API, compared to the additional introduction of a picture preview JS component library, called in a way it is very simple and efficient.
In fact, the official micro-channel is no external exposure had such calls, originally of such API is available to some business Tencent internal use, after a lot of outside developers found, Yihuhuhuapiao use, and gradually become micro letter pages de facto standard.
In early 2015, we issued a set of micro-channel web development toolkit, called JS-SDK, open shooting, sound recording, voice recognition, the two-dimensional code, maps, payments, share, card vouchers dozens API. To all Web developers to open a new window, so that all developers can use the native ability to micro-letter, to complete some previously impossible or difficult to do things.
Also calls browse pictures native, invocation in Listing 1-2.
Listing 1-2 calls using JS-SDK component image preview
wx.previewImage({
current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
urls: [ // 所有图片的URL列表，数组格式
'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
],
success: function(res) {
console.log(res)
}
})
JS-SDK is a packaging before WeixinJSBrige, as well as the release of new capabilities, and into the open to all developers of opening up, get a lot of attention in a very short period of time. From the data monitoring point of view, most of the mobile web propagating within the micro-channel use to the relevant interfaces.
JS-SDK solve the problem of insufficient capacity mobile web, through exposure to micro-channel interface allows Web developers to have more capacity, but in addition to more power, JS-SDK model does not address the case of using a mobile web page to the bad experience problems.
- Note: JSSDK problem is the bad experience. (For product company (or large companies), because many users, the user experience is very important aspect of the product)
When users visit a web page, the browser before the start of the show will have a black and white process, in the mobile terminal, subject to equipment performance and network speed, black and white will be more apparent. Our technical team put a lot of effort is placed on how to help Web developers on the platform to solve this problem. So we designed an enhanced version of a JS-SDK, which has an important function, called " micro-channel Web resources offline storage ."
The following text is quoted from the document inside the (not final open):
Micro-channel is a Web resource offline Web acceleration program stored in the micro-channel for Web-based developers provided.
By using a micro-channel off-line storage, Web developers can make use of the resource storage capacity micro letter provided to load Web resources directly from the micro-channel locally without the need to pull from the server, thereby reducing page load time, provide better web browsing for the micro-channel users experience. All Web App cumulative number at each of the public can buffer up to 5M of resources.
This design is somewhat similar to the HTML5 Application Cache, but is designed to avoid some of the Application Cache deficiencies.
In internal testing, we found that off-site storage can solve some problems, but for some complex issues will still be black and white pages, such as page load a lot of CSS or JavaScript files, execution times for these files take up a lot UI thread, this time, even offline storage loading resources through fast, but still there will be a page of black and white phenomenon, but such sub-file Cache when handling code file update operation is more complicated, requiring the developer than high.
In addition to black and white, there are problems that affect Web experience lack of feedback operation, mainly in two ways: hysteretic switching blunt sense of the page and click.
For some Web developers experienced in terms of some of the SPA will use the framework to simulate the native client page switching transition. The usual way is to simulate in a WebView in multiple pages by CSS processing, combined with the refinement of the script code page switching feedback and do click, get a better experience. However, not all developers have enough time and effort to make the experience page becomes excellent.
Micro-channel problem is how to design a better system, so that all developers can get a better experience in micro letter. The problem is that before JS-SDK can not deal with the need to complete a new system, it requires that all developers can do:
- Fast loading
- more powerful capabilities
- Native Experience
- easy to use and secure micro data open letter
- the development of efficient and simple
This system is described in detail in this book requires a small program.
1.2.2 applet difference with ordinary web development
The main development language applet is JavaScript, it is usually developed applet will be used to develop to do the comparison with ordinary web. Two are very similar, for front-end developers, Web developers to migrate from a small program development cost is not high, but the two still slightly different.
Web development and scripting rendering thread threads are mutually exclusive, which is why the long run could lead to a page script loss of response (this is the fundamental reason) , while in the applet, the two are separate, each running at different thread. Web developers can use to various browsers exposed DOM API, DOM checked and carry out operations. And as described above, the logical layer and rendering applet layers are separated, the logical layer runs in JSCore, and did not complete a browser object, and thus lacks the relevant DOM API and BOM API. This distinction has led to some very familiar front-end development libraries, such as jQuery, Zepto, etc., in the applet is not running. (Unable to operate DOM, how to solve this problem, a new technical architecture bring any problems.) Meanwhile JSCore environment with NodeJS environment is not the same, so some NPM packages in the applet is not running.
Web developers need to face the environment is a wide variety of browsers, PC-side to face IE, Chrome, QQ browser, etc., in the mobile terminal to face Safari, Chrome and iOS, Android system in all kinds of WebView. The applet development process need to face the two micro-channel client operating systems iOS and Android, as well as a small program used to aid in the development of developer tools, small programs in three major operating environment is somewhat different, as shown in Table Figure 1-1.
Table 1-1 applet runtime environment
| Operating Environment | Logical layer | Render Layers |
|---|---|---|
| iOS | JavaScriptCore | WKWebView |
| Andrews | X5 JSCore | X5 browser |
| Applet developer tools | NWJS | Chrome WebView |
Web developers in the development of a web page, just use the browser, and with some aid or editor. Development of small programs is different, need to go through the application applets account, install a small program development tools, configuration items and so on process to be completed.