1、方一谕方一谕 抖音高级前端工程师抖音高级前端工程师低代码引擎低代码引擎 Midas Midas 的设计和实现的设计和实现个人简介个人简介字节跳动-抖音-营销搭建负责 Midas 建站引擎项目的设计研发方一谕方一谕 目录目录2 2低代码引擎 Midas 设计实现1 1低代码应用现状3 3低代码引擎 Midas 应用案例4 4Midas 未来展望1 1低代码应用现状低代码应用现状低代码应用现状来源:2022年中国低代码行业研究报告高速增长的行业规模来源:How Big is the Global Low-Code/No-Code Market 低代码应用现状低代码应用现状百花齐放的低码平台Webf
2、lowretoolWIX低代码应用现状低代码应用现状高度专注的业务场景内容管理个人电商管理中台低代码应用现状低代码应用现状场景场景能力能力业务业务用户用户关注点不同最终产品差异巨大低代码应用现状低代码应用现状更通用的场景意味着接收更多的知识量更通用的业务意味着难以紧密联系场景更通用的能力意味着需要更繁杂的交互更通用的人员意味着需要更区分的能力为什么没有一个通用低码平台解决一切问题?低代码应用现状低代码应用现状如何理解?举个例子运营前端不如直接写CSS我就只是改个高度样式面板低代码应用现状低代码应用现状那目前我们的破局方式?低码引擎低码引擎求同存异求同存异2 2低代码引擎 Midas 设计实现低
3、代码引擎低代码引擎 MidasMidas 设计实现设计实现稳定性可以提供可靠而稳定的底层能力通用性可以提供统一而规范的协议机制求同求同灵活性可以实现的定制功能的灵活拓展易用性可以实现低代码应用的快速搭建存异存异低代码引擎低代码引擎 MidasMidas 设计实现设计实现首先,如何求同?拓展机制上层物料底层实现底层实现基础协议基础协议低代码引擎低代码引擎 MidasMidas 设计实现设计实现基础协议:结构最简,拓展支持基础结构拓展结构低代码引擎低代码引擎 MidasMidas 设计实现设计实现举个例子,我们交互的结果总是一个树状结构结构只有基本的树低代码引擎低代码引擎 MidasMidas 设
4、计实现设计实现假如需要增加描述节点是否隐藏功能拓展了 condition 字段低代码引擎低代码引擎 MidasMidas 设计实现设计实现底层实现:主要遵从单一职责原则来源:Single-responsibility principle低代码引擎低代码引擎 MidasMidas 设计实现设计实现举个例子,Midas 底层协议将渲染分成节点和组件部分节点信息组件信息以 React 运行时为案例低代码引擎低代码引擎 MidasMidas 设计实现设计实现那么我们在实现上,就得有两个模块去实现独立的渲染节点渲染组件渲染低代码引擎低代码引擎 MidasMidas 设计实现设计实现每个模块都只干自己的事
5、情,即使他们存在有联系节点渲染组件渲染渲染 DSL渲染节点树渲染组件信息输出渲染低代码引擎低代码引擎 MidasMidas 设计实现设计实现再举个例子,编辑中最常见的交互关联上图中结构树和画布是独立功能,但是有交互关联低代码引擎低代码引擎 MidasMidas 设计实现设计实现虽然他们有交互关联,但理应是两个模块,应该分开实现编辑器核心画布抽象结构树插件画布插件提供实现订阅低代码引擎低代码引擎 MidasMidas 设计实现设计实现然后,如何存异?拓展机制拓展机制上层物料上层物料底层实现基础协议低代码引擎低代码引擎 MidasMidas 设计实现设计实现拓展机制:主要遵从开闭原则OPENCLO
6、SED来源:Openclosed principle低代码引擎低代码引擎 MidasMidas 设计实现设计实现举个例子,Midas 节点渲染支持插件机制节点渲染节点树插件机制经过渲染React运行时其他运行时基于类型约束实现低代码引擎低代码引擎 MidasMidas 设计实现设计实现再举个例子,Midas 编辑器实现的插件机制核心容器插件抽象类插件实现低代码引擎低代码引擎 MidasMidas 设计实现设计实现编辑器使用控制反转的方式,内部去维护内置服务和插件服务来源:Inversion of Control编辑