基于 WebAssembly 的 IoT应用架构实践

2021-09-04 160浏览

  • 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