基于 WebAssembly 的 IoT应用架构实践

1. 唐兹源（渊之）阿里巴巴前端技术专家基于 WebAssembly 的 IoT应用架构实践

2. 基于 WebAssembly 的 IoT应用架构实践主讲人：唐兹源（渊之）阿里巴巴-天猫精灵-前端技术专家

3. 1 2 背景简介架构概览 3 4 应用案例未来展望

4. 1 背景简介为什么又要造一个轮子？

5. • 2020出货量预计将近 2.2 亿台 • 2020带屏音箱出货量将达千万级 • 智能家电人机交互体验仍需突破

6. 智能家居设备+屏幕 -> 语音+触屏交互 IoT 设备上的 GUI 将发展出新的范式

7. JavaScript on IoT Johnny 支持 JavaScript 开发应用的IoT套件面向 IoT 的 JavaScript 引擎 Five JavaScript Robotics & IoT Platform

8. JavaScript on IoT 轻应用支付宝 IoT 小程序天猫精灵小程序 AliOS 车载小程序 ...

9. 为什么不用 JavaScript？没有 V8 的加持，性能不够极致与其他语言的协同性

10. 嵌入式设备 GUI 方案小程序老牌 WebView 新贵

11. 为什么不用老牌方案？不具备动态性开发效率不够高

12. 为什么不用小程序？已经用上了，但... 加载有点久，内存不够用

13. 天猫精灵智能音箱交互远近场融合交互情景感知服务多设备联动交互 01

14. 应用框架特性低硬件跨平台动态化多语言 01

15. 关键技术选型 HTML & CSS subset AssemblyScript TypeScript syntax User Code WebAssembly Micro Runtime 字节码联盟开源Runtime Render Engine Reactive框架 + 基于 Skia 的UI引擎 01

16. Why WebAssembly ? 可脱离浏览器运行不赖浏览器环境，可独立运行在IOT设备上高性能可支持JIT/AOT编译方式，接近原生性能支持多语言开发大部分静态类型语言都可以编译为wasm字节码活跃的开源社区 Mozilla, Google, Intel, Bytecode Alliance … 01

17. Why WAMR ? WASM Byte Code WASM Runtime 受控访问最快 100 us 可以启动应用 Heap Linear memory 启动快受控访问 Global Stack 消耗低 100KB内可以启动一个实例 Host Runtime Native API 高性能安全隔离接近原生编译的运行速度内存隔离 & 受控访问系统资源高并发实例可快照一个进程可以运行数百个实例快速热启动恢复 ( WASI , Custom APIs ) Host System Resources ( IO , Network , Files ) 01

18. 2 架构概览是骡子是马，拉出来遛遛

19. 架构概览 01

20. 前端要干啥？ 1. 搞业务 0. AS 基础框架 2. 做工具 3. 应用平台 01

21. 代码怎么写？ 01

22. 贴近 Web 的应用代码风格 01

23. 怎么变成 wasm ? 01

24. 1. 将 HTML模板&CSS 解析为 AST JSON 01

25. 2. 将 AST JSON & script 标签内容塞进 AS 手脚架 01

26. 3. 将包含框架的完整AS 代码编译为 WASM 01

27. 坑点在哪里？ AssemblyScript != Typescript 只采用了一个语法子集，且对静态类型使用要求更严格无法兼容原有 JS生态 WASM 生态还比较薄弱，无法复用 Web 生态编程安全性要求变高无 GC，代码编写不当，容易引起内存泄露避免激进，谨慎入坑保持关注，未来可期研发体验不太完善断点调试能力比较弱，缺乏模块管理机制，不支持异常处理 01

28. 3 应用案例废话少说，放码过来

29. 先来一个简单示例 01

30. 1 定义 HTML 模板 01

31. 2 提取云端下发的数据设置页面 State 01

32. 3 播放音频 01

33. 信息流 Widgets 01

34. 轻服务卡片 01

35. 轻服务卡片 01

36. 动态编排的智能电台 01

37. Widgets Hub 动态加载 01

38. 4 未来展望

39. 2021 RoadMap 其他语言 Release 框架支持支持云端 1.0 版本 Q3 渲染模式 Q2 Q1 01

40. WASM Post-MVP 特性 26 项提案，社区迭代飞快高层次数据类型转换 String / Function / Set ESM 模块集成异常处理 01

41. 感谢聆听 Q&A 01