Modern (web-based) Tool and IDEs: Definitions, Concepts and Architecture

Over the last decade, the landscape of development tools and Integrated Development Environments (IDEs) has undergone a significant transformation, thanks to the switch to web technologies and the introduction of modern architectural patterns. However, many tool and IDE projects have lifecycles of well over a decade and do not adopt new technologies or best practices for quite some time.

At EclipseSource, we are often involved in strategic transformation projects that deal with the next generation of tool chains. This includes the initial phases where stakeholders explore the market, ecosystem, and state-of-the-art technologies. Through our customer projects, we have observed that an initial overview of the current state of the art is immensely helpful for tool builders embarking on a new project.

In this post, we describe key concepts that underpin modern tool and IDE architectures, exploring their characteristics, strengths, and how they interconnect. This is not a comprehensive guide; to keep the article concise, we focus on four fundamental concepts that are critical for understanding the current ecosystem of tool and IDE technologies. If you have any further questions, please feel free to get in touch with us.

Web-Based Tools

A web-based tool or IDE is a software application built on a web technology stack, in contrast to desktop-based stacks such as Eclipse desktop, and its architecture follows a client-server model. The client, typically hosting the UI, runs in a browser or browser-like environment, while the backend handles heavy lifting such as data storage, computation, or integration with external systems or components.

Web-based tools offer a seamless user experience, leveraging the flexibility and cross-platform nature of web technologies, combined with the leading-edge rendering capabilities of modern browser engines. They can run on a variety of devices, including desktops, tablets, and even smartphones. Aside from many advantages, consider the following key reasons why:

“Web-based tools and IDEs are the new standard now.”

• Web-based technologies are mainstream in the software industry: Most business and consumer software these days is implemented for the web. Being on the same technology stack allows tools and IDEs to benefit from innovation, have better-maintained base technologies, simplify recruiting, and ease integration with other systems and technologies.

• Web-based UIs allow redefining and improving UX for tools and IDEs: Modern browsers enable advanced rendering techniques, responsive layouts, and interactive designs, creating richer and more intuitive user experiences for tools and IDEs.

• Web-based tools can be deployed in the cloud: See the following section for more details.

If you want to learn more about these core advantages of tools, have a look at this talk summarizing 👉 Web-based Tools and IDEs: Accomplishments and Opportunities.

With frameworks like Electron or Eclipse Theia, web-based tools and IDEs can also be packaged as desktop applications, combining the power of web technologies with the convenience of local installations. VS Code, one of the most popular code editors today, also exemplifies this approach.

👉 Our service offering for web-based tools

👉 Building Web-Based Tools and IDEs - Pitfalls and Best Practices

👉 Eclipse Theia is the Next Generation Eclipse Platform for IDEs and Tools!

Cloud-Based Tools

A cloud-based tool or IDE represents a deployment model of web-based tools. In this paradigm, the backend—the server-side logic and infrastructure—is hosted in the cloud. Users access the application remotely via a web browser, connecting to a remote backend, without requiring any local installation or resources beyond a browser running the UI. This model unlocks several benefits typical of cloud-based applications, including:

1. Scalability: Resources can be scaled dynamically in the cloud to accommodate varying workloads.

2. Simplified Rollouts: Deploying new versions and updates is more straightforward compared to traditional setups.

3. Accessibility: Developers can work from anywhere, as long as they have internet access and a browser.

Note that a cloud deployment of a tool or IDE typically differs significantly from a classic web application. This is due to the “heaviness” of current IDE backends, which often require a file system, powerful language services, such as parsers or compilers, and a runtime environment for executing these processes. Tool or IDE backends are commonly deployed in a cluster, where each user operates their backend in a dedicated container. However, some projects are starting to break this paradigm by extracting certain features from the per-user backend to shared resources. For example, compilation services can be centralized to save resources and improve efficiency.

In any case, the current state-of-the-art setup requires infrastructure, operational costs, and orchestration. Frameworks like Theia Cloud simplify this process by providing generic features for workspace management, resource orchestration, and functionalities such as access control.

👉 Get in contact with us if you want to discuss your strategy to host tools or IDEs online

👉 Hosting IDEs and tools online - lessons learned

👉 Theia Cloud - Support and Consulting

Protocol-Based Architectures

Given their client-server architecture, a hallmark of modern tool and IDE design is the use of protocol-based architectures. In this pattern, the API for a specific reusable IDE or tool feature is encapsulated via a defined protocol, which standardizes the interaction between the tool or IDE and the feature. More precisely, there is one reusable protocol per feature type, e.g. for language support, debugging, diagrams, etc.

To integrate such a feature into a tool or IDE, the tool needs to “speak the protocol,” meaning it must implement the generic protocol to interact with the type of feature seamlessly. Features are then provided as so called “servers”, the tool connects to these servers via the defined protocol to integrate a specific feature. Every tool only needs to implement a specific protocol once to integrate an arbitrary number of a feature type and every feature can be integrated into any tool supporting the protocol.

Protocol-based architectures allow tools and IDEs to integrate arbitrary features implementing a defined protocol. Such features can consequently be used in all IDEs/Tools supporting the protocol as well.

As an example, the Language Server Protocol (LSP) allows the integration of programming language support into IDEs. The protocol itself is not specific to a programming language, but designed to support the code editing features of modern code editors, such as code completion, navigation, or error markers, generically. The language-specific implementation of those features are provided by a so-called language server that supports this generic protocol for a given programming language. The language server as such, in turn, is independent of a specific tool or IDE. Consequently, if a tool or IDE implements the LSP protocol, you can seamlessly integrate support for any language for which a “language server” exists..

This approach brings several key advantages:

• Reusability: Protocol-based architectures allow features to be easily reused across arbitrary tools or IDEs, reducing duplication of effort and fostering interoperability.

• Independent Development: Features can be developed by dedicated teams of experts who focus solely on the feature’s functionality, without dealing with specific IDE or tool concerns, thanks to the defined API (protocol). As an example, language experts for TypeScript can provide a language server for TypeScript without needing to know too much about code editor concerns in the UI.

• Language Flexibility: Developers can implement features in different programming languages, as long as they adhere to the protocol specification. This allows for example C/C++ experts to provide language support for C languages in web-based tools without requiring any knowledge of a web-based technology stack

• Independent Deployment: These features can also be deployed independently, running as separate processes or on different nodes.

So in general, protocol-based designs promote a clean separation of concerns, and foster modularity, making tools and IDEs easier to maintain, scale, and especially extend. Examples of available protocols or protocol-based architectures include:

• Language Server Protocol (LSP): Standardizes communication between IDEs and language servers, enabling features like syntax highlighting, code completion, and error detection without coupling the IDE to a specific language.

• Debug Adapter Protocol (DAP): Provides a standard interface for debugging tools, allowing IDEs to support various languages and runtimes using dedicated debug adapters.

• Graphical Language Server Protocol (GLSP): Extends the concept of protocol-based architectures to graphical modeling tools, enabling the integration of custom diagram editors and graphical notations.

• Model Context Protocol (MCP): Facilitates communication between AI-driven tools, e.g. built on Theia AI, with external services, such as internet search, file access or data base control. For more details, visit Theia IDE and Theia AI Support MCP.

• … and more protocol-based architectures are already available and coming up.

Many existing tools and IDE and underlying platforms provide support for many of the existing protocols out of the box, e.g. Eclipse Theia and VS Code both support most of the above (with the exclusion of VS Code and MCP at the moment of writing).

This architectural pattern is so successful in the market as it ensures that tools are highly extensible, composable, and future-proof. So if you implement modern tools and IDEs, you will very likely get in touch with it. Please note that protocol-based architectures are not exclusive to web-based tools. They are a way to integrate new technologies into legacy systems, too. As an example you can integrate all of the above mentioned examples into a traditional desktop IDE, too (see for example how GLSP-based diagram editors work in Desktop Eclipse).

👉 Get in contact with us if you want to learn more about protocol-based architectures or integrate them into your toolchain!

👉 See our service offerings for building modern diagram editors with GLSP

VS Code Extensions

At first glance, the concept of “VS Code Extensions” might seem too specific for the scope of this article or specific to the Visual Studio Code editor. However, extensibility by reusable features has always been a critical aspect of tools and IDE ecosystems. Protocol-based architectures, as described in the previous section, represent one facet of this extensibility story. VS Code extensions are another essential piece—and they are by no means limited to VS Code alone!

VS Code extensions are modular add-ons that enhance the functionality of VS Code and compatible IDEs such as Eclipse Theia, enabling features such as debug support, integration with external services, or custom UI components. These extensions are usually distributed through centralized hubs hosting thousands of contributions from individual developers, organizations, and the broader community. The two most common hubs are the VS Code marketplace and OpenVSX.

In essence, the VS Code extension API mirrors the principles of protocol-based architectures by exposing integration points through standardized APIs and protocols. This design ensures extensions can interact seamlessly with the IDE or tool while maintaining a clear separation of concerns. For example, many protocol servers (described in the previous section) are often deployed as VS Code extensions. These include functionalities like language support via the Language Server Protocol (LSP) or debugging capabilities via the Debug Adapter Protocol (DAP). A language server for Python or C++, for instance, can be packaged as a VS Code extension, making these features reusable and deployable across multiple tools and environments.

The extension ecosystem has been a cornerstone of VS Code’s success. However, also other platforms like Eclipse Theia are compatible and can be extended via VS Code extensions. This compatibility empowers tool builders to leverage the vast extension ecosystem even outside of VS Code or VS Code Forks, while at the same time, extension providers are shipping one extension that can be used in several different tools, giving them access to a broader audience and more flexibility to ship their feature in different tool environments.

Note that the Visual Studio Code Marketplace comes with restrictions, including licensing terms that limit its use to Microsoft’s VS Code product. To address these limitations, the open-source community created OpenVSX, an open alternative to the VS Code Marketplace. OpenVSX provides a similar experience while maintaining a fully open and vendor-neutral ecosystem.

In summary, VS Code extensions address the importance of a standardized, extensible architecture for modern tools and IDEs, making them an essential concept for tool builders to understand.

Conclusion

Modern tool and IDE architectures, including web-based, cloud-based, protocol-based designs, and the concept of extensibility through VS Code extensions, are reshaping the development landscape. These innovations empower tool builders to create more flexible, scalable, and user-friendly solutions, addressing the needs of diverse industries and users.
Of course, there is much more to explore when modernizing tools and IDEs or creating new products from scratch. AI integration into tools and IDEs, for example, might represent an even greater transformation, unlocking new levels of automation, efficiency, and innovation. At EclipseSource, we specialize in helping organizations navigate the complexities of modern tool and IDE development, including these transformative AI capabilities. Whether you’re building a next-generation solution or modernizing legacy systems, we provide the expertise and frameworks to support your journey extensively.

Let’s discuss how we can help elevate your project:

👉 Get in contact with us to discuss your requirements, use cases or strategy!

👉 Our service offering for web-based tools

👉 Our service offering for Tailored AI Assistance in Tools and IDEs

👉 Support and services for building tools with VS Code

👉 Support and services for building tools with Eclipse Theia

👉 Our service offering for Theia Cloud

👉 Our service offerings for building modern diagram editors with GLSP