The introduction

Business development needs webIDE, after technical research, finally selected Eclipse Theia. Eclipse Theia does not have much literature, let alone official Chinese documents, so I decided to translate it into writing while reading it.

Architecture overview

This section describes the overall architecture of Theia

Theia can be a desktop application or run in a browser or remote service. Theia runs in two separate processes to support desktop applications and WebIDES with the same set of code. These processes are called front-end and back-end, respectively, and they communicate via JSON-RPC messages over WebSockets or REST apis over HTTP. In a desktop application, both the back end and the front end run locally, whereas in a remote context the back end runs on a remote host.

Both front-end and back-end processes have their dependency injection containers that contribute extensions.

The front end

The front-end process represents the client and is responsible for rendering the UI. In the browser, it simply runs in the render loop, while in Electron, it runs in the Electron window, which is a basic browser with the Electron and Node.js APIS attached. Any front-end code can assume that the browser is a platform without having to associate Node.js with it.

The back-end

Back-end processes run on Node.js. We use Express as the HTTP server. It may not require any browser-dependent platform code (DOM API). The back-end application starts by loading all DI modules that contribute extensions, then getting an instance of BackendApplication and calling Start (portNumber) on it. By default, the Express server in the background also provides code for the foreground.

The platform

In the top folder of the extender, we also have an additional folder layer that can be separated by platform:

  • The Common folder contains code that is not dependent on any runtime.

  • The browser folder contains code that requires the use of modern browsers as platforms (DOM APIS).

  • The electronic browser folder contains front-end code that requires both the DOM API and the Electron renderer process-specific API.

  • The Node folder contains the (back-end) code that requires Node.js as the platform.

  • The Node-electron folder contains the (back-end) code that is electron specific.

reference

For a high-level overview of Theia architecture, refer to this document:

Multi-language IDE implemented with JS – scope and architecture