零门槛，网易开源 Tango 低代码设计器，让Web可视化大屏搭建更高效！
文末联系小编，获取项目源码
Tango 是网易云音乐团队开源的一个用于快速构建低代码平台的低代码设计器框架，只需要数行代码即可以完成一个基本的低代码平台前端系统的搭建。Tango 低代码设计器直接读取前端项目的源代码，并以源代码为中心，执行和渲染前端视图，并为用户提供低代码可视化搭建能力，用户的搭建操作会转为对代码的修改。
借助 Tango 可以实现源码进，源码出的效果，灵活且无缝集成到企业应用系统，本地开发工具等，十分适合企业内部快速开发各类通用系统和搭建各类低代码平台等场景应用。
源码驱动：基于项目源码提供低代码能力，提供源码级的自定义扩展能力
实时出码：源码进，源码出，可视化和源码自由切换
开箱即用：提供灵活易用的设计器框架，支持开发者自由扩展封装
🧩 技术架构
Tango 低代码引擎主要包括 3 个核心组成部分
引擎内核：负责建立文件，节点模型，提供输入输出能力。
拖拽引擎和可视化面板：提供可视化开发能力。
渲染沙箱：提供源码在浏览器上的编译执行能力。
💻 技术原理
Tango 低代码引擎不依赖私有搭建协议和 DSL，而是直接使用源代码驱动，引擎内部将源码转为 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 并允许不安全的证书🌟 系统演示
如有IoT 源码采购和项目交付需求，商务合作，企业产品推广，请扫码联系小编，微信号: beacon0418
往期推荐
☞开箱即用！国产开源30+AI视觉算法IoT智能物联网云平台
☞国产开源Web 工业IoT组态软件，支持Modbus、OPC，支持拖拉拽
☞源码交付，7天完成国产信创部署智慧工地方案
☞4万元，国产信创私有化部署，破解县域无人机AI巡检平台落地难题
☞上班摸鱼， 智能 AI 监控老板行踪
☞免费开源，千知AI知识图谱平台，支持DeepSeek、Qwen
☞信创部署，源码交付！县域低空经济无人机 AI 巡检平台
☞智慧农业大爆发：AI+物联网+区块链重构“天空地”一体化监测
免责声明：本公众号所发布的内容来源于互联网，我们会尊重并维护原作者的权益。由于信息来源众多，若文章内容出现版权问题，或文中使用的图片、资料、下载链接等，如涉及侵权，请告知我们，我们将尽快处理。主理人微信: beacon0418