This issue recommends OpenSumi, an underlying framework for quickly building Cloud and desktop IDE products.
OpenSumi framework aims to solve the problem of repeated construction of IDE product research and development within Ali Economy, meet the customization capability of IDE in more vertical scenarios, and realize the sharing of the bottom layer between Web and local clients. Let IDE research and development from the early “slash-and-burn” era to the “machine mass production” era.
Function feature
- Easy integration: Provides rapid integration solutions for container scenarios, Electron scenarios, and pure front-end scenarios, helping services quickly land
- High scalability: Provides three-layer business solutions from VS Code plug-in, OpenSumi plug-in to OpenSumi module, perfectly supporting business customization requirements
- UI customization: provides a layout system that can be customized at will, supporting various scenarios from simple view configuration to layout template development, and injecting custom views from plug-ins
Overall structure
In order to ensure that the framework can run in both Web and Electron environments, OpenSumi uses a project structure that separates the front and back ends and calls each other through an abstract communication layer.
On the Web, we use WebSockets as an implementation for communication.
On Electron, we are IPC communication.
Each communication connection corresponds to an independent DI (Dependence Inject) container on the front and back ends, so OpenSumi’s backend implementation is stateless, and different connections are strictly isolated.
There are three main core processes in OpenSumi:
- Extension Process
- Node Process
- Browser Process
In order to ensure that plug-in problems will not affect the performance of the IDE, OpenSumi adopts a similar scheme to VS Code in terms of plug-in capabilities, which starts the plug-in through an independent plug-in process, and then communicates with the front-end process through the back-end process.
OpenSumi’s different capability implementations are split into different modules, which have weak Dependence on each other through Contribution Point mechanism and Dependence Inject mechanism. For some of the more core basic modules, such as theme services, layout services, etc., will also be directly dependent by other modules.
Therefore, it is necessary to ensure that some modules are introduced in order during the integrated development process.
The overall startup life cycle is shown as follows:
Fast Start (Web)
OpenSumi is based on Node.js 12.x +, so make sure you have the correct Node.js version installed locally. OpenSumi also relies on some Node.js addons. To ensure that these Addons can be compiled and run properly, it is recommended to refer to the installation guide in node-gyp to set up a local environment.
Local startup
Note: Due to the need to download a large number of packages during the compilation process, and some packages need to access GitHub to download source code, please keep GitHub access unblocked. Many 404 Not Found problems are caused by network access failures.
Run the following commands in sequence:
$ git clone git@github.com:opensumi/ide-startup.git
$ cd ide-startup
$ yarn # Install dependency
$ yarn start # Start front-end and back-end in parallel Open your browser to http://127.0.0.1:8080 for preview or development.
Mirroring with Docker
# Pull image
docker pull ghcr.io/opensumi/opensumi-web:latest
# Run
docker run --rm -d -p 8080:8000/tcp ghcr.io/opensumi/opensumi-web:latestOpen your browser to http://127.0.0.1:8080 for preview or development.
Fast Start (Electron)
OpenSumi includes a simple Electron framework that is designed to provide a desktop environment for quickly testing OpenSumi. You can use ide-electron as a template to build your own client.
You can also Release (
https://github.com/opensumi/ide-electron/releases) in the list for the relevant installation package for rapid experience.
Compatible environment
- Electron 11.4.3+
- macOS & Windows 7+
- Node.js 12+
Local start
Note: Due to the need to download a large number of packages during the compilation process, and some packages need to access GitHub to download source code, please keep GitHub access unblocked. Many 404 Not Found problems are caused by network access failures. If mainland users can not install the dependency properly due to network problems, they can switch to the main-cn branch: git checkout main-cn, or refer to the appendix at the end of the article to configure the npm image.
Run the following commands in sequence:
$ git clone git@github.com:opensumi/ide-electron.git
$ cd ide-electron
$ yarn
$ yarn build
$ yarn rebuild-native -- --force-rebuild=true
$ yarn download-extension # Install built-in plug-in (optional)
$ yarn startDevelopment
Run in project root:
$ yarn watchStart:
$ yarn startPacking
Run yarn pack to package the project. The packaged installation package will be output to the out directory.
npm mirroring configuration
Open ide-electron/.npmrc and add the following npm image configuration to solve the installation dependency failure problem:
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/Fast Start (pure front-end)
OpenSumi provides a pure front-end version of the access ability, can let you out of the node environment, in a pure browser environment, through a simple B/S architecture to provide relatively complete IDE capabilities.
Before running, ensure that Node.js 10.15.x or later has been installed on the local environment. OpenSumi also relies on some Node.js addons. To ensure that these Addons can be compiled and run properly, it is recommended to refer to the installation guide in node-gyp to set up a local environment.
Fast start
Clone project opensumi/ide-startup-lite, go to the directory and run the following command to start the IDE:
$ git clone https://github.com/opensumi/ide-startup-lite.git
$ cd ide-startup-lite
$ npm install # Install dependency
$ npm run compile:ext-worker # Compile webworker plug-in environment
$ npm run start # Open your browser to http://127.0.0.1:8080 for preview or development.
Product Case
Alipay small program development tool
Small program Developer tool is a one-stop small program development tool created by Alipay open platform, providing coding, debugging, testing, uploading, project management and other functions. Not only support the development of Alipay small programs, the same code is also commonly used in Ant open ecology, can be directly released to Taobao, Dingding, Autonavi and other application platforms.
Taobao Developer tools
Developer tool IDE is a local development tool to assist Taobao developers to develop business applications, including local debugging, code editing, real machine preview, release and other functions, covering the complete process of application development.
—END—
Open Source protocol: MIT
