应用多端统一的实践

1. 应⽤用多端统⼀一的实践 卓凌
2. 刘晨凌 @wssgcg1213 卓凌 @刘晨凌 淘宝⼩小程序 & ⻜飞冰 ⾼高级前端⼯工程师 邮箱 i@zeroling.com
3. OVERVIEW 1. 多端架构需要解决的问题 2. ⾯面向开放的多端架构 3. ⾯面向未来的多端⼯工程
4. 1. 多端架构需要解决的问题
5. 什什么是端? 端 ≈ 浏览器器 端 ≈ 设备 端 ≈ 容器器 端的定义是⼀一个不不断演进的过程 端 ≈ 平台
6. Learn Once, Write Once, Run Everywhere.
7. 多端架构核⼼心要解决的问题 开发体系 DSL 不统一 代码 业务代码难复用 开发者 高学习成本 容器 多端投放不支持
8. 2. ⾯面向开放的多端架构
9. Rax. 2.0
10. 更更加简单 语法简单 结构清晰 体验升级 ⼯工程体验 交互体验 多端投放 ⽆无需重复开发 业务⼀一键迁移
11. Rax DSL 的演进 Rax 1.0 逻辑、视图、样式混合,不不清晰 语法灵活,但学习成本⾼高 😢 JSX
12. Rax 2.0 Supported <template> <!—- 视图代码 -—> </template> SFC (Single File Component) <style> /* 样式代码 */ </style> <script> // 逻辑代码 </script> 1.分离后结构简洁清晰 2.更亲切和易上手的 Vue 写法
13. SFC DSL 的实现 foo.sfc 结构拆分 template style script 分别编译 Template Compiler Style Compiler 产物合并 Runtime 运⾏行行时组装 Rax Component ES Compiler
14. SFC DSL 的实现 模板的解析和代码⽣生成 标准的 Vue 模板语法 轻度定制 vue-template-compiler
15. SFC DSL 的实现 样式的编译 CSSinJS 通过构建器器解析成 CSS In JS 的对象结构 更更容易易做到多端⽀支持 StyleInJS 可选的 CSS 字符串串编译模式
16. 更更完整的⼯工程 更更流畅的交互
17. Rax 工程体验 2.0 应⽤用级⼊入⼝口 应⽤用配置 组件 ⻚页⾯面级⼊入⼝口 基于⻚页⾯面 基于应⽤用 框架内置路由能力、通讯能力
18. Rax 性能体验 2.0 性能
19. 加载性能 Cache
20. 交互性能
21. Main Thread 渲染 计算
22. Main Thread Worker Thread 渲染 计算
23. Rax 容器 2.0 Worker Renderer mounter Data Create By Node / Tree diff Event UI Events Patch re-render Virtual DOM Native DOM 逻辑与渲染分离
24. 淘宝⼩小程序 Native Bridge Message Rax Core Cycle Event User Code Worker Driver Worker Bridge EvaluationRecords DOM Renderer Renderer Worker DOM Multi Context MutationRecords Events Weex Renderer And More. Web Components Native Components
25. 多端投放怎么办?
26. 浏览器 — Web Worker 👍 https://caniuse.com/#feat=webworkers
27. ⽀支持浏览器器 ⼀一键构建浏览器器可运⾏行行版本 npm start
28. 微信⼩小程序 ⽀支付宝⼩小程序 -其它⼩小程序怎么办- 头条⼩小程序 淘宝⼩小程序
29. npm i sfc2mp -g SFC 转换 淘宝⼩小程序 ⽀支付宝⼩小程序 微信⼩小程序
30. 编译 SFC 小程序
31. https://github.com/alibaba/rax/tree/master/packages/sfc2mp 微信⼩小程序 支付宝小程序
32. Rax 2.0 JSX SFC Browser Weex Flutter … Mini Program ….. Node.js … WebGL
33. 3. ⾯面向未来的多端⼯工程
34. 海量的可复用模版,配套 GUI 开发工具 Iceworks https://alibaba.github.io/ice/iceworks
35. Demo Show
36. 让小朋友也能做小程序 冰州 可视化智能搭建工具 (内测中,Coming Soon.)
37. 淘宝⼩小程序前端框架代码全部开源 https://github.com/alibaba/rax 关于开源 ⻜飞冰⼯工程化桌⾯面软件 Iceworks 全⾯面开源 https://github.com/alibaba/ice
38. Q&A