本期推荐的是一个快速搭建Cloud及桌面端IDE产品的底层框架——OpenSumi。
OpenSumi 框架旨在解决阿里经济体内部 IDE 产品研发的重复建设问题，满足 IDE 在更多垂直场景的定制能力，同时实现 Web 与本地客户端共用底层，让 IDE 研发从早期的“刀耕火种”时代向“机器化大生产”时代迈进。
功能特性
- 轻松集成：提供面向容器场景、Electron 场景和纯前端场景的快速集成解决方案，助力业务快速落地
- 高拓展性：提供从 VS Code 插件、OpenSumi 插件到 OpenSumi 模块三层业务解决方案，完美支持业务定制需求
- UI 自定义：提供可任意定制的布局系统，支持从简单的视图配置到布局模板研发的各类场景，支持从插件注入自定义视图
整体架构
为了保证框架可以同时在 Web 和 Electron 环境下运行，OpenSumi 采用了一套前后端分离、通过一层抽象的通信层进行相互调用的项目结构。
在 Web 上，我们使用 WebSocket 来作为通信的实现。
在Electron 上，我们则是 IPC 通信。
每一个通信的连接对应前后端一个独立的 DI (Dependence Inject) 容器，所以 OpenSumi 的后端实现是无状态的，不同连接之间是严格隔离的。
在 OpenSumi 内主要有三个核心进程：
- 插件进程 （Extension Process）
- 后端进程 （Node Process）
- 前端进程 （Browser Process）
为了保证插件的问题不会影响 IDE 的性能表现，插件能力上 OpenSumi 采用了跟 VS Code 类似的方案，通过独立的插件进程去启动插件，插件进程再通过后端进程与前端进程进行通信。
OpenSumi 的不同能力实现被拆分到了不同的模块内，这些模块通过 贡献点机制 (Contribution Point)、DI 机制 (Dependence Inject) 互相之间有较弱的依赖关系，对于一些比较核心的基础模块，如主题服务、布局服务等，也会被其他模块直接依赖。
因此，在集成开发过程中需要保证一些模块的引入顺序。
整体启动的生命周期如下图所示：
快速开始（Web）
OpenSumi 基于 Node.js 12.x + 版本开发，需要确保你本地已经安装上正确的 Node.js 版本。同时 OpenSumi 依赖一些 Node.js Addon，为了确保这些 Addon 能够被正常编译运行，建议参考 node-gyp 中的安装指南来搭建本地环境。
本地启动
注意：由于编译过程中需要下载大量的包，并且部分包需要访问 GitHub 下载源码，请保持 GitHub 的访问畅通。很多 404 Not Found 的问题都是网络访问失败引起的。
依次运行下面的命令：
$ git clone git@github.com:opensumi/ide-startup.git
$ cd ide-startup
$ yarn # 安装依赖
$ yarn start # 并行启动前端和后端浏览器打开 http://127.0.0.1:8080 进行预览或开发。
使用 Docker 镜像
# 拉取镜像
docker pull ghcr.io/opensumi/opensumi-web:latest
# 运行
docker run --rm -d -p 8080:8000/tcp ghcr.io/opensumi/opensumi-web:latest浏览器打开 http://127.0.0.1:8080 进行预览或开发。
快速开始（Electron）
OpenSumi 内部集成了一个简易的 Electron 框架，旨在提供一个快速测试 OpenSumi 的桌面端环境。可以使用 ide-electron 作为模板搭建自己的客户端。
你也可以在 Release （
https://github.com/opensumi/ide-electron/releases）列表中获取相关安装包进行快速体验。
兼容环境
- Electron 11.4.3+
- macOS & Windows 7+
- Node.js 12+
本地启动
注意：由于编译过程中需要下载大量的包，并且部分包需要访问 GitHub 下载源码，请保持 GitHub 的访问畅通。很多 404 Not Found 的问题都是网络访问失败引起的。 大陆用户如果是因为网络问题，导致不能正常安装依赖，可以先切换到 main-cn 分支： git checkout main-cn，或者参考文章最后的附录配置 npm 镜像。
依次运行下面的命令：
$ git clone git@github.com:opensumi/ide-electron.git
$ cd ide-electron
$ yarn
$ yarn build
$ yarn rebuild-native -- --force-rebuild=true
$ yarn download-extension # 安装内置插件（可选）
$ yarn start开发
在项目根目录运行：
$ yarn watch启动：
$ yarn start打包
运行 yarn pack 即可将项目打包，打包后的安装包将输出在 out 目录。
npm 镜像配置
打开 ide-electron/.npmrc，添加下面的 npm 镜像配置，可以解决安装依赖失败的问题：
registry=https://registry.npmmirror.com/
disturl=https://npmmirror.com/mirrors/node
chromedriver-cdnurl=https://npmmirror.com/mirrors/chromedriver
couchbase-binary-host-mirror=https://npmmirror.com/mirrors/couchbase/v{version}
debug-binary-host-mirror=https://npmmirror.com/mirrors/node-inspector
flow-bin-binary-host-mirror=https://npmmirror.com/mirrors/flow/v{version}
fse-binary-host-mirror=https://npmmirror.com/mirrors/fsevents
fuse-bindings-binary-host-mirror=https://npmmirror.com/mirrors/fuse-bindings/v{version}
git4win-mirror=https://npmmirror.com/mirrors/git-for-windows
gl-binary-host-mirror=https://npmmirror.com/mirrors/gl/v{version}
grpc-node-binary-host-mirror=https://npmmirror.com/mirrors
hackrf-binary-host-mirror=https://npmmirror.com/mirrors/hackrf/v{version}
leveldown-binary-host-mirror=https://npmmirror.com/mirrors/leveldown/v{version}
leveldown-hyper-binary-host-mirror=https://npmmirror.com/mirrors/leveldown-hyper/v{version}
mknod-binary-host-mirror=https://npmmirror.com/mirrors/mknod/v{version}
node-sqlite3-binary-host-mirror=https://npmmirror.com/mirrors
node-tk5-binary-host-mirror=https://npmmirror.com/mirrors/node-tk5/v{version}
nodegit-binary-host-mirror=https://npmmirror.com/mirrors/nodegit/v{version}/
operadriver-cdnurl=https://npmmirror.com/mirrors/operadriver
phantomjs-cdnurl=https://npmmirror.com/mirrors/phantomjs
profiler-binary-host-mirror=https://npmmirror.com/mirrors/node-inspector/
python-mirror=https://npmmirror.com/mirrors/python
rabin-binary-host-mirror=https://npmmirror.com/mirrors/rabin/v{version}
sass-binary-site=https://npmmirror.com/mirrors/node-sass
sodium-prebuilt-binary-host-mirror=https://npmmirror.com/mirrors/sodium-prebuilt/v{version}
sqlite3-binary-site=https://npmmirror.com/mirrors/sqlite3
utf-8-validate-binary-host-mirror=https://npmmirror.com/mirrors/utf-8-validate/v{version}
utp-native-binary-host-mirror=https://npmmirror.com/mirrors/utp-native/v{version}
zmq-prebuilt-binary-host-mirror=https://npmmirror.com/mirrors/zmq-prebuilt/v{version}
bin-mirrors-prefix=https://npmmirror.com/mirrors
canvas_binary_host_mirror=https://npmmirror.com/mirrors/canvas
electron-mirror=https://npmmirror.com/mirrors/electron/
electron_custom_dir={{ version }}
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/快速开始（纯前端）
OpenSumi 提供了纯前端版本的接入能力，可以让你脱离 node 的环境，在纯浏览器环境下，通过简单的 B/S 架构提供相对完整的 IDE 能力。
在开始运行前，请先保证本地的环境已经安装 Node.js 10.15.x 或以上版本。同时 OpenSumi 依赖一些 Node.js Addon，为了确保这些 Addon 能够被正常编译运行，建议参考 node-gyp 中的安装指南来搭建本地环境。
快速开始
克隆项目 opensumi/ide-startup-lite，进入目录执行以下命令启动 IDE：
$ git clone https://github.com/opensumi/ide-startup-lite.git
$ cd ide-startup-lite
$ npm install # 安装依赖
$ npm run compile:ext-worker # 编译 webworker 插件环境
$ npm run start # 启动浏览器打开 http://127.0.0.1:8080 进行预览或开发。
产品案例
支付宝小程序开发工具
小程序开发者工具是支付宝开放平台打造的一站式小程序研发工具，提供了编码、调试、测试、上传、项目管理等功能。不仅支持开发支付宝小程序，相同代码还通用于蚂蚁开放生态，可直接发布至淘宝、钉钉、高德等应用平台。
淘宝开发者工具
开发者工具 IDE 是辅助淘宝开发者开发商家应用的本地开发工具，包含本地调试、代码编辑、真机预览、发布等功能，覆盖了应用开发的完整流程。
—END—
开源协议：MIT
