Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical...
Transcript of Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical...
![Page 1: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/1.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
1
Philip Langer & Maximilian Koegel
EclipseSource
Building
Web-based Modeling Tools with
Theia and Che
![Page 2: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/2.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
2
● Accessibility○ No client installation○ Access through a web link○ Simple client updates○ Physical resource sharing
● Usability○ Modern UI look and feel○ SWT vs. HTML5○ GEF 3 vs. SVG
● Maintainability○ Room for evolution○ Availability of developers
Why web-based tools?
![Page 3: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/3.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
3
Generator
Analysis
Text
Diagrams
Forms
Workbench
A prototypical (modeling) tool
![Page 4: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/4.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
4
● Eclipse Theia○ Well-architectured, extensible cloud IDE platform○ Hosted at the best FLOSS community → Eclipse ;)
● Eclipse Che○ Kubernetes-native IDE platform (works with Theia)○ Management of workspaces and dev environments
● Monaco & Language server protocol (LSP)○ Protocol enabling the separation of editor (front-end)
and language implementation (back-end)○ Feature-rich and broadly adopted (VS Code)
Key enablers for building domain-specific, web-based tools
![Page 5: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/5.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
5
● Which components can be reused?● What needs to be reimplemented?● How do we separate frontend and backend functionality?
Domain-specific Modeling Environment
Reinventing the wheel?
DSML
codegen
validation
simulation
![Page 6: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/6.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
6
Browser: JS/TS
Node.js: JS/TS
JVM: Java
Typical reuse example: Code Generation
Eclipse Theia frontend
Eclipse Theia backend
Generator UI
Generator Launcher
Code GeneratorCode Generator
Backend extension
Frontend extension
![Page 7: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/7.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
7
Overall tool architecture
JSONForms
GLSP
EMF.cloud Model Server
LSP
![Page 8: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/8.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
8
● One connected model for coffee makers○ Structural model○ Behavioral model
● Example IDE with the following features:○ Tree-Editor for structural modeling with forms○ Graphical editor for behavioral model○ Code generation○ Working with source code○ Textual Modeling○ Model Analysis○ Multi-User Support
Demo overview
![Page 9: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/9.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
9
Demo: Form-based editing
![Page 10: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/10.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
10
Model Server
● Tree○ Based on Theia Tree Widget○ LabelPovider and ContentProvider
● Detail-Form○ Based on JSON Forms○ Declarative approach: JSON + UI Schema
● Synchronization○ Based on EMF.cloud Model Server○ Typescript-based Model Server client API
■ Push changes as commands ■ Subscribe to updates
Form-based editing
Browser
Node.js
JVM: Java
Theia frontend
Theia backend
Coffee Tree-Editor
Model Connector
⇒ Related talk: “Property editors in space”, Thursday 1pm, Theater Stage
![Page 11: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/11.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
11
Demo: Graphical Modeling
![Page 12: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/12.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
12
● Graphical Language Server Platform (GLSP)○ LSP for Graphical Editors○ Based on Eclipse Sprotty○ GLSP client:
■ generic■ renders graphical visualization
○ GLSP server: ■ specific to DSL■ maps model to graphical visualization■ applies layout■ synchronization with model server
Graphical Modeling
Browser
Node.js
JVM: Java
Theia frontend
Theia backend
GLSP Editor
GLSP Connector
Coffee GLSP Server
⇒ Related talk: “Diagrams in web and space with GLSP”, Thursday 15:10pm
JVM: Java Model Server
GLSP Core
![Page 13: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/13.jpg)
© 2019 EclipseSource | http://eclipsesource.com | Philip Langer & Martin Fleck | Diagrams in web and space with GLSP 13
Excursion: Separation of Concerns with GLSP
Modeling Backend
Client
Server
Protocol
Model Management
Live Validation
Commands
Editing Rules
Visual Feedback
Editing Tools
Diagram Rendering
Edit Transactions
![Page 14: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/14.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
14
Demo: Model Server
JSONForms
GLSP
EMF.cloud Model Server
LSP
![Page 15: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/15.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
15
Model Server
JSONForms
GLSP
EMF.cloud Model Server
LSP
![Page 16: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/16.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
16
● Component of EMF.cloud Eclipse project● Features:
○ Runtime state of loaded models (“shared editing domain”)○ Share potentially “dirty” runtime state of a model○ Command-based change interface○ Notification mechanism via sockets
● Convenient model access○ REST API: create, update, patch, save, ... models○ Multiformat: JSON or XMI supported○ Multiplatform: Java and JavaScript-based client API
Model Server
⇒ Related talk: “Lifting the greatness of EMF into the cloud with EMF.cloud”, Wednesday 12:35pm
EMF.cloud Model Server
![Page 17: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/17.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
17
Demo: Generators - Model to Text
![Page 18: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/18.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
18
● Based on Eclipse Xtend● Generator jar build with Maven● Launched on demand via CLI ● Generates into selected Theia workspace folder
Generators: Model to Text
![Page 19: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/19.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
19
Demo: Working with source code
![Page 20: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/20.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
20
Node.jsDAP
Connector
Browser● Enablers:○ Language Server Protocol (LSP)○ Debug Adapter Protocol (DAP)
● Theia Code Editor○ Monaco-based (VS Code)○ Uses LSP to “understand” language
● Theia Debug Extension (DAP)○ Uses DAP to support language debug
JVM: Java
Working with source code
Theia frontend
Theia backend
LSP Editor
LSP Connector
jdt.lsJDT
JVM: JavaYour Java Program
Debug UI
Java Debug Server
![Page 21: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/21.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
21
● 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 22: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/22.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
22
Demo: Textual Modeling
![Page 23: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/23.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
23
● Frontend: Theia Editor (Monaco)
● Backend:○ Language modeled as XText grammar○ Xtext Content Proposal Provider for activities○ Activities are fetched from Model Server ○ LSP Server fat Jar generated with XText tooling○ DSL LSP Connector launches LSP Server
Textual Modeling
Browser
Node.js
JVM: Java
Theia frontend
Theia backend
LSP Editor
LSP Connector
Xtext LSP Server
JVM: Java Model Server
Activity Provider
![Page 24: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/24.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
24
Demo: Model Analysis
![Page 25: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/25.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
25
Model Analysis
Browser
Node.js
JVM: Kotlin
Theia frontend
Theia backend
Analysis UI
Analysis Server
Analysis Service
JVM: Java Model Server
● Frontend:○ Uses D3 to visualize analysis results
● Backend:○ Fetches data from model server○ Calculates analysis result from data
![Page 26: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/26.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
26
Multi-User Support
![Page 27: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/27.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
27
Running Theia on Che
Workspace 1 Workspace 2 Workspace 3
Che ServerWS
Config A
Theia WS
Config
![Page 28: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/28.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
28
Excursion: Running applications on Kubernetes
Node Node Node Node Node
Master NodePod
![Page 29: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/29.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
29
Node
Excursion: Running Che and Theia on Kubernetes
Che Server Node Node Node Node
Master Node CheTheia WS
Config Browser
![Page 30: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/30.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
30
● 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○ Build dual-use components, enable reuse
● Long-term:○ Migrate use-case by use-case iteratively○ Deprecate desktop-based solution
Towards a migration strategy
Image © by Foofy
![Page 31: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/31.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
31
● Web-based modeling tools are feasible today ● Reuse and migration easier than expected● 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 and Eclipse CHE○ EMF.cloud, 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 32: Theia and Che with - EclipseCon 2020 Web... · specific to DSL maps model to graphical visualization applies layout synchronization with model server Graphical Modeling Browser Node.js](https://reader033.fdocuments.in/reader033/viewer/2022050516/5fa066a5f6ad5a72a11f5359/html5/thumbnails/32.jpg)
© 2019 EclipseSource | https://eclipsesource.com | Dres. Langer and Koegel | Building Web-based Modeling Tools with Theia and Che
32
this
WITH
Please
Thank you!