如何设计实现中后台搭建系统 - Paas 服务

如果无法正常显示，请先停止浏览器的去广告插件。

1. 如何设计实现中后台搭建PaaS平台阿⾥里里巴巴 - 淘系技术部 - ⻜飞冰 - iceluna Created By 樊健辉(⽉月⻜飞) 2020.03.20

2. 个⼈人介绍樊健辉（花名：⽉月⻜飞）创业 • 阿⾥里里前端技术专家 • ⻜飞冰搭建产品iceluna创始⼈人 • 集团中后台搭建协议标准规范负责⼈人 • ⼊入职7年年，带领营销中后台团队，贴合业务探索中后台搭建平台建设聚划算 2013 天猫 2016 PC详情⽆无线详情淘宝 2019 营销玩法团队TL 玩法、互动狂欢城现在营销中后台团队TL 中后台业务/Iceluna

3. 话题介绍前端搞搭建⾯面向运营⾯面向研发可视化配置低代码开发 1 Iceluna产品⽆无线⻚页⾯面搭建 h5/Rax/⼩小程序中后台系统搭建⽆无线模块搭建 2 PaaS平台 no-code low-code

4. 分享⼤大纲 1. iceluna产品介绍 2. iceluna架构设计 3. 中后台搭建基础设施建设 4. 提供搭建服务的PaaS平台建设 5. 总结&展望

5. 1.0 产品介绍

6. 1.1 产品背景 ❖ 中后台技术之殇业务量量⼤大，前端紧缺，⼤大量量系统依赖后端/外包/isv负责研发，由于前端⼯工程环境复杂，技术迭代快，⻔门槛⾼高，在效率/质量量/体验/可维护性等⽅方⾯面存在较多问题，对于如何赋能？如何改善协作模式？传统源码模式已不不能满⾜足业务发展的诉求。 ❖ 低代码开发低代码开发模式的崛起据Forrester市场调研结果，通过低代码开发模式可带来数倍甚⾄至10 倍以上研发效率的提升。对于如何提效？通过低代码搭建中后台系统，给了了我们⾜足够⼤大的效率提升想象空间。 ❖ 扩展能⼒力力搭建泛滥后的收敛和统⼀一阿⾥里里内部各BU针对不不同业务场景构建有数⼗十个低代码搭建产品，投⼊入成本巨⼤大，能⼒力力完善程度不不⼀一，存在⼤大量量的底层能⼒力力重复建设和低⽔水平能⼒力力竞争。如何收敛和统⼀一？完善搭建基础设施，统⼀一提供搭建服务的运⾏行行和开发环境，势在必⾏行行。可视化配置⽆无需编码完成中后台系统常⽤用功能少量量编码扩张更更多功能

7. 1.2 产品定位 ❖ iceluna的三层定位&⽬目标： 1. 由淘系技术部研发，⾯面向全体研发⼈人员可⽤用改变⽣生产关系，提升⽣生产⼒力力赋能的中后台通⽤用搭建产品。 2. 集前端应⽤用⼯工程创建、开发、调试、发布全降低研发成本链路路⼀一体化的低代码开发平台。 3. 建设搭建基础设施，基于标准搭建协议⽣生产搭建物料料，为各业务场景提供搭建服务的运⾏行行和开发环境的PaaS平台。孵化领域产品提效搭建⽣生态

8. 1.3 产品现状 ❖ 赋能：活跃⽤用户数1000+，包含前端、后端、外包、测试测试外包 10% 7% ❖ 提效：应⽤用440+，⻚页⾯面6000+，覆盖阿⾥里里多个部⻔门中后台应⽤用研发，  ⼈人均研发效能提升200%左右（霍尔斯特德软件复杂度算法模型测算） ❖ 搭建⽣生态：提供完备的搭建基础设施服务，已孵化8+业务场景定制的搭建编辑器器后端 44% 前端 38%

9. 2.0 架构设计搭建产品中后台通⽤用搭建图表搭建 PaaS 服务表单搭建 Rax搭建⼩小程序搭建智能搭建审批流搭建研发中⼼心开箱即⽤用的PaaS平台服务站点中⼼心插件⽣生态低代码搭建编辑器器搭建基础设施（⻣骨架、插件、控件，编排模块，渲染模块…）后端服务物料料⽣生态组件规范⼯工程脚⼿手架 GUI⼯工具应⽤用中⼼心物料料中⼼心中后台搭建描述协议 Schema 视觉规范 … CLI命令⾏行行 nodejs (midway) 国际化数据中⼼心

10. 2.1 功能模块设计搭建基础设施基础建设编辑器器内核搭建协议⻣骨架能⼒力力视觉规范平台服务插件⽣生态研发中⼼心物料料⽣生态 PaaS能⼒力力站点中⼼心应⽤用中⼼心数据中⼼心模型驱动组件搭建编辑器器定制 Portal⾸首⻚页变更更管理理站点数据主题定制图像识别研区块搭建多⼈人协作站点管理理⻚页⾯面管理理应⽤用数据组件规范插件能⼒力力数据驱动模版搭建多分⽀支开发应⽤用管理理低代码组件⽤用户数据⼯工程脚⼿手架控件能⼒力力逻辑编排创建实例例代码回滚组件中⼼心 NPM组件效能衡量量命令⾏行行⼯工具编排模块流程编排创建组件库云端构建区块中⼼心导航设置物料料数据 GUI⼯工具渲染模块⼤大纲树物料料发布发布/存储模板中⼼心发布管理理性能数据 … 国际化⽀支持物料料⾯面板物料料共享物料料托管⽂文档中⼼心 … … … 属性⾯面板 … Socket通信 … 事件⾯面板样式⾯面板 … 发模式升级 Gitlab存储 … ⻩黄⾊色模块为接下来重点讲解内容

11. 2.2 研发流程设计站点管理理员 (前端负责⼈人) 站点基本信息应⽤用默认配置编辑器器默认配置（名称、部⻔门、logo等）（gitlab组、埋点、主题等）（主题、⾯面板插件、快捷键等）物料料默认配置（组件库、区块库、模板库等）基线迭代应⽤用开发者 (前端/后端/外包/ISV) 页面创建应用物料发布调试低代码搭建创建分支 1. 应用基本信息录入 1. 多分支管理 1. 界面可视化布局（WYSIWYG） 1. TNT跨域调试方案 1. 应用、组件、编辑器发布能力 2. 3. Gitlab 项目打通 IDE环境生成 2. 多人协作 2. 3. 4. 5. 样式属性配置，数据绑定业务逻辑代码编写低代码及NPM组件生态互通区块、模板物料互通协议 2. 数据Mock 2. 3. 4. 开发环境去中心化组件依赖分析版本控制&CDN发布

12. 3.0 中后台搭建基础设施建设物料料中⼼心（fusion）物料料研发源码物料料《物料料协议》标准⼯工程规范源码物料料：源码组件源码区块源码模版搭建物料料：搭建组件搭建区块搭建模版专业前端物料料流通源码解析低代码搭建编辑器器（iceluna）搭建组件描述⽂文件《搭建组件描述协议》源码物料料低成本接⼊入搭建物料料编排模块⻣骨架主题渲染模块插件控件物料料丰富度沙箱隔离调试能⼒力力多端适配 ❖ 搭建基础设施⽬目标： 1. 2. 3. 4. 5. 6. 搭建描述协议 - 标准规范低代码编辑器器 - 开发⽣生态低代码编辑器器 - 多端适配低代码编辑器器 - 核⼼心能⼒力力低代码编辑器器 - 物料料⽣生态协同模式变⾰革可定制可扩展开发⽣生态前端/后端/外包/ISV 《搭建描述协议Schema》 icejs+ 互转能⼒力力⻚页⾯面 Schema 导出源码线上React渲染

13. 3.1 搭建描述协议 - 标准规范 - Schema ❖ 版本化、语义化、渐进性描述协议有版本控制，语义清晰，简明易易懂，可读性强；从⼩小往⼤大渐进性的描述组件、区块、⻚页⾯面、应⽤用，实现递归嵌套 ❖ 不不引⼊入新概念、可与标准源码互转不不引⼊入新的语法概念，代码部分纯js语法，降低上⼿手⻔门槛；明确每⼀一个属性与源码对应的转换关系，可⽣生成跟⼿手写⽆无差异的⾼高质量量标准源代码。 ❖ 可扩展、可流通、⾯面向多端⽀支持第三⽅方npm包引⼊入，增强协议描述能⼒力力的扩展性。产物能在不不同搭建产品中流通，不不涉及任何私域数据存储。不不仅能⾯面向React，还能⾯面向⼩小程序、vue、Rax等移动端技术栈。 ❖ 国际化⽀支持

14. 3.2 低代码编辑器器 - 开发⽣生态搭建编辑器器框架 iceluna-ide ⻣骨架 skeleton 主题 theme 功能插件 addon … 编排模块 iceluna-canvas 多设计模式 designMode 物料料增删 materialAdd/Remove 物料料选中 materialSelect 物料料拖拽 materialDnd 消息处理理 msgManage 快捷键注册 shortCuts 下钻编辑 drillDownEdit 浮动⼯工具条定制 toolbar 渲染模块 iceluna-engine React虚拟DOM树构造 virtualDOMCreate 循环/条件渲染处理理 loop/condition 组件属性解析 propsParse 表达式解析 expressionsParse 异步数据流处理理 dataSource ⽣生命周期 lifeCycles ⾃自定义⽅方法构造 methods 状态管理理 state 编辑器器内核 iceluna-core 消息通讯状态管理理配置解析⻣骨架加载插件注册编辑器器初始化国际化 ❖ 架构分层由⾥里里⽽而外、⾃自下⽽而上的分层实现可根据业务场景定制单层实现 ❖ 模块化解耦均为独⽴立npm包, 原⼦子化服务能⼒力力低代码编辑器器整体开放编排引擎独⽴立开放渲染引擎独⽴立开放 ❖ 扩展能⼒力力 & 开发⽣生态提供开发脚⼿手架 & 命令⾏行行⼯工具⻣骨架可定制、可配置插件可定制、可配置控件可定制

15. 3.3 低代码编辑器器 - 多端适配 … 中后台搭建数据报表搭建消费者端搭建淘宝⼩小程序搭建⽀支持不不同技术体系的搭建产品低代码编辑器器技术体系适配层Adapter React渲染模块 Vue渲染模块 Rax渲染模块渲染模块内核⼩小程序渲染模块 …

16. 3.4 低代码编辑器器 - 核⼼心能⼒力力 ❖ 开箱即⽤用提供全链路路⼀一体化的搭建服务⽀支持定制搭建编辑器器⽀支持定制业务主题⻛风格⽀支持多⼈人协作⽀支持多分⽀支并⾏行行开发 <iframe /> 画布区域 ❖ 安全沙箱隔离编辑⻚页⾯面与编辑器器iframe隔离，互不不⼲干扰⽀支持编辑应⽤用与编辑器器独⽴立主题设定 ❖ 实时调试能⼒力力画布渲染真实runtime 画布事件&数据实时⽣生效 & 实时调试

17. 3.5 低代码编辑器器 - 物料料⽣生态物料料中⼼心（托管）搭建模版： Fusion Pro 搭建区块：表单搭建组件： AntD Pro 列列表 Fusion组件详情 Antd组件 ICE Pro 图表图表组件业务区块 ❖ 物料料低成本接⼊入低代码搭建编辑器器（⽣生产）视觉规范区块搭建模版搭建物料料基础规范组件实例例搭建物料料规范⽀支持React组件npm包接⼊入保持功能完整的属性配置能⼒力力具备有良好的编辑体验 ❖ 搭建物料料流通建设搭建物料料市场形成类似iconfont的⽣生态机制 npm社区组件搭建组件组件库国际化规范接⼊入源码组件统⼀一标准，规范⽣生产提升搭建物料料的可复⽤用性业务组件物料料流通组件搭建 ❖ 统⼀一搭建物料料描述协议功能组件

18. 4.0 提供搭建服务的PaaS平台建设 ❖ PaaS定位：平台即服务 ( Platform-as-a-Service )，把搭建编辑器器的运⾏行行和开发环境作为⼀一种服务，提供给不不同业务场景下的搭建产品。搭建产品 PaaS 服务搭建基础设施中后台通⽤用搭建编辑器器定制效能数据图表搭建表单搭建云端构建/发布/存储 Socket通信 Gitlab存储⼩小程序搭建 Rax搭建多⼈人协作多分⽀支开发物料料托管低代码搭建编辑器器（⻣骨架、插件、控件，编排模块，渲染模块…）智能搭建代码回滚审批流搭建 … 提供运⾏行行环境 … 插件⽣生态搭建物料料⽣生态提供开发环境

19. 4.1 搭建编辑器器定制服务 ❖ 提供给⽤用户以站点维度定制编辑器器，按照编辑器器规范进⾏行行配置，云构建⽣生成。云构建

20. 4.1.1 搭建编辑器器定制 - ⻣骨架定制 ❖ 编辑器器⻣骨架⽀支持布局定制，满⾜足不不同场景编辑器器布局诉求

21. 4.1.2 搭建编辑器器定制 - 主题定制 ❖ 借助基础物料料库主题包能⼒力力，提供编辑器器主题定制能⼒力力

22. 4.1.3 搭建编辑器器定制 - 插件定制 ❖ 通过插件化机制和开发脚⼿手架，实现编辑器器功能解耦，可插拔，可定制。 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. logo 搭建应⽤用信息⻚页⾯面切换搭建协作者设计模式切换前进&后退历史记录编辑器器刷新保存预览发布组件树组件库区块库⻚页⾯面schema 应⽤用样式应⽤用公共函数应⽤用全局常量量应⽤用信息配置画布配置⽂文档样式配置属性配置事件配置数据配置画布

23. 4.2 云端构建/发布/DB存储服务云构建服务是iceluna低代码开发平台核⼼心链路路之⼀一，核⼼心将静态离散的schema⽂文件或配置⽂文件，转换成可运⾏行行云构建服务是iceluna低代码开发平台核心链路之一，核心是将静态离散的schema文件转换成可运行的应用（组的应⽤用（组件）程序代码，并提供Gitlab多分⽀支操作、程序构建及CDN、NPM部署能⼒力力。⽬目前⽀支持应⽤用（⽇日常/线件）程序代码，并提供Gitlab多分支操作、程序构建及CDN、NPM部署能力。目前支持应用（日常/线上）、组上）、组件（lowCode/ProCode）、编辑器器（画布/框架）3⼤大功能6种形态构建能⼒力力。件（LowCode/ProCode）、编辑器（画布/框架）3大功能6种形态构建能力。 DB 应用页面 Schema Git存储 + 组件 Schema DB存储 Iceluna iceluna 云构建云构建服务组件 NPM仓库 CDN 编辑器编辑器器配置编辑器器资源包云构建服务版本发布 CDN推送

24. 4.2.1 云端构建架构图 ❖ 去中⼼心化应⽤用层编辑器器1 编辑器器2 通信层编辑器器3 编辑器器4 … 编辑器器主题定制组件扩展版本化控制 websocket双向通信 ❖ ⼀一键发布部署编辑器器构建（去中⼼心化）运⾏行行时数据层应⽤用/组件构建（⼀一键发布部署）克隆隆⼯工程依赖分析权限管控克隆隆⼯工程主⼲干合并⽂文件⽣生成 Gitlab提交冲突解决依赖分析 npm包缓存依赖安装 webpack构建⽂文件⽣生成 Gitlab提交依赖安装 CDN发布版本⽣生成 webpack构建 CDN发布版本⽣生成 DB Gitlab CDN Tair ODPS 权限管控依赖分析合并主⼲干&冲突解决 webpack构建 CDN发布部署 ❖ 多系统打通 Gitlab存储/回滚 Tair构建并发锁 ODPS构建⽇日志

25. 4.3 多⼈人协作服务 ❖ iceluna多⼈人协同原理理：socket连接 + ⽂文件锁（⻚页⾯面锁 & 组件锁 & 公共⽂文件锁） socket与服务器器建⽴立连接访问⽂文件（尝试获取锁）返回（锁状态） Client 存储以⻚页⾯面id为key的⽤用户信息获取⻚页⾯面⽂文件id为Key是否有⽤用户在编辑中 Server socket连接⼼心跳保活 Tair 主动失效的分布式乐观锁⽅方案优点缺点典型案例例编辑锁避免覆盖实现简单⾮非实时实时要求不不⾼高 WIKI系统 diff-patch 多⼈人同时编辑实现相对简单⾮非实时易易冲突 GNU diff-patch  Myer 算法实时编辑实现较复杂 Google Docs ⼤大规模多⼈人协同实现复杂钉钉⽂文档 OT技术 Operational Transformation 分布式OT Operational Transformation

26. 4.4 多分⽀支并⾏行行 ❖ 多分⽀支开发⽅方案： 1. 执⾏行行发布流程 2. 合并主⼲干代码开始 ❖ 新建MR master->Branch 发布流程 - 冲突解决 3. 冲突判断 4. 冲突解决 5. 基线同步(GitToDB) 判断是否有变化 6. 冲突解决流程结束是 Accept Merge 判断是否成功是冲突解决否否冲突解决状态结束 GitToDB

27. 4.5 代码回滚服务离散数据 Git提交（DBToGit）保存操作⽤用户应⽤用搭建应⽤用源码⼯工程数据库 Git提交（DBToGit） 1. ⽤用户在编辑器器进⾏行行应⽤用搭建 2. 保存操作执⾏行行DB⼊入库 3. ⽤用户进⾏行行发布(⽇日常/线上)操作 4. 将会通过读DB⽣生成⽂文件，并进⾏行行Git提交基线同步(GitToDB) Git仓库基线同步(GitToDB) 1. ⽤用户执⾏行行发布（⽇日常/线上）操作 2. 执⾏行行主⼲干合并流程 3. 如果主⼲干代码有更更新，执⾏行行GitToDB 4. 通过⽂文件读进⾏行行DB回写可指定任意commit hash进⾏行行编辑器器应⽤用代码回滚服务

28. 4.6 搭建效能衡量量体系衡量量标准：霍尔斯特德软件复杂度测量量算法模型 Halstead complexity measures 计算公式：研发效能 = 预计开发时⻓长/实际开发时⻓长霍尔斯特德复杂度模型 + 可视化代码操作1 操作n 实际开发时⻓长 ❌ d1 d2 预计开发时⻓长 d3 dn 实际开发时⻓长 = d1 + d2 + … + dn

29. 5.0 总结&展望前路路总结：中后台通⽤用搭建产品建设成本超⾼高，能很好的解决赋能&协作的问题，但研发提效未达数倍甚⾄至10倍的预期，需要往模型驱动、智能搭建等nocode新研发模式升级，或建设领域搭建产品矩阵来达成数倍提效的⽬目标。展望未来：致⼒力力于将iceluna打造为中后台领域的 hpaPaaS 平台（超⾼高⽣生产⼒力力平台）如果志同道合，期待的你的加⼊入！

30. 团队⻛风采&招聘淘系技术部 - ⾏行行业⼯工作台团队 - 招聘请微信扫码联系！

31. Thanks!

32.