1. Background
In 2002, Japan’s Toshiba advertising machine using the Linux QT solution entered the Shenzhen Special Economic Zone for the first time through Hong Kong and installed it on a bus, replacing traditional advertising posters and light boxes for the first time. Android appeared from 2010 to 2011, and with the development of the Android ecosystem for many years, Android has also been widely used in the commercial display industry. At the same time, the development of 3G, 4G and other communication technologies has made device networking more convenient. The rapid development of the Internet of Things and 5G has made it possible for smart terminals to bring screens and go to the cloud. The construction of smart cities is still the focus of the "13th Five-Year Plan". The market is expected to reach 18.7 trillion yuan by 2021, bringing development opportunities for screen-equipped terminals. HaaS has to solve not only the interconnection of everything, but also the interconnection of all screens. IoT terminal devices are developing towards networking and screens, and realizing the interconnection of all screens requires a lightweight application framework to support, and HaaS UI came into being.
2. What is HaaS UI
HaaS UI is a set of lightweight IoT applet solutions applied on HaaS hardware. It supports AliOS Things core, supports the development of UI applications with JS, and also supports Native App (not recommended). The framework of HaaS UI is as follows:
Divided into 4 basic modules from bottom to top:
1. Kernel: Support AliOS Things kernel system, based on AliOS Things system graphics framework. For details, see related articles on AliOS Things.
2. UI rendering framework: A layer of interface isolation is achieved through Canvas API and related modules, and different graphics rendering frameworks are used on different system capabilities to interface with different versions of Skia. Separate rendering, components, and pages, reduce the dependence of the application framework layer on graphics rendering, and achieve the purpose of decoupling.
3. Application management and life cycle management: has its own complete application & page life cycle, similar to the Android application life cycle.
4. JS application framework: The JS front-end framework adopted is based on the Vue.js front-end framework, and Vue components implemented based on the tags and style subsets supported by the current container can be used directly. As shown below:
3. Noun explanation
AliOS Things: An IoT operating system developed by the Alibaba Cloud Intelligent IoT team
HaaS: The full name is Hardware as a Service, the hardware as a service launched by the Alibaba Cloud Intelligent IoT team based on the AliOS Things system
HaaS UI: The full name is Hardware as a Service User Interface, which is a set of application & graphics solutions derived from AliOS Things operating system, supporting C/C++ and JS two development languages
4. Why choose J S
Three main reasons:
1. Three "hot" features: hot deployment, hot update, and hot loading. Application hot update, so that the device application upgrade does not rely on OTA, and can be independently upgraded for applications & single pages.
2. Developer ecology: Based on the JS language, lower the development threshold, introduce front-end developers, and improve development efficiency.
3. Open source solution: JS engine + graphics framework + open source front-end framework, gathering the power of community developers.
5. Why choose Vue.js
The author of Vue.js is You Yuxi, a progressive framework for building user interfaces. It adopts a bottom-up incremental development design, which is more friendly to JS developers.
The core library of Vue.js only focuses on the view layer, and it is very easy to learn. The prosperous ecosystem can scale freely between a library and a complete framework.
Version: V2.6 version
Official website: https://cn.vuejs.org/
Getting started: https://www.runoob.com/vue2/vue-tutorial.html
6. HaaS UI JS application
1. Each application has app.js, including global application life cycle monitoring. This js is the application entrance, which is executed at startup, and exports a subclass inherited from $falcon.App to carry the application life cycle.
2. Each page corresponds to a page.js file (optional, it can also directly correspond to a .vue file. In this case, the framework will automatically create a corresponding Page instance).
3. Page contains a Falcon (dynamic card) instance, and each Falcon instance corresponds to a Vue root instance.
4. Each Vue root instance can be composed of multiple components.
7. Demonstration effect
HaaS UI can meet the development of UI pages in various scenarios. There will be related websites to introduce the usage and demonstration effects of various components. The following is the demonstration effect on the device
dial
Weather forecast
8. Basic technical indicators & capabilities
| Indicators & Capabilities |
|
| RAM |
< 3MB |
| Flash |
<1.2MB (Include English symbols, etc., support adding Chinese font library) |
| Basic components |
10+ |
| Advanced components |
15+ |
| Start speed |
< 600ms |
| Canvas API |
10+, support matrix transformation |
| Key/Input event |
Complete event mechanism, support focus |
| Component Layout mechanism |
Complete layout layout capabilities, support for expansion |
| JSAPI extension |
Support three parties to expand their own system & front-end capabilities (similar to jni) |
| Picture decoding capability |
Support jpeg, png, gif, etc. |
| Font capability |
Support vector fonts by default |
| Multi-window capability |
Support multi-window overlay mechanism |
9. Open source plan
HaaS UI will be open sourced with the latest version of AliOS Things. Developers can experience the most efficient way to build screen display capabilities and screen applications on IoT devices on the HaaS hardware development board. Please pay attention to our latest announcement about the open source project.
10. Developer technical support
If you need more technical support, you can join the Dingding Developer Group
For more technology and solution introduction, please visit the Aliyun AIoT homepage https://iot.aliyun.com/