Cloud-based technologies have taken up a lot of momentum at Eclipse. The new Eclipse project Sprotty fits well into this trend. With Sprotty, you can add modern diagrams to your web applications with little effort.
Sprotty’s client side is entirely based on web-native technologies: The code is written in TypeScript, avoiding surprises from cross-compilation when running in the browser. It uses a uni-directional flow of events and virtual DOM, similar to React/Flux. This approach simplifies testing a lot and it avoids the typical event feedback loops from traditional model-view-controller-based frameworks. By leveraging SVG for rendering and CSS for styling, Sprotty diagrams run smoothly in all major browsers, including the Eclipse browser widget. Typical problems like SVGs lack of layout facilities in combination with CSS styling are solved and nicely hidden from the user.
We have also put a lot of effort into a modern UX. For example, animations and visual transitions are built right into the core, helping users to better understand changes in the diagram. This even applies to undo/redo operations. The API abstracts these animations such that the application programmer does not have to deal with them.
Sprotty’s reactive architecture makes it possible to distribute the execution of a diagram arbitrarily between a client and a server. From our experience, diagrams often only show a small section of a huge dataset, e.g. from a database. Using Sprotty, the latter can remain entirely on the server. The client will be equipped only with the minimum details it needs to render the diagram
This matches exactly the scenario of the Language Server Protocol. Sprotty has been designed to play the graphical part in IDEs based on language servers, such as Eclipse Theia, VS Code, Eclipse (via lsp4e) and others. For that purpose, Sprotty ships with a powerful server library sprotty-server written in Java to extend language servers. In particular, Sprotty plays nicely with the language servers generated by the Eclipse Xtext framework. For an automatic layout, you can connect the Eclipse Layout Kernel easily.
When you use Sprotty in combination with Xtext, LSP4J, Eclipse Theia, Sprotty Theia and ELK, you have a full Eclipse open-source tool stack at your fingertips to build a workbench for domain-specific languages that runs in the cloud or as rich-client. For a reference, have a look at the yangster project.
As both the client and the server are wired up using dependency injection (InversifyJS/Guice), you can tweak almost every aspect of the code beyond the defaults, giving you the flexibility you need for production-ready applications.
Sprotty has been initiated by TypeFox and Ericsson and has been picked up by other companies such as Obeo and EclipseSource in the meantime. We at TypeFox use it successfully in many customer projects. Even the Graphics Server Protocol initiative mostly mirrors Sprotty’s protocol. Sprotty is now becoming an Eclipse Project under the umbrella of the Eclipse Cloud Development project. While we initially focused on graphical views, the framework got more and more contributions in the direction of diagram editing.
You can play around with Sprotty on our example website. We’re currently moving a lot of things to Eclipse, so if you are interested in more, check the repository or the forum.
This post was originally published in the October 2018 issue of the Eclipse Newsletter: Discover New Eclipse Projects.
For more information and articles check out the Eclipse Newsletter.
The post Eclipse Sprotty: Diagrams in the web appeared first on JAXenter.
Source : JAXenter
