AWTK WEB version of the transplant Notes - Preface

AWTK WEB version of the transplant Notes - Preface

A, WEB version of AWTK significance

AWTK-WEB version of AWTK is important for two main reasons:

• Let AWTK applications using C language development, and can run in a browser without the need to modify the source code. Do such a good major that can easily demonstration projects to customers. You only need to share a link, customers can open in a browser, and see the actual operating results, which is a wonderful experience.

• Compile AWTK into a JS library, you can use JS AWTK develop applications and run in a browser. AWTK-JS let AWTK support with JS to develop AWTK applications and run in an embedded system, but can not run in a browser. The AWTK-WEB is to allow AWTK support the use JS to develop AWTK applications, and can run in a browser, which opened the barriers between embedded and WEB.

• Development of a variety of small programs AWTK is also one of the goals. And without exception, are small programs developed using javascript, WEB version of the transplant well, will support the development of small program is very easy, so we need to be crossed this threshold.

Second, how to achieve WEB version of the transplant

To develop in C language AWTK ported to the WEB, you have to be compiled into C language Javascript or webassembly, emscripten provide practical way for the compiler, emscripten is a great tool, proven many large projects have been very mature, feasibility is no problem.

But feasible and practical ability to get there is a gap, write RTOS kernel is feasible, but the real success is not much. Easy to use and also there are gaps, and even differences in success and failure, GUI engine a lot, but more than 90% can only be regarded demo. AWTK the WEB not only can, but also be easy to use for the job, so the whole transplant process becomes interesting.

I have all kinds of problems encountered during the migration, faced with the choice to be a note to a friend in need for reference.

Three, WEB version of the objectives and strategies

Simple and crude will be compiled into AWTK WEB version, problems encountered and the middle may be a lot of work to do (of course, maybe some problems more difficult to solve) less. But that can only make AWTK the WEB version is available, from easy to use there is still a gap. To make AWTK WEB easy to use, at the beginning of the transplant to set the following objectives:

1. The smaller size.

WEB version is loaded from the Internet resources, load times the size of the volume relationship of APP, a direct impact on the user experience. In order to reduce the volume of the JS, we made the following selection:

• SDL is not used as a graft layer. Using SDL as a portability layer, you have to join SDL, navavg, stbimage and stbfont and so a lot of things, it will make double the amount of code, but can only use font APP own font, the more resources can not put up with the volume.

• The default font to use the browser that comes with the font. Font files are large, frequently is even a few dozen M. M The default font to use the browser that comes with the font, can greatly reduce the volume of resources. The special font is usually small, still use APP own font.

• Pictures with independent resources. This can reduce the size of the display screen before the first load of resources out until after the first screen, you can display the progress of loading resources, so that greatly enhance the user experience.

2. faster.

• UI and Style constant binary data, compiled into the code to reduce the number of network access, data little effect on the generated code loading time can be ignored.

• Use picture decoding function of the browser itself. Such decoding will be faster, but also to avoid the use
  stbimage decoding library, reduced code size.

• Font decoding using the function of the browser itself. Such decoding will be faster, but also to avoid the use stbfont decoding library, reduced code size.

• Window animation using WebGL map, you can increase the window animation effects.

• Enable dirty rectangle algorithm. Do not draw the same, there is a change only becomes part of the painting.

3. The power and performance into account.

• Window animation using WebGL textures, normal drawing using Canvas 2D interface.

4. maximize compatibility.

• With little or no third-party libraries. For example, there are WEB version of SDL transplant, but ported to a variety of small programs may have a problem, modify third-party libraries is very troublesome thing, post-maintenance and upgrades are also a problem.

• Isolation browser-specific functions. Events and input methods, different each applet handling, Canvas interface has a small difference, they must be isolated.

• Conservative use of functions provided by the browser, avoiding trouble when porting to other platforms.

• WebAssembly automatic adaptation support and do not support WebAssembly platform. WebAssembly very quickly, but part of the browser and does not support applets must automatically checks and load different programs.