陈成 可视化辅助编程在蚂蚁的探索之路
2020-04-13 220浏览
- 1.可视化辅助编程在蚂蚁的探索之路路 陈成（云谦） ⾼高级前端技术专家
- 2.
- 3.⾃自我介绍 杭州 wife, 2 kids 淘宝 5 年年 ⽀支付宝 6 年年 spm awesomejavascript atool- babelbuild plugindora import roadhog dva umi fatherhttps://sorrycc.com
- 4.⽬目录 • • • • • 写代码的优势 可视化辅助编程在蚂蚁 原理理解析 破局 展望和未来
- 5.写代码的优势
- 6.可视化搭建越来越多 • • • ⽆无代码（NO CODE）和低代码（LOW CODE） 阿⾥里里 • 截⽌止 2019.12，内部有 30 多个搭建系统 • 模块搭建规范 业界 • Mendix、OutSystem • PowerApps • Bubble.IO • Scratch（⼉儿童编程） • Swift UI、Google Blockly • 云凤蝶（蚂蚁） • 7 Billion Human（游戏） • 等
- 7.所⻅见即所得 增删改查，⼗十倍提效 可视化搭建的优势 ⼀一站式研发 专业⻔门槛低 技术收敛
- 8.写代码的优势 所⻅见即所得 精确表达，极致体验 增删改查，⼗十倍提效 做产品，增值业务 ⼀一站式研发 部署平台兼容 专业⻔门槛低 和业务⼀一起成⻓长 技术收敛 新技术⽣生⻓长的⼟土壤
- 9.我全要 • • • • • 既要...⼜又要... ProCode + VAP VAP：Visual Assistive Programming 以代码为基础，VAP 的所有操作最终作⽤用 于代码 以命令⾏行行为原型，VAP 是命令⾏行行功能的可 视化形式
- 10.社区的先⾏行行者 • • • • • • • Vue UI Angular Console Iceworks@3 Guppy Majestic（JEST 可视化⼯工具） Webpack Dashboard ...
- 11.ProCode 的痛点 • • • • • • ⽂文档链路路⻓长 ⻔门槛⾼高 命令⾏行行不不够友好 ⾮非⼀一站式研发，流程割裂 研发效率不不够⾼高 ...
- 12.可视化辅助编程在蚂蚁
- 13.可视化辅助编程在蚂蚁：Umi UI • • 流程 • 创建 -> 本地开发 -> 联调 -> 部署 > 发布 功能 • Dashboard • 基础 • 配置管理理、任务管理理 • 进阶 • 资产市场、数据管理理 • 功能闭环：Terminal • 运⾏行行态能⼒力力：Mini ⽓气泡 • ... Umi UI 的配置管理理界⾯面
- 14.DEMO：创建项⽬目 • • 创建流程 • 更更新脚⼿手架⼯工具 • 创建项⽬目 • 安装依赖 • 打开项⽬目 • 出错重试 内部⾛走单独的创建、部 署和发布流程
- 15.DEMO：任务管理理 • • • 基本任务 • dev、build、lint、 test 可视化分析 • bundle 分析 可扩展
- 16.DEMO：配置管理理 • • • 配置可视化，免去⽂文档 查询 基于 antd@4 可扩展 • umi-plugin-react
- 17.DEMO：资产管理理 1 • • • 区块和模板 • antd 的 400 多个 DEMO • antd-pro 的数⼗十个模 板 • umi 官⽅方，可提交 ⼀一键添加到项⽬目 可扩展 • 更更多区块和模板数据 源
- 18.DEMO：资产管理理 2 • • 新⻚页⾯面创建流程 • 空⻚页⾯面模板 • 添加布局 • 添加区块 运⾏行行态能⼒力力 • 通过 Mini ⽓气泡添加 资产
- 19.Umi UI 使⽤用路路径
- 20.优势和挑战 • • 优势 • 框架绑定 • 插件体系 • 运⾏行行态能⼒力力 挑战 • ⽤用户习惯 • ⾯面向未来，价值容 易易被质疑
- 21.功能矩阵 联调 组 件⽂文件定 位 部署 发布 本地 开发 Dashboard 流程 创建 资产 市场 场景 市场 运⾏行行态 能⼒力力 数据 管理理 体验和 提效 Web Terminal 标 准组件配 置 配置 管理理 任务 管理理 编译态 同步 区块 添加
- 22.原理理解析
- 23.架构⼤大图 • • • • 所有操作反馈到⽤用户代码 插件分客户端和服务端 web socket 通讯 Mini ⽓气泡
- 24.插件体系 • Umi 插件体系中的⼀一环 • 可能性、⽣生命⼒力力、想象⼒力力 • 为现有的⼏几百个插件提供可视化 • • • 能⼒力力 插件三态 • 编译态 • 运⾏行行态 • 编辑态 不不要担⼼心没⼈人贡献⽽而不不提供插件能⼒力力 前后端的插件体系 • CLIENT + SERVER
- 25.插件体系 • • • Umi UI 本身的实现由插件构成 每个区域均可扩展 • 侧边栏 • 标题、快捷操作区 • 底部状态栏 内容区 • Dashboard 可扩展 • 配置⾥里里可扩展新的配置 • 任务⾥里里可扩展新的任务 • 资产⾥里里可扩展新的数据源
- 26.类微前端的实现 • 特征 • ⼀一个功能⼀一个 npm 包 • 发布节奏不不⼀一致 • 微前端变种实现 • 扩展能⼒力力，不不仅 • JS 沙箱和 CSS 隔离不不重要，约 定即可 • ⽀支持 dva model 的注册
- 27.运⾏行行态能⼒力力：资产添加 • • 多种添加⽅方式 • 独⽴立界⾯面添加 • 运⾏行行态添加 • 编辑器器拖⼊入 • ... 运⾏行行态添加 • 更更直观、所⻅见即所得
- 28.运⾏行行态能⼒力力：资产添加 • • • 实现原理理 • webpack 编译态和服务端两 份相同逻辑的 AST 解析 • BABEL • 接⼝口调⽤用 • 有趣的边界条件处理理 进阶 • 布局区块 • 撤销、重做 有⼀一定侵⼊入性 • 灰度开启
- 29.破局
- 30.开发者的时间都去哪了了？ • • 对症下药 • 流程 20% • 创建、联调、部署、发布、... • 本地开发 • 组件使⽤用和业务组件开发 40% • 遇到某个交互场景怎么解决 30% • 其他 10% • 和产品经理理扯⽪皮、... 解决 70% 的那部分 10% 20% 30% 40% 流程 组件相关 交互场景 其他
- 31.资产市场 • • • • • 约 40% 的开发者时间 资产市场构成 • 组件、业务组件、区块、模板 组件的分类 区块和模板的重要性 从（设计师、前端）⽣生产到消费（前 端）
- 32.资产市场做成的关键 • • • 资产覆盖率 • ⾃自上⽽而下 • 80%+ 模板和区块的质量量 • 开发者是否愿意把资产市场⾥里里的代码 添加到他的项⽬目⾥里里 ⽣生产和消费流程 • ⽣生产⾛走 father，消费⾛走 umi ui • 设计稿编号
- 33.场景市场 • • • • • • • 约 20% 的开发者时间 解决在交互层遇到⼀一个场景该如何 做的问题 新概念 为啥重要？ 分类和举例例 沉淀⽅方式 TODO • 图，分类和构成
- 34.场景市场 • 请求相关 • 并⾏行行、串串⾏行行、⾃自动依赖处理理 • 订阅模式 • Debounce、Throttled • 缓存 • Stale-While-Revalidate 模式 • Race 请求 • 取消、重试 • • 交互相关 • CURD • 分⻚页 • load more、下拉刷新 • 乐观更更新 • ⻚页⾯面状态和URL 同步（单双向） • 滚动状态保存 • 延迟加载（图⽚片、内容） ...
- 35.理理想的项⽬目开 发流程
- 36.强约束的垂直领域框架 • • • 思考：蚂蚁前端如何写中台代码？ • 个性化 vs. ⾼高效 痛点 • 事多⼈人少，不不够⾼高效 • 样板代码多，不不够简单 解法 • 强约束、⼀一致性、不不给选择、⾼高效 • 配置化、约定化 • 不不仅写地少，还要写地好
- 37.强约束，不不给选择 • • • • • • • • • • • React 框架 TypeScript Less + CSS Modules Eslint + Prettier + 固定配置 固定的数据流⽅方案，不不允许使⽤用其他数据流⽅方案 固定的 babel 插件 固定的 webpack 配置 Jest + Enzyme 框架版本不不允许锁定，^ 前缀必须有 主要依赖不不允许⾃自⾏行行依赖版本，⽐比如 tech-ui、 antd ...
- 38.配置化 • • • 功能配置化，覆盖 • 不不仅是框架功能，还有 UI 界⾯面 • 路路由、布局、菜单、导航、 ⾯面包屑、权限、请求、埋 点、出错处理理、... 写最少的代码，做最多的配置 只管 Page 组件 • 有点像写⼩小程序? LOGO 导航 菜单 ⻚页⾯面区
- 39.约定化 • • • • 功能覆盖 • 国际化、数据流、MOCK、⽬目录结构、404、 权限策略略、Service、配置⽂文件、... MAGIC！（⿊黑盒） • 不不知道为啥就能跑起来了了 只能这么写 框架 + AST
- 40.约定化
- 41.数据流 • • • 痛点 • dva 学习成本⾼高（Hooks 学习成 本更更⾼高？），样板代码多，TS ⽀支持不不好 • hooks 是趋势 解法 • 基于 hooks 的极简数据流 • 通过框架做约定和简化 • 定义基于 hooks，使⽤用通过 useModal(namespace) 价值
- 42.权限 • • • 痛点 • 没有统⼀一的权限⽅方案 解法 • 基于 hooks • 打通路路由，路路由⾥里里通过配置定义 权限 • 在 access.ts ⾥里里定义、通过 useAccess 使⽤用 价值
- 43.强约束的垂直领域框架 + Umi UI • • 约束、配置、约定 • 带来更更多规则，更更多可能性 • ⽅方便便解析和可视化 • ⽐比如： • locales 下的国际化⽂文件 • models 下的数据流⽂文件 • access.ts ⾥里里定义的权限规则 项⽬目⼤大图
- 44.展望和未来
- 45.三条路路 • • • VSCode 插件 基于 VSCode 封 IDE 命令⾏行行辅助（现状）
- 46.未来 • • • • • 专注提效 • 资产市场、场景市场 闭环 • 启动器器，告别命令⾏行行 更更多运⾏行行态能⼒力力 ⽣生态（基于插件） • 想象空间 不不可替代的功能 • 做命令⾏行行做不不到的 • e.g. postwoman
- 47.总结 • • • • • 搭建虽好，写代码更更佳 我们的优势和挑战，包含框架、插件化、运⾏行行态能⼒力力 插件化和类微前端的架构⽅方式 新事物需要破局点，破局点来⾃自对开发者时间的探索 未来三条路路的艰难抉择
- 48.
- 49.
- 50.THANKS THANKS！ THANKS！
