美团低代码方案的探索与实践

1. 美团低代码方案的探索与实践李勇美团前端开发

2.

3. 自我介绍百度 — 贴吧 2016 — 2018 负责贴吧智能版、PC版迭代美团 — 成都研发中心 2018 — 2021 负责外卖CRM相关系统研发主导项目WOLF，并成为公司公共服务李勇美团 — 医药技术部 2021 — 至今医药成都前端负责人，负责ERP系统、运营平台等

4. • 聊聊低代码 • 背景与思路 • WOLF平台的设计与实现 • 演进方向与规划

5. 先聊聊无代码高代码灵活性高灵活性低低代码⻔槛高 • 无代码更加适合垂直的场景⻔槛低 • 无代码的用户一般是非开发者无代码

6. 一些成功的无代码问卷成功的关键活动（易企秀）聚焦简单

7. 低代码的优势高代码灵活性高低代码⻔槛高灵活性低⻔槛低兼顾了灵活性和⻔槛，同时提升了效率无代码

8. 一些常⻅的低代码场景企业中后台数据领域

9. 低代码的用户是谁开发者前端开发提效、扩展性强后端开发/外包开发赋能、学习成本低

10. 思考如何做一个企业级的低代码开发平台（生态） • 聚焦领域，且这个领域的市场足够大 • 分⻆色，能够针对不同⻆色设计方案 • • 前端：强扩展性，能够满足不同技术栈、UI • 后端/外包：上手⻔槛低可共建，让更多的人参与进来

11. 更重要的事第一步：打开冰箱第二步：把大象放进去需要一个可执行的步骤第三步：关上冰箱⻔

12. • 聊聊低代码 • 背景与思路 • WOLF平台的设计与实现 • 演进方向与规划

13. 我们面对的场景业务给内部人员/合作商提供运营和管理工具 • 特征 • • • • 同质性高⻚面量大（500+）技能瓶颈（部分后端项目无FE）公司有很多部⻔跟我们类似思路设计针对中后台场景的低代码方案

14. 思路先做MVP版本，建设核心能力，再对外赋能低代码的核心 — 渲染引擎

15. 迭代路径开发框架/渲染引擎 • Low-Code • 服务前端开发 • 支撑现有业务低代码开发平台 • LCDP • 服务前后端/外包开发者 • 支撑多种业务生态链共创 • Ecology • 服务多种⻆色 • 多场景覆盖，生态闭环

16. • 聊聊低代码 • 背景与思路 • WOLF平台的设计与实现 • 简介 • 渲染引擎设计 • 低代码平台设计案例介绍 • • 演进方向与规划

17. 简介 WOLF是一个面向中后台的低代码开发平台特点高效率丰富物料、秒级发布、代码提示、… 强扩展组件扩展、渲染引擎扩展、多开发模式、… 稳定性前后端监控、版本绑定、端分离、… 阶段成果 150+团队 800+开发者 700+项目 3000+⻚面

18. 功能简介创建开发联调发布集成运营物料市场在线开发代理一键发布⻚面集成监控报警项目创建可视化开发接口调试跨环境发布应用集成自动打点⻚面创建本地开发组件联调回滚域名绑定流量分析 CLI工具组件开发 Mock 调试工具权限

19. 功能简介可视化搭建事件编排

20. 功能简介组件市场线上系统

21. • 聊聊低代码 • 背景与思路 • WOLF平台的设计与实现 • 简介 • 渲染引擎设计 • 低代码平台设计案例介绍 • • 演进方向与规划

22. 演进路径开发框架/渲染引擎 • Low-Code • 服务前端开发 • 支撑现有业务低代码开发平台 • LCDP • 服务前后端/外包开发者 • 支撑多种业务生态链共创 • Ecology • 服务多种⻆色 • 多场景覆盖，生态闭环

23. 什么是渲染引擎渲染引擎作用 Schema • 提供一个Schema规范 • 提供组件规范 • 提供核心：事件/联动/数据流 RenderEngine • 提供公共功能（utils、hooks） • 提供核心组件 Page/Component

24. WOLF渲染引擎的架构 • 易用性 • 性能 • 扩展性

25. 渲染引擎-易用性-场景抽象策略：将业务场景进行固化，兼顾通用性和易用性搜索区域批量操作区域数据展示区域分⻚区域

26. 渲染引擎-易用性-场景抽象设计思路：在一定限制条件下，做到可灵活配置

27. 渲染引擎-易用性-行为抽象父子行为优势 1. 父元素不用关心子元素位置 2. 子元素不用关心谁来处理事件模拟事件冒泡

28. 渲染引擎-易用性-行为抽象跨组件行为 1. Model动态注册到全局 2. 全局行为共享动态Model

29. 渲染引擎-易用性-行为抽象组合与分支行为原子行为（20+）通用行为 ajax、conﬁrm、.... 弹窗相关 dialog、close、… Form相关 submit、reset、… 组件间交互 reload、send、... 异步任务队列

30. 渲染引擎-性能背景部分场景对性能要求较高问题 1. 公共功能的抽取 2. 数据流更新导致重渲

31. 渲染引擎-性能-公共功能问题 HOC：会导致组件嵌套层次很多 Hooks：1. 限制函数组件 2. 逻辑没有减少常⻅的两种方案原因无法提前知道组件需要什么功能，导致把所有功能都包装在一起 HOC Hooks

32. 渲染引擎-性能-预处理解决方案预处理机制将属性转化为HOC 优势去掉无效逻辑

33. 渲染引擎-性能-数据处理方案分场景有效结合两种方案，追求易用性与性能的平衡。易用性能

34. 渲染引擎-性能-性能对比 1000个表单，并且还有联动的情况下，输入8个⻓度的中文，脚本执行时间 3 2.25 2.7秒 1.5 0.75 0 0.82秒开源方案A 开源方案B 0.51秒 WOLF

35. 渲染引擎-扩展性扩展场景 1. 我有自己UI组件规范，如何接入？规范扩展 2. 能支持移动端么？移动端适配 3. 定义的事件满足不了我的需求，如何自定义？自定义事件 4. 我只想用你的一个组件，不想整套使用 5. 我想扩展一个自定义组件 6. 我的组件想跟你的组件交互，如何解决？ 7. … 独立使用自定义组件组件交互

36. 渲染引擎-扩展性 1. UI库分离 2. 底层复用、上层扩展优势 1. 移动端适配 2. 多UI组件库 3. 核心DSL统一

37. 渲染引擎-扩展性方案 1. Model、UI分离 2. Model动态注入，全局共享（需要申明）优势 1. 全局状态/动作共享 2. 更方便扩展组件

38. Case-渲染引擎-扩展性举个例子在事件流程过程中，进行事件干预方案通过参数model、dispatch拿到任意组件状态和动作通过Promise的状态来等待、继续、中断事件流

39. • 聊聊低代码 • 背景与思路 • WOLF平台的设计与实现 • 简介 • 渲染引擎设计 • 低代码平台设计案例介绍 • • 演进方向与规划

40. 演进路径开发框架/渲染引擎低代码开发平台 • Low-Code • 服务前端开发 • 支撑现有业务 • LCDP • 服务前后端/外包开发者 • 支撑多种业务 • 前端⻔槛对后端/OD不友好 • 让开发者聚焦根本任务生态链共创 • Ecology • 服务多种⻆色 • 多场景覆盖，生态闭环

41. 整体架构 • 扩展性 • 易用性 • 稳定性 • 兼容性

42. 扩展性-组件扩展一个完整的开发环境，应具备哪些功能？项目文件管理 + 文本编辑器 + 交互式终端 + 项目脚手架 + 运行任务 + 调试器 + 工具插件 + …分支管理本地开发成本更低云IDE

43. 扩展性-组件扩展方案一本地开发，上传进行联调问题：不断上传 -> 测试 -> 上传？方案二本地起平台Server，模拟线上环境问题： 1. 有些状态很难模拟，比如域名 2. 无法保证线上线下一致性

44. 扩展性-组件扩展如何实现补丁式的组件开发体验？本地开发远程调试

45. 扩展性-组件扩展通过本地开发、远程调试，实现直接复用⻚面上下文 WOLF-Platform WOLF-CLI JSX Less … Page1 Compiler RenderEngine … DSL Custom-Component Plugin Context Page2 Server Event Center Module Module WebSocket Editor

46. 扩展性-渲染引擎扩展背景多部⻔规范不一致多部⻔技术栈不一致有部⻔已有渲染引擎兼容移动端平台支撑向上优势扩展任意渲染引擎技术栈无关移动端适配向下底层复用

47. 易用性-多开发模式开发模式针对不同⻆色和场景，设计更加适合的开发模式并且针对单项目可并存多种开发模式配置编辑（后端/前端）可视化编辑（后端/前端）本地开发（前端）

48. 易用性-本地开发本地开发要解决什么问题？可视化搭建对前端来说并不友好，尤其在面临较为复杂的场景时设计模式灵活协作文件结构、变量 Less、TS、VSCode Git

49. 易用性-本地开发本地开发架构设计本地开发，远程浏览本地开发优势满足易用性的同时，兼顾灵活性

50. 稳定性监控报警版本绑定端分离

51. 稳定性-版本绑定编译型编译配置⻚面1 解释型⻚面2 源码/⻚面⻚面3 Render V1 配置1 ⻚面4 Render V2 配置2 配置3 配置4

52. 稳定性-端分离方案平台分为管理端、预览端内网开发、外网浏览优势安全性提升 —> 内外网隔离稳定性提升 —> 独立服务，单独发版扩展性提升 —> 私有化部署

53. 兼容性-分场景兼容现状解决思路各种各样的系统，技术栈不一致，UI不一致分情况，做到应用级、⻚面级、组件级低代码应用级自定义菜单自定义域名微前端⻚面级自定义模板 JS-SDK 组件级 Iframe Npm包

54. 兼容性-微前端方案背景 1. 兼容老系统、老⻚面，完成系统的入口统一 2. 兼容不同渲染器或不同版本微前端容器子⻚面子⻚面子⻚面

55. • 聊聊低代码 • 背景与思路 • WOLF平台的设计与实现 • 简介 • 渲染引擎设计 • 低代码平台设计案例介绍 • • 演进方向与规划

56. 案例介绍-内部系统1 配置⻆色后端（赋能）核心技术点 CRUD、表单联动、图表展示、自定义菜单

57. 案例介绍-内部系统2 开发⻆色后端（赋能） + 外包（降本）核心技术点大表单（500+）、自定义菜单、多渲染引擎

58. 案例介绍-内部系统3 配置⻆色后端（赋能）+外包（降本）特色微前端容器、多开发模式、自定义组件

59. 案例介绍-内部系统4 配置⻆色前端（提效50%）特色⻚面级接入（自定义模板）、本地开发、大表单（500+）、移动端兼容

60. • 聊聊低代码 • 背景与思路 • WOLF平台的设计与实现 • 简介 • 渲染器设计 • 低代码平台设计案例介绍 • • 演进方向与规划

61. 生态链共创开发框架/渲染引擎 • Low-Code • 服务前端开发 • 支撑现有业务低代码开发平台 • LCDP • 服务前后端开发者 • 支撑多种业务生态链共创 • Ecology • 服务多种⻆色 • 多场景覆盖，生态闭环

62. 更多的开发者加入期望更多的开发者加入，基于同一套基础DSL DSL 官方渲染引擎（内部开源） React ARender-Antd ARender-Roo 其他渲染引擎 Vue React Vue Cheese Cell Wolﬁfy

63. 更多的⻆色加入 1. 打通底层物料体系，消除⻆色之间的Gap 2. 自动代码生成，减少静态代码重复编写

64. 跟后端打通思路 1. 利用元数据中心打通数据层 2. 利用流程与接口中心完成接口与流程定义 3. 自动生成前端代码

65. 支持更多垂直场景想要一种方案满足所有需求是不可能的通过提供底层能力，满足各种场景的低/无代码方案单领域做深场景赋能运营搭建问卷搭建营销搭建流程搭建底层基建组件拖拽托管后端搭建多场景做宽

66.

67.