Theia is the new star on the dev tools sky: with Theia, you can write your own IDE-like applications that run as desktop tools as well as in the browser. Theia is web-native, entirely written in Typescript, and offers a degree of customizability similar to Eclipse RCP. It is open source and in the process of becoming an Eclipse project, backed by companies like TypeFox, Ericsson, ARM, RedHat, Google, IBM and SAP.
In this workshop, you’ll get acquainted with the base architecture of Theia, you will learn how to compose existing building blocks to author your own specialized IDE, and you will see how to implement your own extensions.
The workshop consists of several exercises. For each exercise, there are 2 branches in the repository: one with an exercise and another with a solution.
During the workshop, you will use Theia-based Online IDE for GitHub - Gitpod.
To start with the exercises you only need a modern browser. For the best experience, please use Chrome.
You can open any branch on GitHub by prefixing its URL with gitpod.io#.
For example, to open Gitpod for the exercise 0:
- go to the exercise's branch - https://github.com/jbicker/theia-training/tree/exercise-0
- prefix it with
gitpod.io#- https://gitpod.io#https://github.com/jbicker/theia-training/tree/exercise-0
In this exercise, you learn:
- the structure of a Theia extension project;
- how to create a Theia application, build and run it;
- how to configure a Theia extension with dependency injection.
In this exercise, you learn:
- frontend and backend application lifecycle and contributions;
- how to register commands, keybindings and menus;
- how to use the command palette and the status bar;
- how to open files.
In this exercise, you learn:
- what is a widget and its lifecycle hooks;
- how to add a view (singleton widget);
- how to render in React;
- how to preserve a widget state between reloads.
In this exercise, you learn:
- how to add a new JSON-RPC service;
- how to handle reconnections;
- what is the connection scoping and how to work with multiple windows.
In this exercise, you learn:
- how to add a new open handler;
- how to configure and use preferences;
- what is the navigatable widget and how to implement one.
In this exercise, you learn:
- what is a language server protocol (LSP);
- how to integrate a language server via a native Theia extension;
- how to integrate a language server via a VS Code extension.
In this exercise, you learn:
- how to customize the default layout;
- how to customize the menu bar;
- how to remove functionality;
- how to customize theming.