Eclipse Theia Technology Revealed - Getting to Know Theia for the First Time

Overview

Since I came into contact with IDE technology, I have been paying attention to how other manufacturers make IDEs. I just started to understand that IDEs are built on the basis of electron or NW.js from developer tools such as WeChat, Baidu, Alipay, etc. , but writing it from scratch is expensive. Later, I also saw some other IDEs, such as Weex Studio , Egret Wing , Quick Application IDE , APICloud Studio , which are customized based on VSCode source code, the technology is relatively mature, most of the functions are ready-made, and the workload is relatively small, so Based on VSCode, the first version of the development tool was customized. For details, please see the VSCode technology disclosed before. Until I learned about Theia framework later, I found that the style and functions are similar to VSCode, and it also partially supports VSCode plug-ins. The most important thing is to enrich the view function of the IDE through extensions. Compared with VSCode to modify the UI source code, Theia's method It is easier to use, but the premise is that you have to understand the source code of Theia before you can customize it, so Theia was used as the main research direction of the IDE at that time.

Overall architecture

Theia is designed to be a desktop application that also works in a browser and remote server environment. To support both cases, Theia runs in two separate processes. These processes are called frontend and backend, and they communicate via JSON-RPC messages over WebSocket or REST API over HTTP. For Electron, both the backend and frontend run locally, while in a remote context, the backend will run on the remote host. Both front-end and back-end processes have their Dependency Injection (DI) containers to facilitate extending functionality.

expand

Theia is designed in a very modular and extensible way. It supports the following three expansion methods. Compared with VSCode, which only supports plug-in expansion, the customizability is higher.

• VSCode extension: easy to write, installable at runtime. Theia provides the same extension API as VSCode, so extensions are compatible. Therefore, to develop your own extension, please refer to the VSCode extension documentation . It is also possible to use existing VSCode extensions in Theia, which can be installed or downloaded from the Open VSX registry .
• Theia Extensions: Theia Extensions are modules (Theia Extensions) that are inside the Theia application and communicate directly with other modules. The Theia project itself also consists of Theia extensions. To create a Theia application, you can choose from the large collection of Theia extensions (core extensions) provided by the Theia project, add your own custom Theia extensions, and compile and run the result. Your custom Theia extension will have access to the same API as the core extension. This modularity allows you to expand, adapt or remove almost anything in Theia to suit your needs. Also, it is easier to develop specific use cases (like complex views) with Theia extensions than with VSCode extensions. Technically, an extension is an npm package that exposes any number of DI modules (ContainerModule) that help create a DI container. Extensions are used by declaring dependencies in package.json and installed at compile time.
• Theia plugin: Theia plugin is a special type of VSCode extension that only runs in Theia. They share the architecture and other properties of the VSCode extension, but they also have access to additional APIs that are only available in Theia and not in VSCode. Most notably, Theia plugin can also be used directly on the frontend, while the VS Code extension is limited to the backend. Therefore, Theia plugins can directly manipulate the UI without going through the webview abstraction, simplifying the development process.

The diagram below shows the high-level architecture for all three options. VSCode extensions and Theia plugins run in a dedicated process, can be installed at runtime, and work against a defined API. Theia extensions are added at compile time and become a core part of the Theia application. They have access to Theia's full API.

The difference between VSCode and Theia

• Maintenance: VSCode is under the MIT license and basically belongs to Microsoft Corporation. Theia is an EPL protocol led by the Eclipse Theia Foundation Board and available for commercial use.
• Plug-in market: VSCode has its own independent plug-in market, which is rich in plug-ins, but can only be installed in VS Code. Theia only supports downloading from the openVSX plug-in market, which actually supports VS Code plug-ins. However, due to the limitations of the VS Code plug-in market, the VS Code plug-in cannot be fully used, and the plug-in developer can only host the plug-in on openVSX, so The number of plugins is smaller than VS Code.

• Plug-in development: VS Code provides extended registration commands, menus, views, language servers and other related functions. Currently, it can only be extended through the API provided by VS Code. It is not possible to change the logo, remove the default menus, commands, and create complex views. Theia actually provides two plug-in mechanisms. One is a plug-in development mechanism similar to VS Code, Plugin, which relies on the API provided by Theia for plug-in development. Users can install and uninstall plug-ins while the IDE is running. The other is extension, which is directly built into our tool and cannot be modified by users. It can access all the methods inside Theia, and we can personalize all the functions of Theia. The disadvantage of this kind of plug-in development is that the requirements for developers are relatively high, and they need to understand the internal mechanism of Theia, and the existing documents basically cannot meet the development needs of high customization.

  Environment construction

  When I first started researching Theia, the version was 1.11.0. At that time, there were many relative environmental problems, and there were also various problems such as Windows compatibility and incomplete documentation. However, now the documentation is relatively comprehensive. For environmental problems, you can read this article . Running under Windows The Eclipse Theia source code guide is relatively detailed.

Next, when we study Theia, we must run the official project first. We can study the official documentation Eclipse Theia documentation . If the documentation cannot be accessed, you can view the github source code of the documentation https://github.com/eclipse-theia/theia-website . Of course, we can also check the quick start , pay attention to the basic environment here:

• Node.js >= 14.18.0, Node's LTS is recommended: currently 16.x
• Yarn package manager >= 1.7.0 AND < 2.xx
• git (If you would like to use the Git-extension too, you will need to have git version 2.11.0 or higher.)
• python3 because node-gyp@8.4.1 is required

Then pull the code and install the dependencies. If the installation dependencies are very slow or even an error is reported here, it is basically a network problem. You can download it over the wall, or you can add the .npmrc configuration in the project root directory to help with quick installation.

 chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
operadriver_cdnurl=http://npm.taobao.org/mirrors/operadriver
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ 
puppeteer_skip_chromium_download = 1

Here is the configuration of the windows environment.

python3 version is Python 3.6 or higher

Visual Studio build tools 17, build tools can refer to this article on the source code guide for running Eclipse Theia under Windows .

If you have multiple versions of python or Visual Studio installed, you can adjust the version used via npm config.

 npm config set python /path/to/executable/python --global
npm config set msvs_version 2017 --global

Install windows-build-tools. Previously, windows-build-tools was required to build Native Nodes modules on Windows. The npm package is now deprecated because the NodeJS installer can now install all the required tools it needs, including the Windows build tools.

We open PowerShell as an administrator and run the command to install

 npm --add-python-to-path install --global --production windows-build-tools

This completes our environment configuration.

Build your own IDE tools

Theia official documentation provides two ways to build products based on Theia:

• Theia Extension Yeoman Generator: Generates Theia-based products and sample extensions
• Theia Blueprint: Template tool for creating installable desktop applications based on Theia These two methods will generate a configured Theia project without having to rebuild it yourself.

Of course, the official documentation describes the steps to configure Theia project from zero. First create a project directory

 $ mkdir theia-demo
$ cd theia-demo

Then create package.json in the project root directory

 {
    "private": true,
    "dependencies": {
      "@theia/callhierarchy": "next",
      "@theia/file-search": "next",
      "@theia/git": "next",
      "@theia/markers": "next",
      "@theia/messages": "next",
      "@theia/navigator": "next",
      "@theia/outline-view": "next",
      "@theia/plugin-ext-vscode": "next",
      "@theia/preferences": "next",
      "@theia/preview": "next",
      "@theia/search-in-workspace": "next",
      "@theia/terminal": "next",
      "@theia/vsx-registry": "next"
    },
    "devDependencies": {
      "@theia/cli": "next"
    },
    "scripts": {
      "prepare": "yarn run clean && yarn build && yarn run download:plugins",
      "clean": "theia clean",
      "build": "theia build --mode development",
      "start": "theia start --plugins=local-dir:plugins",
      "download:plugins": "theia download:plugins"
    },
    "theiaPluginsDir": "plugins",
    "theiaPlugins": {
      "vscode-builtin-extensions-pack": "https://open-vsx.org/api/eclipse-theia/builtin-extension-pack/1.50.1/file/eclipse-theia.builtin-extension-pack-1.50.1.vsix"
    },
    "theiaPluginsExcludeIds": [
      "vscode.extension-editing",
      "vscode.git",
      "vscode.git-ui",
      "vscode.github",
      "vscode.markdown-language-features",
      "vscode.microsoft-authentication"
    ]
  }

It can be seen that Theia core dependencies are all extension packages one by one, and @theia/cli is listed as a build-time dependency. It provides scripts to build and run applications. There are some other configuration items in it.

• theiaPluginsDir: relative path to deploy plugins
• theiaPlugins: Collection of plugins to download (single plugin or extension pack) - can point to any valid download URL (eg: Open VSX, Github Releases, etc.)
• theiaPluginsExcludeIds: List of plugins to exclude when parsing extension packages

Then install dependencies

 yarn

Then, build the application using Theia CLI

 yarn theia build

Yarn looks for the executable @theia/cli provided by theia in the context of our application and then builds using theia. This may take a while since by default the application is built in production mode i.e. obfuscated and zoom out. Of course, we can also use yarn build to call scripts.

After the build is complete, we invoke the command to start.

 yarn theia start --plugins=local-dir:plugins

You can also call yarn start to execute scripts.

After startup, it runs on port 3000 by default, and then open the browser to see the running Theia IDE.

We can also specify a specific network and port at startup.

 yarn start --hostname 0.0.0.0 --port 8080

The above is our simple start of a Theia project, which is accessed in the browser as a WEB IDE. Later, we will introduce how to develop a desktop client version of the IDE.

Related source code

openvsx
theia-apps
theia

Reference source code

Due to the lack of documentation content, you can refer to other codes for customizing Theia.

che-theia
Mbed Studio
Arduino IDE

Reference article

How does KAITIAN IDE build a plug-in system with strong extensibility?
Born for the future R&D model, KAITIAN IDE's exploration in business
Front-end engineering next stop IDE
Front-end engineering R&D model change based on KAITIAN
Small program IDE running on the browser
Create a high degree of freedom IDE layout system based on React
Tide R&D platform · Layout new infrastructure for R&D
How to quickly implement WebIDE within the team
We open sourced a lightweight Web IDE UI framework
Alibaba & Ant's self-developed IDE development framework OpenSumi is officially open source
Introduction to the basic framework of cloud IDE - ECLIPSE THEIA - Zhaosong Technology

Other IDE Products

Molecule
KAITIAN