An increasing number of tools that have originally been rich clients are moving into the web. E.g. cloud IDEs already offer a coding experience close to those based on the traditional Eclipse Rich Client Platform. But they still lag behind when it comes to diagrams: Existing graphical frameworks for the web, like D3.js or JointJS, either focus on visualizing datasets (i.e. numbers rather than models), require the models to be fully available on the client, or are too low-level to implement a diagram view with reasonable effort.
The work on Sprotty started in March 2017 as a joint effort of Ericsson and TypeFox to fill exactly this gap. Sprotty is a framework that allows to easily add modern graphical views and editors to cloud IDEs or other applications that run in a browser. The role of Sprotty for web-apps is similar to that of the Graphical Editing Framework for Eclipse Rich Clients. Using web-technologies only, Sprotty has a fast and reactive architecture. Based on several years of experiences with graphical frameworks we aimed at providing a unique user experience.
Starting with a few prototypes we have now integrated Sprotty diagrams successfully with Xtext, the Language Server Protocol (LSP), Eclipse Layout Kernel (ELK), Eclipse Theia, and even Eclipse IDE. We first presented Sprotty to the public at EclipseCon Europe 2017 and got excellent feedback. Since then, we have started using Sprotty in customer projects, and others have picked it up as well, e.g. Obeo implemented their prototype of Sirius in the Web based on Sprotty.
Within the scope of Eclipse Sprotty are
-
Diagrams to browse and manipulate models in web applications.
-
Support for a distributed runtime: share the workload between a client and server.
-
An extensible protocol for the communication between client and server
-
Diagram authoring facilities: choosing the content of a diagram, arranging diagram elements manually, adding/removing diagram elements, exploring the neighborhood of an element, reconciling a diagram with changes of the underlying model, trigger auto-layout.
-
Diagram navigation facilities: open elements, drill up/down, zoom/scroll/center/fit, selection etc.
-
Graphical editing facilities: changing the underlying model via the diagram, create/delete/change/customize/connect elements, undo/redo etc.
-
Exporting diagrams to a vector-based graphics format.
-
Integration with Xtext and LSP to visualize programming artifacts.
-
Integration with IDE frontends like Eclipse Theia or Eclipse IDE.
-
Integration with auto-layout engines such as the ELK.
Out of scope are
-
Auto-layout algorithms for diagrams. We rely on existing frameworks like ELK instead.
-
Visualization of huge datasets, like statistical data or timeseries. These are much better handled with frameworks like D3.js. Sprotty focusses on models, i.e. connected elements with fewer properties.
-
3-dimensional visualization.
-
Specific model editors/views, e.g. for UML. Of course, Sprotty can be used to implement such a thing, but this should be done in separate downstream projects.
-
Tools to author specific diagram editors, like GMF Tooling or Sirius do.
Eclipse Sprotty is a next-generation, open-source, web-based diagramming framework.
Instead of using a cross-compiler or an existing framework, we decided to start from scratch with web technologies: The client is implemented in TypeScript, SVG is used for rendering, and CSS for styling. We also use a unidirectional event-cycle with a virtual DOM as opposed to the traditional model-view-controller pattern to better fit the demands of web applications.
One focus is on a modern, user-centric look and feel. For example, animations are built right into the core of the framework, such that the user always sees smooth transitions to guide the user’s eye. Model updates, undo/redo, navigation, everything is animated by default.
Sprotty explicitly supports to use a remote backend, allowing to visualize data that is not necessarily present in the browser app. This is not only a preferred scenario for database backends, but also meets the setting of the Language Server Protocol, where the backend encapsulates the semantics of the language. Thus, you can extend a language server with a Sprotty backend that delivers Sprotty diagrams to the frontend. As most Cloud IDEs are using the LSP, this makes Sprotty an excellent choice for diagrams to visualize code, like type-hierarchies, component dependencies etc.
For the communication between client and server, Sprotty defines a very simple but extensible JSON protocol. As the same messages are used as events in the client internally, you can almost arbitrarily balance the memory demands and computational workload between client and server by passing certain messages to the server while processing others locally. Part of the protocol is a similarly extensible diagram model, which can even be used for models beyond the usual nodes, edges and ports.
As the code is wired-up using dependency injection, you can not only add your own model elements, figures, behaviors, etc. but also replace other default components that don’t fit your need. This way Sprotty is extremely adaptable to all kinds of use cases.
In addition, Sprotty provides glue code to integrate with
-
The Language Server Protocol,
-
Xtext language backends based on LSP,
-
The Eclipse Theia IDE framework, and as such with Eclipse Che,
-
The Eclipse Layout Kernel, both client-side and server-side,
-
Eclipse RCP, via lsp4e and the SWT browser widget.
We have to switch from Apache 2.0 to EPL2/GPL-2 (Secondary).
In company of Eclipse Che, Eclipse Orion and soon Eclipse Theia as well, Eclipse Sprotty seems to provide the missing graphical piece to the cloud technologies at Eclipse. Eclipse also has a very strong standing in the modeling community, to whom Sprotty could be interesting as well. Into the bargain, the currently involved parties are already well organized and connected by the Eclipse project.
-
Improve diagram authoring facilities.
-
Allow graphical editing. Sprotty is currently focussed on views, i.e. it is not possible to change the underlying model by means of the diagram.
-
Clean up APIs.
-
Extract a JSON protocol analogously to LSP.
The initial contribution can be done as soon as the project proposal is accepted. First builds will be ready shortly after.
- Philip Langer (EclipseSource)
- Mélanie Bats (Obeo)
Source code from Github including
-
Client (TypeScript/SVG/CSS)
-
Server (JSON protocol, Xtend, Java)
-
Integration with Xtext LSPs (Xtend, Java)
-
Integration with the Eclipse Theia IDE (TypeScript)
-
Integration with Eclipse (Xtend, Java)
-
Examples
- Log in to post comments
Great proposal
Submitted by Thomas Porcham on Sat, 07/21/2018 - 08:37
I think this proposal will take web diagramming to the next level.
By making this an Eclipse project collaboration of all interested parties wil supported.
Can't wait for the Sprotty Eclipse Project