使用跨端方案 Rax 编写鸿蒙应用

1. 第十六届 D 2 前端技术论坛使用跨端解决方案 Rax 编写鸿蒙应用大果

2. ! 大果（刘雄） " 淘系技术部 – 前端架构 – 前端工程师 # 跨端 / 框架 / 中后台飞冰 ICE Rax

3. 关于跨端解决方案 Rax 目录当 Rax 遇到鸿蒙系统原理：Rax 是如何对接鸿蒙的

4. 关于跨端解决方案 Rax

5. 为什么会有跨端？ • 设备&网络差异大带来的性能问题 • App 容器层给了可能性 • 大厂商的超级 App 生态

6. 跨端背景下需要什么样的技术方案？一码多端研发成本各写一套 ! 适配成本 ! 功能一致 ! 招聘成本 !

7. 社区中一码多端的方案 Rax Remix

8. Rax 是一个怎样的跨端方案？ • 类 React 语法，以及配套的工程框架体系 • 支持 Web、各厂商小程序、Weex 等不同端 • 服务手淘内 80% 以上的业务

9. 当 Rax 遇到鸿蒙系统

10. 关于鸿蒙系统 • 华为自研开发的国产操作系统 • 装机量突破 1.5 亿 • 未来有机会跟安卓、苹果三足鼎立 • 支持使用 JavaScript 开发系统应用

11. 鸿蒙系统与跨端鸿蒙系统将 JavaScript 作为应用开发的一等公民 Rax X 鸿蒙具备理论可能性

12. Why：业务有诉求吗？ ! 单独开发一个鸿蒙应用 " 开发一个有流量入口的服务卡片

13. Why：技术有方案吗？ 1. 单独开发一套成本太高了？ 2. 学不动了怎么办？

14. 所以：支持用 Rax 开发鸿蒙应用吧 • 使用类 React 语法开发，不需要学习新的语法 • 一套代码多个端，降低开发成本 • 开发链路上可以更好的结合 Web 生态

15. 原理：Rax 是如何对接鸿蒙的

16. Rax 对接鸿蒙方案渲染能力工程构建研发链路

17. 多端渲染: VDOM 的跨端能力 VDOM 标准数据结构特点价值 UI = fn(state) 跨端渲染

18. 多端渲染: Rax Driver 适配器

19. 多端渲染: Rax Driver 生态 driver-web driver-server driver-miniapp WebView Node.js 小程序

20. 多端渲染: 对接方案 index.hml index.css 鸿蒙官方的类 Web 开发范式，写法跟小程序/Vue 非常类似 index.js

21. 多端渲染: 对接方案 1. 语法编译 2. 类小程序运行时 Rax 语法语法转换（Babel）类小程序语法 • 实现成本高 • 语法约束多 ! 3. 对接底层渲染指令 Rax Core Rax Core driver-harmony driver-harmony this.$set() 渲染指令类小程序 runtime 渲染引擎 • 运行时复杂度高 • 运行时轻量、高性能 • 性能劣化 • 实现周期短 " • 实现周期较长 #

22. 多端渲染: driver-harmony 业务代码 Rax Core driver-harmony JS Framework Render Engine

23. 多端渲染: driver-harmony

24. 工程构建: 工程配置工程配置 build.json 运行时信息配置 app.json

25. 工程构建: 多 webpack 任务

26. 工程构建: plugin-rax-harmony 注册独立的 Webpack 任务 build-plugin-rax-harmony 定制 Webpack 配置生成鸿蒙产物

27. 研发链路：方案设计鸿蒙官方提供了 DevEco Studio IDE 支持应用的全链路开发调试与打包。 Rax 的工程链路如何对接？

28. 研发链路：方案设计 DevEco Studio 短期方案创建项目修改 src/ 应用打包远程模拟器调试应用发布 webpack-dev-server npm init rax 长期方案（建设中） rax-app start 支持在 DevEco Studio 从 Rax 应用创建 -> 开发 -> 调试 -> 发布的全链路研发能力

29. 研发链路：方案演示

30. Roadmap • 完成渲染链路的完整对接 Rax 团队和鸿蒙团队第一次会议交流 8 月 • 与鸿蒙 IDE 团队沟通全链路方案 10 月结合鸿蒙提供的渲染指令跑通 demo 12 月结合 Harmony 3.0 正式发布 2 月 • IDE 全链路流程开发完成 • Rax 相关组件&API 适配完成 3 月

31. 总结 1. 为什么需要一码多端的跨端解决方案 2. 鸿蒙系统以及对应的应用开发方案 3. 我们是如何实现使用 Rax 编写鸿蒙应用的 4. 后续的一些规划

32. Thanks