低代码如何解决B端复杂场景

1. 低代码如何解决B端复杂场景分享人 – 丁延强部门： 58-HBG-商家前端技术部日期：2022年12月06日 www.58.com

2. 个人观点低码覆盖范围广、灵活度高，助力团队提效的持续性会更好 (做产品矩阵，而不是做孤岛系统；做航母平台，而不是做单一工具) 这个观点的来源是结合团队的业务现状，业务场景不仅仅是表单、列表、图表，更多的是相互组合，以及相互组合带来复杂度

3. 对齐对B端复杂度的理解 1个表单页 I .业务逻辑复杂（3个特点）组件节点多、嵌套层次深 a. b. c. d. e. 业务接口31个用例100+个第三方JS 18个、弹窗12种形式埋点50个逻辑联动丰富触发条件多样性、展现效果的多样性

4. 项目介绍设计方案技术难点未来规划

5. PART 1 项目介绍

6. 项目背景现状：产业化升级带来的各类B 端产品需求激增，对前端资源的依赖达到了一个比较高的程度，资源上容易出现瓶颈，影响业务快速迭代，需要改变当前的作业方式，来解放前端生产力破局： 1. 职责分担，降低前端技术门槛，非前端可参与页面开发，工作转移 2. 场景复用，固定场景配置优先，复杂场景少量开发，减少重复工作 3. 协同开发，提升线上协同占比，减少研发链路，降低沟通成本结论：需要适配房产B端业务的低代码线上协作平台破局低代码线上协同

7. B端低码思考绝大部分景覆盖如何选择？提效20% 提效50% 特定场景(5人) 仅新项目可用顶层设计要整体提效弃选择，要全部大部分场景(50人) 提效20% 提效50% 特定场景高提效大部分项目可用大部分场景(50人) 全部项目可用选择全部决策因素： 1. 2. 3. 4. 业务场景非常丰富有大量存量项目先特定再全部场景改方案风险很高先全部再特定场景则顺理成章

8. B端低码思考如何大部分场景覆盖？传统开发低码开发 30% 10% 100% 自定义能力二次开发(持续) 落地 60% 平台能力 1. 可视化配置 2. 组件联动 1. 自定义组件开发 2. 线上JS编码 1. 补充低码能力的缺失协作开发逻辑编排增加覆盖场景补充能力缺失覆盖更多场景多角色参与组件联动支持接入物料二次开发存量项目落地

9. 技术调研结论：功能全的系统，使用成本高；使用成本低的，场景比较单一，和业务匹配度不高市场上低代码系统，基本都无法完全满足要求，需要自己造轮子平台定位特点二次编码能力协同开发存量物料接入逻辑编排存量项目落地 Mendix Lowcode 全栈平台覆盖B&C端功能强大、生态完整、成本高且收费 ✔ ✔ ❌ ✔ ❌ ✔ ✔ ❌ ❌ ❌ 明道云 vs 轻流vs 宜搭 APICloud Appsmith vs Nocode/Lowcode一多流程、一站式站式平台多场景、模板丰富、构建B端应用收费 Lowcode 一站式平台构建C端应用跨端能力、跨框架能力、不适合B端 ✔ ✔ ❌ ❌ ❌ 全栈低码操作简单生态完整开源 ✔ ✔ ❌ ✔ ❌ 倾向特定业务场景更符合特定业务 ✔ ❌ ❌ ❌ ❌ PagePlug 集团内: 其他

10. PART 2 方案设计 1. 功能设计 2. 流程设计 3. 架构设计

11. 4 功能设计应用管理中心项目维度集中管理提供测试、部署能力 1 5 物料中心平台服务组件、页面模板集中控制组件库导入&更新模板版本管理 2 设计器可视化拖拽可视化逻辑编排线上JS逻辑补充数据存储、路由&接口服务权限控制等 3 DSL+解析引擎

12. 项目展示

13. 开发流程设计简单模式新建项目（应用管理中心）产品经理物料选择（组件库、区块、模板）页面设计应用设置（布局、需求描述、标记）（主题、应用布局、菜单）迭代开发信息流转（多个分支、多人协作）标准模式 LowCode 创建低码项目开发人员创建分支选择模板预览&发布（可视化搭建、业务逻辑编写）（Mock数据、流程部署）（单人操作、配置为主）物料流通二次开发专业前端可视化搭建 Schema文件开发组件源码解析源码物料：组件、区块、模板（生成源码组件）（生成低码物料）低码物料：组件、区块、模板物料中心 DSL生成代码应用源码

14. 开发流程对比两大优点：第一，能避免多次线下沟通，沟通线上完成；第二，缩短开发周期，加快需求的交付速度。

15. 当页标题架构设计

16. PART 3 技术难点 • 如何支持组件逻辑联动？ • 如何存量项目落地&持续开发？ • 如何接入第三方组件库？

17. 组件逻辑联动（描述能力） Page 页面 Form 表单 Field 组件 Field 组件 Field 组件 DSL 解析器结构化描述描述数据解析

18. 当页标题 DSL基本原则：协议驱动 1.输入框Source 布局描述逻辑描述 2.输入框Target 3. Source等于123时Target

19. 存量项目落地&持续开发方案的核心是让低码开发的产物和传统开发的JS文件做解耦二次开发低码开发页面表单物料基础物料业务组件库A 组件组件联动业务组件库B 自定义组件物料补充能力组件开发持续开发低码JS逻辑补充逻辑补充能力低码方式业务组件组件组件 DSL文件 Jsonschema锁定 ? model-parser 拓展能力 1. 上下文环境 2. 状态数据管理 3. 生命周期函数 4. 事件钩子传统开发二次编码 JS逻辑补充逻辑传统方式

20. 当页标题锁定DSL 本地编码配置信息

21. 组件库接入物料中心原子组件库(功能) 组件A 复合组件库(业务) 组件AB 组件B 组件C 组件挂载注册匹配默认属性组件BC 注册属性匹配最外层 Props设置 model-component-library.json 接入配置文件已注册组件默认属性 + 自定义属性

22. 配置文件描述： 1. 组件库及组件属性信息 2. 组件属性设计器属性的匹配关系

23. 当页标题 ·

24. 落地效果基础组件 58 目前已落地 20+ 个项目业务组件库 5 ，组件 80 实际需求 89 个产出页面 120+ 团队B端新页面可落地80+% 总体提效20-30% 2.5 17% 2 1.5 2 1.5 1 83% 0.5 0 常规页面没落地页面已落地页面传统开发墨斗开发特点场景90% 45 40 35 30 25 20 15 10 5 0 40 4 30个页面前端工作量传统开发墨斗开发

25. 总结低码覆盖范围广、灵活度高，助力团队提效的持续性会更好 (做产品矩阵，而不是做孤岛系统；做航母平台，而不是做单一工具) 第三方组件接入低码逻辑编排 &JS补充与存量结合 &持续开发验证了两个问题：第一，低代码应用在复杂场景的方案是可行的第二，存量物料可接入低码体系，且低码对团队开发是有提效效果的

26. PART 4 未来规划

27. 后续规划体验打磨角色匹配功能：根据角色定位，简化对应操作，降低学习成本交互优化：不断探索更合理的体验功能&物料建设丰富功能：结合落地反馈，补充功能维度的缺失场景物料沉淀：继续沉淀更多场景化组件和模板，进一步降低0-1搭建页面成本应用独立性拓展：提供应用独立部署以及更丰富的自定义能力，提高项目落地的灵活度落地推广收集反馈意⻅：结合落地反馈，不断优化

28. 谢谢