米鹿DSL可视化编排
项目简介
公司的中台团队要推广一套DSL标准，在客户端和前端普及，能够生成web 和 native的视图。在我们的前端团队，有一套H5的可视化创作平台（米鹿），给产品、运营人员使用。
由于DSL的写法中涉及到样式，主要是flex布局相关的，这对于客户端开发的同事来说有点陌生。他们希望能通过可视化的方式，在页面上操作，生成DSL代码。
中台和前端leader商讨后，决定要在 米鹿创作平台上实现 可视化编排DSL的功能，即 通过拖拽的方式生成DSL代码，然后下发到各端。
可视化编排DSL的功能是我负责开发，在利用原有米鹿画布的能力外，实现了很多业务和技术上的创新点，赢得了leader 和 客户端团队的认可。
个人贡献
- 开发了流式布局并，兼容绝对定位的布局方式
- 搭建独立的工程，从 0 到 1实现可视化输出DSL代码
- 通过独立的拆包，集成到现有的平台上
- 解决了多层级嵌套的布局失灵问题
- 打通了从生产源 到 终端的链路
- 完善相关的文档，在团队中分享推广
项目架构
项目的整体架构，如上图所示。在米鹿平台上，设计一个独立的导航栏目录，增加 DSL特有的组件库和配置项目。
用户拖拽左侧的组件到画布上，反向映射成DSL代码，用户修改相关的属性配置，可以实现视觉效果的调整，并动态生成附加的样式代码。
支持用户的预览和发布功能。对生成的DSL代码不满意，支持源码的二次修改，同时会实时联动，将修改的效果展示到画布上。
生成的DSL代码，会上传到远程 git 仓库中，之后进入 pull request 流程。没有问题的话，合并到 master 分支，走入下发到各端的流程中。
效果预览
下面是在米鹿平台上拖拽生成的514卡片（一种和客户端约定的展现格式）
输出的DSL代码如下：
当视图上元素展示比较密集时，支持组件树的展示
可以一眼看清楚，画布上有哪些组件。