蚂蚁开发者工具，服务蚂蚁生态的场景化 IDE 研发框架（附演讲视频）

SEE Conf 分享回顾

很荣幸有机会在 SEE Conf 2018 上介绍了蚂蚁开发者工具的定位与架构，演讲视频新鲜出炉，欢迎随时与我们有更多的探讨。

何为场景化 IDE ？这里指的是针对特定研发场景的 IDE，它们往往会针对这些特定场景，除了编码以外，还会提供构建、调试等等功能，比如支付宝小程序的研发工具。而与之相对的是通用的 IDE，比如 WebStorm、VSCode 等，而他们的核心在于提供编辑功能。

本文主要想聊聊场景化 IDE 的研发，希望能为所有想要开发 IDE 的开发者给出一些参考。

开放生态 & 场景化 IDE

无论是去年支付宝全面开放能力，还是今年支付宝小程序公测，体现的都是对生态的重视，当然，不仅仅是在蚂蚁，整个业界都呈现了越来越开放的趋势，而无论是何种开放都伴随着具体的场景，伴随着特定的研发模式。

而针对这些特定的模式，提供零散的 API、调试工具、发布界面有时候对开发者来说比较散，于是提供一站式的场景化 IDE 便是一种不错的选择。

场景化 IDE 的实现

要实现一个 IDE 很难，尤其是核心编辑器部分，幸运的是业界已有很多成功的案例了，而针对特定场景的研发往往是在构建、调试、流程串联方面，完全可以站在巨人的肩膀上去做。

我们举一个具体的 Case 来看看实现：

上图为云凤蝶开发者工具，是一个专门针对 H5 APP 研发场景的 IDE，其核心功能是编辑器、模拟器（右侧），以及调试工具、上传功能（分别是左侧的两个菜单）。

接下来，我们分别就如下几点来聊聊如何实现：

模拟器 & 调试工具

研发桌面应用

我们在开发云凤蝶 IDE 的时候选择了 ELectron 这个框架。Electron 是一个跨平台桌面应用解决方案，由 Github 出品，其核心理念是 Build cross platform desktop apps with JavaScript, HTML, and CSS。如果你开发过移动应用，你肯定会纠结过是用比如 Apache Cordova 开发一个跨平台应用，还是说为 IOS/Android 各开发一个 Native App，你可以把 Electron 看做桌面应用领域的 Cordova。

Electron 从架构上来说包含三部分：

Chromium(确切的说是 libchromiumcontent)，Chrome 的渲染引擎，意味着说你可以用 JS + HTML + CSS 去开发界面
Node.js，提供文件系统、网络请求等等，任何 Node.js API 都可以随你调用
Native APIs，这部分是 Electron 对系统接口的封装，比如你调用 Notification，Electron 会帮你唤起系统提示，Electron帮你抹平了 Windows, Linux, macOS，调用了不同的底层实现。

选择 Electron，主要考虑到开发成本，而且性能上也可以接受（当然跟 Native App 还是有差距的）。其实很多业界知名的产品都是基于 Electron 研发的，而且你肯定用过，比如 VSCode、Atom 等等。

编辑器是 IDE 的核心，开发成本很高，一般也不会自己开发。比较流行的选择是 monaco-editor，它是从 VSCode 源码中 build 出来的，专门针对浏览器环境的编辑器，当然也正因此，它在性能上、功能上会有一些牺牲，不过即便如此，它依旧是市面上性能最好的编辑器之一。

我们在项目的初期也选择了 monaco-editor，但是随着支持的语言种类越来越多，不断通过 monaco api 去编写语言支持也比较麻烦，而这类语言的支持，VSCode 基本都有，于是我们对 monaco-editor 做了些扩展，使其接近 VSCode 运行环境中的实现，以便复用 VSCode 语法插件，并且在性能上也有不少提升。

模拟器，其实是以浏览器运行环境去模拟真实的容器。

如图，我们会通过 webview 来模拟支付宝容器，并在创建 webview 的时候会在其中注入 preload scripts，用来完成 webview 与外部的通信。

举个例子，在支付宝容器中我们可以通过 ap.pushWindow 打开新页面，这个 API 的作用是推入一个新窗口，旧窗口依旧保留，这个 API 模拟的过程大概如下：

在代码中调用 ap.pushWindow('https://m.taobao.com/')
在 preload script 中拦截 ap.pushWindow，通过 IPC 通信把调用的方法与参数传递给 Simulator Services
在 Simulator Service 中创建一个新的 webview，用来加载 http://m.taobao.com

由于 Simulator Service 运行在 Electron Renderer Process 中，必要的时候我们可以 Node.js 或者 Native APIs 来模拟类似蓝牙这种 API 的实现（出于性能及安全考虑，我们一般会限制 Webview 调用 Node.js API 的权限）。

值得一提的是模拟器仅仅是模拟容器 API 及展现的，不要跟运行 Server 混为一谈，通常我们会 fork 一个子进程去运行一个编译、调试的服务，然后把 Server 地址传递给模拟器加载运行。

想要调试一个 webview，我们可以通过 app.commandLine.appendSwitch('remote-debugging-port', 9222) 开启 remote-debugging。在开启之后，Chrome 会暴露一个 HTTP 接口，返回每个 tab 的信息（当然也包括我们创建的 webview）。

具体架构如图，我们会通过一个 webview 去加载 Chrome DevTools Frontend，并把对应的 webview 的 websocket 地址传递给它（Frontend 通过 ws 与内核通信，如果有需要你也可以像我们一样封装自己的 protocol）。