来源 | HaaS技术社区
1、背景
2002年日本东芝生产的采用Linux QT方案的广告机经由香港第一次进入到深圳特区安装到大巴之上，首次取代了传统的广告海报及灯箱。2010年~2011年期间安卓出现，且随着多年安卓生态的发展，安卓也被广泛应用到商显行业，同时3G、4G等通信技术的发展，使得设备联网更加便捷。物联网和5G的高速发展，使得智能终端带屏、上云成为可能。智慧城市建设，仍是“十三五”工作重点，预计到2021年市场规模达到18.7万亿，为带屏终端带来发展机遇。HaaS要解决的不仅是万物互联，更是万屏互联。IoT终端设备向网络化、带屏化发展，真正实现万屏互联，需要一个轻量的应用框架来支撑，HaaS UI应运而生。
2、什么是HaaS UI
HaaS UI是一套应用在HaaS硬件上的轻量级IoT小程序解决方案，支持AliOS Things内核，支持用JS开发UI应用，同时也支持Native App(不做主要推荐)。HaaS UI的框架如下：
自底向上分为4个基础模块：
1. 内核：支持AliOS Things内核系统，基于AliOS Things系统图形框架。详见AliOS Things相关文章。
2. UI渲染框架：通过Canvas API及关联模块实现一层接口层隔离，在不同系统能力上使用不同的图形渲染框架，对接Skia不同版本。将渲染、组件、页面进行分开，减少应用框架层对图形渲染的依赖，达到解耦的目的。
3. 应用管理和生命周期管理：有自己完整的应用 & 页面生命周期，类似Android应用生命周期。
4. JS应用框架：采用的JS前端框架是基于Vue.js前端框架，基于当前容器所支持的标签和样式子集实现的Vue组件都可直接使用。如下图所示：
3、名词解释
AliOS Things： 阿里云智能IoT团队自研的物联网操作系统
HaaS：全称是Hardware as a Service，阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务
HaaS UI：全称是Hardware as a Service User Interface，是源自AliOS Things操作系统上的一套应用&图形解决方案，支持C/C++和 JS两种开发语言
4、为什么选用JS
三点主要原因：
1. 三个“热”的特性：热部署、热更新、热加载。应用热更新，让设备应用的升级不依赖OTA，可以针对应用&单页独立升级。
2. 开发者生态：基于JS语言，降低开发门槛，引入前端的开发者，提升开发效率。
3. 开源方案：JS引擎 + 图形框架 + 开源前端框架，聚集社区开发者力量。
5、为什么选择Vue.js
Vue.js作者为尤雨溪，一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，对JS开发者比较友好
Vue.js 的核心库只关注视图层，并且非常容易学习，不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩
版本：V2.6版本
入门：https://www.runoob.com/vue2/vue-tutorial.html
6、HaaS UI JS应用
1. 每个应用都有app.js，包含全局应用生命周期监听。该js为应用入口，启动时执行，并导出一个继承自$falcon.App的子类承载应用生命周期。
2. 每个页面对应一个page.js文件（可选，也可直接对应一个.vue文件。此情况框架会自动创建一个对应的Page实例）。
3. Page包含一个Falcon(动态卡片)实例，每个Falcon实例对应一个Vue根实例。
4. 每个Vue根实例可由多个组件组成。
7、演示效果
HaaS UI 可以满足各种场景下的UI页面开发，后续会有相关网站介绍各种组件的用法和演示效果，下面为设备上的演示效果
表盘
天气预报
8、基础技术指标&能力
| 指标 & 能力 |
|
| 内存 |
< 3MB |
| Flash |
< 1.2MB(进包含英文符号等，支持自己增加中文字库) |
| 基础组件 |
10+ |
| 高级组件 |
15+ |
| 启动速度 |
< 600ms |
| Canvas API |
10+， 支持matrix矩阵变换 |
| Key/Input事件 |
完整的事件机制，支持焦点 |
| 组件 Layout 机制 |
完整的layout布局排版能力，支持扩展 |
| JSAPI扩展 |
支持三方自己扩展系统&前端能力(类似jni) |
| 图片解码能力 |
支持jpeg，png，gif等 |
| 字体能力 |
默认支持矢量字体 |
| 多窗口能力 |
支持多窗口overlay机制 |
9、开源计划
HaaS UI将配合AliOS Things最新版本一同开源，开发者可以在HaaS硬件开发板体验用最高效的方法搭建IoT设备上的屏幕显示能力和带屏应用。请关注我们关于开源计划的最新公告。
10、开发者技术支持
如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号
更多技术与解决方案介绍，请访问阿里云AIoT首页https://iot.aliyun.com/
