Eclipse Theia: Build your own IDE

During software development, the choice of the development environment may prove to be very important. They provide many helpful features that aid the developer write clean and error-free code. However, it is a common issue that the development environment varies across collaborating developers and may even lack certain functionalities.

In this blog series, I want to introduce the Eclipse Theia framework which allows you to build your own integrated development environment (IDE) that can be tailored to meet your individual needs as a developer. You can even run the resulting IDE in your web browser to provide a common development environment for you and your team. This blog post will give you a rough overview over the framework while future posts will provide a step-by-step guide on how to write your own Theia extensions.

What is Eclipse Theia?

Firstly, Eclipse Theia is a framework that uses different building blocks to construct the IDE. There are Theia extensions, Theia plugins and Visual Studio Code (VS Code) extensions. You may already know the latter from your VS Code source code editor. The advantage of the Theia framework is that it uses these components to construct the IDE in a modular and extensive way. By default, the resulting IDE resembles the VS Code editor visually and in features like the code editor, the adjustable window layout, or the preference store.

How does it work?

The Theia framework is built with Node.js. Hence, you will have an easier start if you are familiar with TypeScript and Node.js. In order to build a minimal IDE, you should check that all prerequisites are installed. Then you can check out my example repository at the „minimal-IDE“ tag with

git clone git@github.com:methodpark/theia-sample.git
cd theia-sample/
git checkout minimal-IDE

At the time of this post, Theia is at version 1.40.0 and I am using Node.js version 16.20.1.

yarn is the recommended package manager for building the IDE. Thus, execute the following commands to run this example

yarn && yarn build && yarn start

Now you can access the IDE with your browser at „localhost:3000“. The image below shows the resulting minimal IDE.

You may adjust the list of dependencies with the packages for your individual use case. By querying the npm registry you will already find many existing Theia extensions. Moreover, you can even write your own Theia extension with JavaScript/TypeScript if there is no package that provides your desired functionality as we will see in the next part of this blog series.

Distribution of the IDE and possibilities

You can decide if you want to host the IDE in the cloud, run it as a desktop application or even deliver it from an embedded Linux device. Each variant has its opportunities that are waiting for you to explore them. For example, if you aim to make the IDE available for many people, the cloud hosted approach might be the right choice. Moreover, you could consider integrating some documentations directly into the IDE. Thus, the users of your platform could easily search for some function description of a shared library.

The Arduino IDE 2.0 is a good example for a locally running IDE that is based on the Theia framework.

Another scenario would be to deploy the IDE to an embedded device. Consider for instance the Coffee Editor Example that even includes a graphical workflow editor. You could add a similar tool to your next embedded product. This way you can enable a variety of users to develop directly on the embedded device. Additionally, it would be possible to add a monitoring utility to the IDE. It allows you to observe the CPU and memory usage as well as other changes in the system in real time. Besides, you may use the IDE to review debug messages or to control the device. In other words, you can use it to provide maintenance and support.

If I piqued your interest you can take a look at the upstream Theia project, the Theia documentation and the Theia website for more information and examples.

Conclusion

In summary, the advantages of the framework are certainly its high degree of adaptability and flexibility due to the modular approach. You can easily use different sets of building blocks to create multiple IDEs with each one being tailored to a target audience.

In the next post we will start to dig deep and create our first custom Theia extension.

For more Software Engineering related topics go to Software Engineering | Method Park by UL.