简介

Tango 是一个用于快速构建低代码平台的低代码设计器框架，借助 Tango 只需要数行代码就可以完成一个基本的低代码平台前端系统的搭建。Tango 低代码设计器直接读取前端项目的源代码，并以源代码为中心，执行和渲染前端视图，并为用户提供低代码可视化搭建能力，用户的搭建操作会转为对源代码的修改。借助于 Tango 构建的低代码工具或平台，可以实现 源码进，源码出的效果，无缝与企业内部现有的研发体系进行集成。

核心特性

• 经历网易云音乐内网生产环境的实际检验，可灵活集成应用于低代码平台，本地开发工具等
• 基于源码 AST 驱动，无私有 DSL 和协议
• 提供实时出码能力，支持源码进，源码出
• 开箱即用的前端低代码设计器，提供灵活易用的设计器 React 组件
• 使用 TypeScript 开发，提供完整的类型定义文件

实现原理

Tango 低代码引擎不依赖私有搭建协议和 DSL，而是直接使用源代码驱动，引擎内部将源码转为 AST，用户的所有的搭建操作转为对 AST 的遍历和修改，进而将 AST 重新生成为代码，将代码同步给在线沙箱执行。具体的过程如下图所示，首先将源代码解析为 AST。用户的拖拉拽等操作则映射为对 AST 的遍历和修改。最后将新的 AST 重新生成代码，交给设计器沙箱去渲染执行。而对 AST 的解析、遍历、修改、生成，则可以借助大量的社区工具，这里我们选择的是 babel！

技术架构

Tango 低代码引擎主要包括 3 个核心组成部分，分别是：

• 引擎内核：负责建立文件，节点模型，提供输入输出能力。
• 拖拽引擎和可视化面板：提供可视化开发能力
• 渲染沙箱：提供源码在浏览器上的编译执行能力。