Theia – One IDE For Desktop & Cloud

Today, I want to point you at a GitHub repository we have been contributing to for the last couple of weeks. Theia is a collaborative and open effort to build a new IDE framework in TypeScript.

Yet another IDE?”, You might think. Let me explain the motivation behind it and how its scope is unique compared to existing open-source projects.

Single-Sourcing Desktop & Browser (Cloud) Tools

Let’s start with the unique selling point: Theia targets IDEs that should run as native desktop applications (using Electronas well as in modern browsers (e.g. Chrome).

So you would build one application and run it in both contexts. Theia even supports a third mode, which is a native desktop app connecting to a remote workspace. No matter if you target primarily desktop or cloud, you can leverage the goodness of web technology and will be well prepared for the future. Although implemented using web technologies, neither VSCode nor Atom support execution in a browser with a remote backend.

Extensibility

Theia is an open framework that allows users to compose and tailor their Theia-based applications as they want. Any functionality is implemented as an extension, so it is using the same APIs a third-party extension would use. Theia uses the dependency injection framework Inversify.js to compose and configure the frontend and backend application, which allows for fine-grained control of any used functionality.

Since in Theia there is no two-class treatment between core code and extensions, any third-party code runs in the main application processes with the same rights and responsibilities the core application has. This is a deliberate decision to support building products based on Theia.

Dock Layout

Theia focusses on IDE-like applications. That includes developer tools but extends to all kinds of software tools for engineers. We think only splitting an editor is not enough. For such applications, you want to allow representing data in different ways (not only textual) and provide the user more freedom to use the screen estate.

Theia uses the layout manager library phosphor.js. It supports side panels similar to what JetBrains’ products do and allows the user to layout editors and views as they want in the main area.

dock_layout

Language Server Protocol

Another goal of this effort is to reuse existing components when sensible. The language server protocol (LSP) is, therefore, an important, central concept. Theia uses Microsoft’s Monaco code editor, for which I already found some positive words last week. That said, Theia has a thin generic editor API that shields extensions from using Monaco-specific APIs for the most common tasks. Also, other components, like Eclipse Orion’s code editor, could be utilized as the default editor implementation in Theia as well.

To show-case the LSP support, Theia comes with Eclipse’s Java Language Server which also nicely shows how to add protocol extensions. For instance, the Java LS has a particular URI scheme to open source files from referenced jars, which Theia supports.

lsp_support

TypeScript

The JavaScript (JS) language is evolving, but the different targeted platforms lag behind. The solution to this is to write code in tomorrow’s language and then use a transpiler to ‘down-level’ the source code to what the targeted platforms require. The two popular transpilers are Babel and TypeScript. In contrast to Babel, which supports the latest versions of JavaScript (ECMAScript), TypeScript goes beyond that and adds a static type system on top.

Furthermore, the TypeScript compiler exposes language services to provide advanced tool support, which is crucial to read and maintain larger software systems. It allows navigating between references and declarations, gives you smart completion proposals and much more. Finally, we are not the only ones believing TypeScript is an excellent choice (read ‘Why TypeScript Is Growing More Popular’).

Status Quo & Plans

Today we have the basic architecture in place and know how extensions should work. In the Theia repository, there are two examples (one runs in a browser the other on Electron), which you can try yourself. They allow to navigate within your workspace and open files in code editors. We also have a command registry with the corresponding menu and keybinding services. Depending on whether you run in Electron or a browser the menus will be rendered natively (Electron) or using HTML. The language server protocol is working well, and there are two language servers integrated already: Java and Python. We are going to wrap the TypeScript language service in the LSP, so we can start using Theia to implement Theia. Furthermore, a terminal gives you access to the workspace’s shell.

Don’t treat this as anything like a release as this is only the beginning. But we have laid out a couple of important fundamentals and now is a good time to make it public and get more people involved. The CDT team from Ericsson have already started contributing to Theia and more parties will join soon.

Although Theia might not be ready for production today, but if you are starting a new IDE-like product or looking into migrating the UI technology of an existing one (e.g. Eclipse-based), Theia is worth a consideration. Let me know what you think or whether you have any questions.

By | 2017-05-29T10:23:14+00:00 May 17th, 2017|Cloud IDE, DSLs, Eclipse, Language Server, Xtext|8 Comments

About the Author:

Sven is a passionate software developer. He has been doing language engineering and tool development for over 10 years now. He is the founder of Xtext.

8 Comments

  1. […] von Microsoft Monaco allerdings nicht in Stein gemeißelt: Sven Efftinge erklärt auf dem Blog von TypeFox, dass auch zum Beispiel Orions Code Editor genutzt werden […]

  2. Hallvard Trættberg May 18, 2017 at 20:46 - Reply

    Very promising, we’re looking for a simple (enough) environment for kids that want to learn Python and Java, without the initial hassle of setting up the environment

    The LSP does not yet support debugging and unit testing, does it? Isn’t that a must for any decent code editor?

    • Sven Efftinge May 19, 2017 at 07:19 - Reply

      The LSP is indeed not responsible for launching and debugging processes. But our friends from Ericsson are working on supporting that in Theia. They have a lot of experience with debuggers as they work on the CDT debugger as well as GDB. I cannot provide a time frame though. For Python you could use the command line and pdb for the time being.

  3. Max odendahl May 20, 2017 at 08:38 - Reply

    This sounds very similar to the eclipse che project. Any reason you are not contributing there vs starting something new ?

    Cheers
    Max

    • Sven Efftinge May 20, 2017 at 08:54 - Reply

      The IDE in Eclipse Che can only run in browsers and in the context of a Che workspace server but not standalone as a desktop app. Our customers need a solution that can be hosted from containers, similarly to Che but also run as standard desktop apps, similar to the traditional Eclipse IDE. So Theia aims at both desktop applications as well as cloud applications.

      That said, to me the sweet spot of Eclipse Che is not its IDE, but the workspace management. We are in close collaboration with Eclipse Che developers to make sure that Theia can be used within Che.

    • Sven Efftinge July 4, 2017 at 06:53 - Reply

      Yes, you can put any website into electron. But this will always only connect with a che server running somewhere.

  4. […] Read Full Story […]

Leave A Comment