可视化辅助编程在蚂蚁的探索之路.pptx

1、可视化辅助编程在蚂蚁的探索之路录写代码的优势可视化辅助编程在蚂蚁原理解析破局展望和未来写代码的优势可视化搭建越来越多代码（NO CODE）和低代码（LOW CODE）阿截 2019.12，内部有 30 多个搭建系统模块搭建规范业界Mendix、OutSystemPowerAppsBubble.IOScratch（童编程）、Google BlocklySwift UI云凤蝶（蚂蚁）7 Billion Human等（游戏）所即所得增删改查，倍提效站式研发可视化搭建的优势专业槛低技术收敛写代码的优势所即所得精确表达，极增删改查，倍提效站式研发做产品，增值业务部署平台兼容专业槛低和业务起成新技术的壤技

2、术收敛我全要既要.要.ProCode + VAPVA P：Visual Assistive Programming以代码为基础，VA P 的所有操作最终作于代码以命令为原型，VA P 是命令功能的可视化形式社区的先者Vu e UIAngular ConsoleIceworks3GuppyMajestic（JEST 可视化具）Webpack Dashboard.ProCode 的痛点档链路槛命令不够友好站式研发，流程割裂研发效率不够.可视化辅助编程在蚂蚁可视化辅助编程在蚂蚁：Umi UI流程创建 - 本地开发 - 联调 - 部署 - 发布功能Dashboard基础配置管理、任务管理进阶资产市场、

3、数据管理功能闭环：Terminal运态能：Mini 泡.Umi UI 的配置管理界DEMO：创建项创建流程更新脚架具创建项安装依赖打开项出错重试内部单独的创建、部署和发布流程DEMO：任务管理基本任务dev、build、lint、test可视化分析分析bundle可扩展DEMO：配置管理配置可视化，免去档查询基于 antd4可扩展umi-plugin-reactDEMO：资产管理 1区块和模板antd的 400 多个DEMOantd-pro板的数个模umi官，可提交键添加到项可扩展更多区块和模板数据源DEMO：资产管理 2新创建流程空模板添加布局添加区块运态能通过 Mini 泡添加资产Umi

4、UI 使路径优势和挑战优势框架绑定插件体系运态能挑战户习惯向未来，价值容易被质疑功能矩阵组件件定位标准组件配置部署发布运态能联调本地开发数据管理编译态同步Dashboard流程区块添加配置管理体验和提效创建资产市场任务管理场景市场We bTerminal原理解析架构图所有操作反馈到户代码插件分客户端和服务端通讯web socketMini泡插件体系Umi插件体系中的环可能性、命、想象为现有的百个插件提供可视化能插件三态编译态运态编辑态不要担没贡献不提供插件能前后端的插件体系CLIENT + SERVER插件体系Umi UI每个区域均可扩展本身的实现由插件构成侧边栏标题、快捷操作区底部状态栏内容

5、区Dashboard可扩展配置可扩展新的配置任务可扩展新的任务资产可扩展新的数据源类微前端的实现特征个功能个 npm 包发布节奏不致微前端变种实现扩展能，不仅JS沙箱和 CSS 隔离不重要，约定即可持 dva model 的注册运态能：资产添加多种添加式独界添加运态添加编辑器拖.运态添加更直观、所即所得运态能：资产添加实现原理webpack编译态和服务端两份相同逻辑的 AST 解析BABEL接调有趣的边界条件处理进阶布局区块撤销、重做有定侵性灰度开启破局开发者的时间都去哪了？对症下药10%流程 20%创建、联调、部署、发布、.本地开发30%组件使和业务组件开发 40%遇到某个交互场景怎么解决

6、30%其他 10%和产品经理扯、.解决 70% 的那部分流程组件相关交互场景其他资产市场约 40% 的开发者时间资产市场构成组件、业务组件、区块、模板组件的分类区块和模板的重要性从（设计师、前端）产到消费（前端）资产市场做成的关键资产覆盖率上下80%+模板和区块的质量开发者是否愿意把资产市场的代码添加到他的项产和消费流程产 father，消费 umi ui设计稿编号场景市场约 20% 的开发者时间解决在交互层遇到个场景该如何做的问题新概念为啥重要？分类和举例沉淀式TODO图，分类和构成场景市场请求相关交互相关并、串、动依赖处理CURD分订阅模式Debounce缓存、下拉刷新、Throttled

7、load more乐观更新状态和URL 同步（单双向）滚动状态保存Stale-While-Revalidate请求模式Race取消、重试延迟加载（图、内容）.理想的项开发流程强约束的垂直领域框架思考：蚂蚁前端如何写中台代码？个性化 vs. 效痛点事多少，不够效样板代码多，不够简单解法强约束、致性、不给选择、效配置化、约定化不仅写地少，还要写地好强约束，不给选择React框架TypeScriptLess + CSS ModulesEslint + Prettier +固定配置固定的数据流案，不允许使其他数据流案固定的 babel 插件固定的 webpack 配置Jest + Enzyme框架版本

8、不允许锁定， 前缀必须有主要依赖不允许依赖版本，如 tech-ui、antd.配置化功能配置化，覆盖LOGO 导航不仅是框架功能，还有 UI界路由、布局、菜单、导航、包屑、权限、请求、埋点、出错处理、.菜单 区写最少的代码，做最多的配置只管 Page 组件有点像写程序?约定化功能覆盖国际化、数据流、MOCK、录结构、40权限策略、Service、配置件、.MAGIC！（盒）不知道为啥就能跑起来了只能这么写框架 + AST约定化数据流痛点dva学习成本（Hooks 学习成本更？），样板代码多，TS持不好是趋势hooks解法基于 hooks 的极简数据流通过框架做约定和简化定义基于 hooks，使

9、通过useModal(namespace)价值权限痛点没有统的权限案解法基于 hooks打通路由，路由通过配置定义权限在 access.ts 定义、通过useAccess 使价值强约束的垂直领域框架 + Umi UI约束、配置、约定带来更多规则，更多可能性便解析和可视化如：localesmodels下的国际化件下的数据流件定义的权限规则access.ts项图展望和未来三条路VSCode基于 VSCode 封 IDE命令辅助（现状）插件未来专注提效资产市场、场景市场闭环启动器，告别命令更多运态能态（基于插件）想象空间不可替代的功能做命令做不到的e.g. postwoman总结搭建虽好，写代码更佳我们的优势和挑战，包含框架、插件化、运态能插件化和类微前端的架构式新事物需要破局点，破局点来对开发者时间的探索未来三条路的艰难抉择