Shulou(Shulou.com)06/01 Report--

This article mainly explains how to transplant the AWTK WEB version. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to transplant the AWTK WEB version.

I. the significance of WEB version to AWTK

The AWTK-WEB version is important for AWTK for the following main reasons:

So that AWTK applications developed in C language can run in the browser without changing the source code. The main reason for doing this is that it is very convenient to present the project to the customer. You only need to share a link, and the customer can open it in the browser and see the actual running effect, which is a great experience.

Compile AWTK into a JS library, and you can use JS to develop AWTK applications and run them in a browser. AWTK-JS allows AWTK to support the development of AWTK applications with JS and run in embedded systems, but not in browsers. On the other hand, AWTK-WEB allows AWTK to support the development of AWTK applications with JS and be able to run in browsers, which breaks down the barrier between embedded and WEB.

Developing a variety of Mini Program is also one of the goals of AWTK. Without exception, Mini Program is developed with javascript. Once the WEB version is transplanted, it will be very easy to support Mini Program development, so we need to overcome this hurdle first.

Second, how to realize the transplantation of WEB version

In order to transplant AWTK developed in C language to WEB, it is necessary to compile C language into Javascript or WebAssembly,emscripten to provide a feasible way for this compilation. Emscripten is a great tool, which has been verified by many large projects, and there is no problem with its feasibility.

But there is a gap between whether it is feasible and whether it can be done in practice. It is feasible to write a RTOS kernel, but not many of them are actually successful. There is a gap between being able to use and being easy to use, even the difference between success and failure. There are many GUI engines, but more than 90% of them can only be regarded as demo. AWTK's WEB needs to be not only usable, but also easy to use, so the whole migration process becomes interesting.

I take notes of the problems encountered in the transplant process and the various choices I face for reference to friends in need.

III. The goal and strategy of the WEB version

Simply and rudely compile AWTK into a WEB version, and there may be fewer problems and work to be done (of course, some problems may be more difficult to solve). But that only makes the WEB version of AWTK available, a long way from being easy to use. To make AWTK WEB easy to use, the following goals were set at the beginning of the migration:

1. It should be small.

The WEB version needs to load resources from the Internet, and the size is related to the loading time of the APP, which has a direct impact on the user experience. In order to reduce the volume of JS, we made the following choices:

Do not use SDL as the migration layer. Using SDL as the migration layer, you have to add a lot of things such as SDL, navavg, stbimage, and stbfont, which doubles the amount of code, and fonts can only use APP's own fonts, making the resource volume even more intolerable.

The default font uses the font that comes with the browser. The font file is very large, which can easily be a few M or even a dozen M. The default font uses the font that comes with the browser, which can greatly reduce the size of the resource. Special fonts, on the other hand, are usually very small and still use APP's own font.

The picture uses independent resources. This reduces the size of the resources loaded in front of the first boundary, and after the first interface comes out, you can show the progress of loading resources, which greatly enhances the user experience.

two。 It has to be fast.

UI and Style data are compiled into the code using binary constants to reduce the number of visits to the network. These data are small and the impact on code loading time can be ignored.

Image decoding uses the functions of the browser itself. In this way, the decoding speed is faster, the use of stbimage decoding library is avoided, and the code size is reduced.

Font decoding uses the functionality of the browser itself. In this way, the decoding speed is faster, the use of stbfont decoding library is avoided, and the code size is reduced.

Window animation uses WebGL mapping, which can improve the effect of window animation.

Enables the dirty rectangle algorithm. Do not change, do not paint, there is change, only the part of painting.

3. Both power consumption and performance are considered.

The window animation uses WebGL map, and the normal drawing uses Canvas 2D interface.

4. Maximize compatibility.

Use little or no third-party libraries. For example, SDL has a WEB version of the migration, but the migration to a variety of Mini Program may be problematic, modify the third-party library is a very troublesome thing, later maintenance and upgrade is also a problem.

Isolate browser-specific features. Events and input methods, each Mini Program handles differently, the Canvas interface has small differences, they must be isolated.

Conservatively use the features provided by the browser to avoid trouble when porting to other platforms.

Automatically adapts to platforms that support WebAssembly and do not support WebAssembly. WebAssembly is very small very quickly, but some browsers and Mini Program do not support it, so you must automatically check and load different programs.

At this point, I believe that everyone on the "AWTK WEB version of how to achieve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.