智能 Web 研发初探 邵帅

QCon大会

2019/06/25 发布于 技术 分类

QCon  QCon2019 

文字内容
1. 智能 Web 研发初探 邵帅(余化) 蚂蚁金服 前端技术专家
3. 邵帅 (余化) 蚂蚁⾦金金服-体验技术部 前端技术专家
4. 01. 02. 03. 问题域 我们的新思路路 未来展望 中台研发痛点 Ant Design Next hpaPaaS 平台
5. 01. 中台问题域
6. 1.1 效率
7. 技术栈的变化 组件库 (antd) jQuery UI 框架 (react) 数据流 (redux)
8. 带来新的问题 组件库 (antd) UI 框架 数据流 ??? (redux) (react) • 技能要求⾼高 技术栈变厚,上⼿手难度加⼤大 • 招聘困难 待建系统多,专业前端普遍⼈人⼿手不不⾜足 规模化⽣生产
9. 1.2 体验
10. 我们做了了 Ant Design 来提升体验
11. 理理想情况下⽤用了了 antd 后 Before After
12. 实际情况 • 体验不不确定性 严重依赖开发⼈人员⽔水平与时间投⼊入 • 设计规范落地难 对⻬齐、间距、响应性等基础体验问题很难根治
13. 02. Ant Design ??? 规模化⽣生产 组件库 我们的新思路路 设计规范 效率 体验
14. Ant Design Next 2.1 2.2 2.3 更更换底盘 提⾼高效率 提升体验 可视化、低代码 80% 场景 Good by default
15. 2.1 2017 年年底,我们开始了了⼀一个新项⽬目 ⽬目标是 云凤蝶 组件库 更更换底盘 可视化、低代码 研发效率要⾼高 x10 产品体验要好 代差感 设计规范
16. 2.1.1 可视化 可以拖拽的 Ant Design
17. Ant Design 组件库 + ⾃自由拖拽,符合直觉的⼯工作⽅方式
18. 2.1.2 低代码 组件树 布局 可操作性 √ 使⾼高交互成为可能 √ 适配不不同屏幕尺⼨寸 √ 动态内容、UI 交互⾏行行为 不不写 react 不不写 css 少写 js
19. 不不写 react 可视化搭建 ⾃自动构建组件树
20. 不不写 react 构建组件树 ⽗父⼦子判定: 如果 A 在视觉上包含 B,那么 B 是 A 的⼦子节点 √ x x
21. 不不写 css 布局系统 CSS based Auto Layout(iOS) Predefined Layout(WPF) 复杂度⾼高 难以掌握 声明约束条件,符合直觉 低上⼿手成本 不不符合第⼀一直觉 但上⼿手后最易易⽤用 x √ √
22. 不不写 css 宽度:⾃自适应 左右间距:固定 宽度:固定 左间距:固定 右间距:⾃自适应 宽度:固定 左右间距:固定 宽度:固定 左间距:⾃自适应 右间距:固定 宽度:⾃自适应 左右间距:固定
23. 不不写 css 布局系统 上 ⾼高 度 左 右 宽度 下 • 维度 宽度、⾼高度、四向间距 • 配置项 固定、适配内容(外部适配内部)和⾃自适应(内部适配外部)
24. 少写 js 视图可操作性 数据驱动 受控组件 数据绑定
25. 少写 js 使⽤用 Dispatch 获取数据的‘魔法’循环
26. 少写 js 最简化的 OOP 编程⽅方式,⽆无需学习 redux
27. 少写 js 数据绑定
28. 少写 js ⼀一⾏行行代码调⽤用 API
29. 更更换底盘:收益 • sketch/axure ⼀一样的使⽤用体验,上⼿手极快 • 降低了了技能要求(⽆无需掌握 CSS/React/Redux),⻔门槛⼤大⼤大 降低 • ⼀一个全新的技术底盘,为提⾼高效率和提升体验打开了了新⼤大⻔门
30. API 驱动 效率 x10 的关键:解决 80% ⼯工作量量场景 2.2 提⾼高效率 表单 表格 CRUD API 列列表 详情
31. API 驱动 GET /users POST /orders UPDATE /products/1234
32. 2.3 提升体验 Good By Default 设计规范 性能
33. 设计规范⾃自动化 Ant Design 设计规范 对⻬齐 间距 响应性 历史⼀一再证明,⼈人⼯工保证不不靠谱 ⼈人⼯工保证 ⾃自动化
34. 设计规范⾃自动化 ⽅方式 1:智能还原设计稿 x √ ⽣生产端不不受欢迎:对 sketch 稿约束过多,可⾏行行性低 消费端不不受欢迎:产出代码可维护性低,实⽤用性不不强 可⾏行行性⾼高:Ant Design 规范特征明显,容易易训练 实⽤用性强:还原成画布元素后补充缺失交互即可上线
35. 设计规范⾃自动化 ⽅方式 2:智能布局 摆出⼤大概位置 格式化 符合 Ant Design 规范
36. 性能 超越⼿手写 react 性能? Code AntD Configuration 数据流 React Browser 云凤蝶 Runtime Browser Code
37. 性能 减少不不必要的更更新 ⽗父⼦子级联渲染解耦 shouldComponentUpdate() 强制返回 false
38. 性能 减少不不必要的更更新 精确依赖收集 - 使⽤用 Proxy setter 实现精确监听 store 对象树上的具体修改路路径 使⽤用 Proxy getter 依赖收集实现精确收集组件 render 所需要的 store 变量量
39. 性能 构建优化 • 稳定的三⽅方库 external • ⾮非⾸首屏依赖 dynamic import 和 lazy import • 组件按需构建与加载 • 代码公共依赖 common chunk 提取 • 代码重复依赖 duplicate dependencies 去除 • 预构建减少产物体积 • And more…
40. 新底盘 可视化、低代码 提⾼高效率 80% 场景 Ant Design Next 云凤蝶 API 驱动⾃自动完成 提升体验 组件库 Good by default 设计规范 设计规范、性能
41. 03. 未来展望 hpaPaaS 智能研发平台 云凤蝶
42. hpaPaaS hcaPaaS 技能要求少 专业开发者 Model driven + Low code Pro code ⾃自包含 devOps aPaaS = application PaaS hcaPaaS = high control aPaaS 以迭代为中⼼心的 devOps 平台 hpaPaaS = high productivity aPaaS 以低代码为主要使⽤用⽅方式的新型研发平台
43. 公司外 Google App Maker 简单应⽤用和 workflow,模型驱动,数据关系,severless,code 创建⼯工作流 Forest Admin 产品管理理后台,接⼝口驱动,提供 sdk 转换数据格式,固定的 ui 和交互模式 公司内 ⾦金金蝉 模型驱动,⽽而且重点在模型上⾯面 乐⾼高 low-code,中后台应⽤用 FramerX 集设计、原型、开发⼀一体的移动应⽤用开发平台,可以混⽤用 pro-code 模式 IceLand 搭建界⾯面,导出代码,pro-code 开发 Microsoft PowerApps 模型和画布两种应⽤用,⾼高效搭建企业应⽤用 AIMake 搭建界⾯面,导出代码,pro-code 开发 Bubble 功能⽐比较强⼤大的可视化建站产品,流程驱动
44. 增强模型驱动 业务模型 Database API 1. 只需制作业务模型,补充字段、逻辑 2. ⼀一键完成 DB、API 和 UI 的全链路路⽣生成 UI
45. Serverless + 云服务,⾃自包含 1. Low-code ⽅方式书写后端逻辑 Configuration 2. 内置云服务 Code 云凤蝶 Runtime 3. 应⽤用 host,⼀一键发布 BizModel BizModel … Serverless Functions Db File Standalone App …
46. 智能 web 研发 效率 体验 极速研发,天⽣生好⽤用 30 分钟上⼿手,3 天精通 数据驱动,智能⽣生成⾼高体验应⽤用 Function ⽅方式轻松编写业务逻辑 集成 Ant Design 组件库,开箱即⽤用 ⾃自由拖拽,智能布局,轻松做出⾼高颜值应⽤用