零门槛，网易开源 Tango 低代码设计器，让Web可视化大屏搭建更高效！

Tango 是网易云音乐团队开源的一个用于快速构建低代码平台的低代码设计器框架，只需要数行代码即可以完成一个基本的低代码平台前端系统的搭建。Tango 低代码设计器直接读取前端项目的源代码，并以源代码为中心，执行和渲染前端视图，并为用户提供低代码可视化搭建能力，用户的搭建操作会转为对代码的修改。

借助 Tango 可以实现源码进，源码出的效果，灵活且无缝集成到企业应用系统，本地开发工具等，十分适合企业内部快速开发各类通用系统和搭建各类低代码平台等场景应用。

源码驱动：基于项目源码提供低代码能力，提供源码级的自定义扩展能力

实时出码：源码进，源码出，可视化和源码自由切换

开箱即用：提供灵活易用的设计器框架，支持开发者自由扩展封装

🧩  技术架构

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

引擎内核：负责建立文件，节点模型，提供输入输出能力。

拖拽引擎和可视化面板：提供可视化开发能力。

渲染沙箱：提供源码在浏览器上的编译执行能力。

技术原理

Tango 低代码引擎不依赖私有搭建协议和 DSL，而是直接使用源代码驱动，引擎内部将源码转为 AST，用户的所有的搭建操作转为对 AST 的遍历和修改，进而将 AST 重新生成为代码，将代码同步给在线沙箱执行。

首先将源代码解析为 AST。用户的拖拉拽等操作则映射为对 AST 的遍历和修改。最后将新的 AST 重新生成代码，交给设计器沙箱去渲染执行。

数据变更流程

首先是引擎初始化。源码文件会被引擎内核解析进行状态初始化。接下来，对于用户的操作，会触发浏览器事件，引擎接收到相应的事件，触发内核中的状态变更，更新 AST。

然后，内核会基于新的 AST 的同步生成代码，由引擎将代码同步给渲染沙箱。渲染沙箱感知到代码变化后，会触发页面重新渲染，也就是沙箱的 HMR 过程。

在实现上，主要包括 3 个部分，分别是：

低代码沙箱：它是一个开箱即用的前端组件，只需要传入源代码和构建配置信息即可完成前端项目的构建和执行。在线 Bundler：是低代码沙箱的核心，用来在浏览器上构建和执行源代码，本质上是一个在浏览器端运行的简化版 webpack。打包服务：是一个 node 服务，用来对 npm 包执行预构建和资源合并。

从沙箱执行流程来看，首先 Sandbox 组件将项目的源代码和 compile 指令使用 postMessage 传递给在线 Bundler，在线 Bundler 在接收到 compile 指令后，bundler 会从 packager 打包服务加载项目的 npm 依赖，然后编译和执行代码，最后发送 success 消息给低代码沙箱。

中间这段代码，展示了核心的逻辑，通过遍历整个 AST 中的所有 JSXElement 节点，找到第一个 Page 元素，然后在 Page 元素的 children 里插入新的 Section 节点。这只是一段演示代码，具体的过程比这个要复杂的多，因为有很多的边际逻辑要处理。最后，我们可以将 ast 重新生成为代码，得到我们想要的结果。

快速开始

Tango开发环境要求 node 16.0.0 以上版本，npm 8.x 或 yarn 1.x

# 克隆仓库至本地git clone https://github.com/NetEase/tango.git# 在 hosts 文件下添加本地开发的域名127.0.0.1 local.netease.com# 安装依赖并启动 Tango Playgroundyarn installyarn start#打开浏览器访问 https://local.netease.com:6006 并允许不安全的证书

系统演示