Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor...
Transcript of Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor...
![Page 1: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/1.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 1
Philip Langer & Maximilian KoegelEclipseSource
Building Web-based Modeling Tools
based on Eclipse
![Page 2: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/2.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 2
○ Modern UI technology■ SWT vs HTML5■ GEF 3 vs SVG■ Styling
○ Simplified deployment■ Installing tool vs. opening a link■ Access from everywhere immediately■ “Cloud Modeling Tool”
Why web-based?
1
2
![Page 3: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/3.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 3
● High uncertainty about frameworks’…○ maturity○ mid-term maintenance
● Small ecosystem for modeling tool components:○ fewer components○ lower level of abstraction○ less features
=>Higher cost (order of magnitude)
Challenges with web-based technology
![Page 4: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/4.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 4
● Standalone - Build standalone components ● Abstraction - Isolate components from frameworks ● Declarative - Use declarative artifacts● Services - Factor-out business logic
Major strategies to mitigate challenges
![Page 5: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/5.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 5
● Extensible● Well-architectured
○ Extensible via DI○ Extensive use of existing components
● Includes core features ○ Code Editing○ Console○ Workspace○ Windowing
● Deployment○ Browser-based○ Desktop-based via Electron
● Open Source and Community
Why Eclipse Theia?
![Page 6: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/6.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 6
Local (Electron and Node Server)
Local (Browser / Electron)
Remote (Node Server)
Theia architecture and deployment
Eclipse Theia Frontend
Eclipse Theia Backend
Frontend extension
Backend extension
![Page 7: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/7.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 7
● Example IDE for modeling coffee makers● Structural model with tree-based visualization● Code editing● Behavioral model with graphical visualization● Analysis of behavior● Code generation and testing
Demo of a web-based IDE
![Page 8: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/8.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 8
Tree-based editor - Demo
![Page 9: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/9.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 9
● Editor based on JSON Forms○ Declarative Form-based UIs (Excursion)○ Based on JSON Schema and UI Schema
● Forms Server○ Supplies Data to client○ Supplies JSON Schema and UI Schema to client
Tree-based editor - Implementation
Eclipse Theia Frontend
Eclipse Theia Backend
JSON Forms Editor
Forms Server
![Page 10: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/10.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 10
Excursion: Declarative form-based UIs
User Interface JSON Schema(Data Schema)
UI Schema
RendererSet
![Page 11: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/11.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 11
Java code editing - Demo
![Page 12: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/12.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 12
● Generic LSP Client (Excursion: Language Server Protocol)○ Component reuse: Monaco Editor from VSCode○ Ships integrated into Eclipse Theia
● Java-specific LSP Server○ Eclipse JDT Language Server○ Based on Eclipse JDT
Java code editing - Implementation
Eclipse Theia Frontend
Eclipse Theia Backend
Monaco Editor
Java LSP
![Page 13: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/13.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 13
● Separation of concerns○ Tooling for editing code and textual DSLs○ Language smarts: auto-completion, refactoring support
● Advantages○ LSP-Client is language-agnostic○ LSP-Server is tool-agnostic
Excursion: Language Server Protocol
![Page 14: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/14.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 14
Graphical editor - Demo
![Page 15: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/15.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 15
● Adopts concept of LSP for graphical editors● GLSP Client is graphical-language agnostic
○ Editing of nodes and edges○ Based on Eclipse Sprotty Framework
● GLSP Server is tool-agnostic○ Reads in semantic model and layout○ Handles requests and changes from clients
Graphical editor - Implementation
Eclipse Theia Frontend
Eclipse Theia Backend
GLSP Client
GLSP Server
![Page 16: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/16.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 16
Code generation and testing - Demo
![Page 17: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/17.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 17
● Frontend:○ Menu contribution to launch generation and test run
● Backend:○ Code generator based on Eclipse Xtend○ Test Runner based on JUnit Test Runner○ Wrapped into custom JSON-RPC Server
Code generation and testing - Implementation
Eclipse Theia Frontend
Eclipse Theia Backend
Generator Frontend
Generator Backend
![Page 18: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/18.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 18
Textual editor - Demo
![Page 19: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/19.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 19
● Frontend: Generic LSP Editor (Monaco)● Backend:
○ LSP Server for the Analysis configuration language○ Language modeled as XText grammar○ LSP Server generated from grammer with XText tooling
Textual editor - Implementation
Eclipse Theia Frontend
Eclipse Theia Backend
Monaco Editor
Custom XText Server
![Page 20: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/20.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 20
Workflow analysis view - Demo
![Page 21: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/21.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 21
● Frontend:○ Menu contribution to trigger analysis○ D3-based visualization of result from backend
● Backend:○ JSON-RPC Server○ Custom business logic to calculate probabilities
Workflow analysis view - Demo
Eclipse Theia Frontend
Eclipse Theia Backend
Analysis Frontend
Analysis Backend
![Page 22: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/22.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 22
● Now: Define a strategy and timeplan, build POC● Short-term: Consider for architectural decisions● Mid-term:
○ Prepare architecture for migration iteratively○ Migrate high-value use cases iteratively
● Long-term:○ Migrate use-case by use-case iteratively○ Deprecate desktop-based solution
→ ECE Talk: “If, when and how? - Strategies towards web-based tooling”
Towards a migration strategy
Image © by Foofy
![Page 23: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/23.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 23
● Web-based Modeling Tools are feasible● But usually more costly● Web technology can leverage unique advantages
○ Modern UI and styling○ Zero installation for users○ Enables “cloud” business models
● There is open-source components ○ Eclipse Theia○ LSP, GLSP, JSON Forms, XText, Sprotty and D3○ Existing business logic can often be reused
● Demo code available: https://github.com/eclipsesource/coffee-editor
→ Important now: Define strategy and timeplan, build POC
Summary
![Page 24: Eclipse...Generic LSP Client (Excursion: Language Server Protocol) Component reuse: Monaco Editor from VSCode Ships integrated into Eclipse Theia Java-specific LSP Server Eclipse JDT](https://reader036.fdocuments.in/reader036/viewer/2022081621/611e2bba082ca34ea707dd7b/html5/thumbnails/24.jpg)
© 2018 EclipseSource | http://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools based on Eclipse Theia 24
this
WITH