DSLs in the Cloud with Eclipse Technologies Jan Khnlein Miro - - PowerPoint PPT Presentation

▶
dsls in the cloud with eclipse technologies
SMART_READER_LITE
LIVE PREVIEW

DSLs in the Cloud with Eclipse Technologies Jan Khnlein Miro - - PowerPoint PPT Presentation

Jul 15, 2023 261 likes •620 views

DSLs in the Cloud with Eclipse Technologies Jan Khnlein Miro Spnemann @jankoehnlein @sponemann The Aim: A DSL Tool in the Browser Code Generator Graphical View Workspace and Tool Integration Intelligent DSL Editor

slide-1
SLIDE 1

Jan Köhnlein Miro Spönemann

@jankoehnlein @sponemann

DSLs in the Cloud – with Eclipse Technologies

slide-2
SLIDE 2

The Aim: A DSL Tool in the Browser

Intelligent 
 DSL Editor DSL Validation Content Assist Graphical
 View Code Generator Workspace and
 Tool Integration

slide-3
SLIDE 3

Architecture

Browser Server

IDE Application

Code Editor Graphical View Graphics Extensions

Language Server

Text Editor Services

Language
 Server Protocol

Workspace Services

slide-4
SLIDE 4

Technologies

Browser Server

Theia Application

Text Editor Sprotty View

Language Server

Xtext LS

lsp4j

Sprotty LS Extension ELK Layout

All open-source from

slide-5
SLIDE 5

Next: Xtext Language Server

Browser Server

Theia Application

Text Editor Sprotty View

Language Server

Xtext LS

lsp4j

Sprotty LS Extension ELK Layout

slide-6
SLIDE 6

Building a DSL with

(1) Create Xtext project 
 with LSP support (via lsp4j) (2) Specify an Xtext Grammar (3) Write a Code Generator (4) Generate the Language 
 Server

slide-7
SLIDE 7

A Simple StateMachine DSL with

grammar io.typefox.examples.theia.states.States 
 with org.eclipse.xtext.common.Terminals generate states 
 "http://www.typefox.io/examples/theia/states/States" StateMachine: 'statemachine' name=ID (states+=State | events+=Event)*; State: 'state' name=ID transitions+=Transition*; Event: 'event' name=ID; Transition: event=[Event] '=>' state=[State]; statemachine MrsGrantsSecretCompartment event doorClosed event drawOpened event lightOn event panelClosed state active lightOn => waitingForDraw drawOpened => waitingForLight state idle doorClosed => active state waitingForLight lightOn => idle state waitingForDraw drawOpened => unlockedPanel state unlockedPanel panelClosed => idl

Grammar DSL

slide-8
SLIDE 8

(1) Scoping (2) Validation (3) Formatter (4) Fine tune content assist (5) Code Templates (6) …

Make it Nice with

“Butterfly Tattoo Vector” by Riki Maltese is licensed under CC BY

slide-9
SLIDE 9

Xtext Language Server

Browser Server

Theia Application

Text Editor Sprotty View

Language Server

Xtext LS

lsp4j

Sprotty LS Extension ELK Layout

slide-10
SLIDE 10

Next: Theia Application

Browser Server

Theia Application

Text Editor Sprotty View

Language Server

Xtext LS

lsp4j

Sprotty LS Extension ELK Layout

slide-11
SLIDE 11
  • Cloud and Desktop IDE Framework
  • Written in TypeScript

Frontend Backend

File System

JSON-RPC

slide-12
SLIDE 12

Frontend Backend

Core Extension DSL Theia Extension Git Extension Workspace Extension Frontend DI Container Backend DI Container

…

Theia Extensions

slide-13
SLIDE 13

Scaffolding a Theia Extension

└──> yo theia-extension ? The extension's name states-dsl StatesDsl create package.json create lerna.json identical .gitignore create README.md identical .vscode/launch.json create states-dsl/package.json create states-dsl/tsconfig.json create states-dsl/src/browser/states-dsl-frontend-module.ts create states-dsl/src/browser/states-dsl-contribution.ts create browser-app/package.json create electron-app/package.json yarn install v1.8.0 info No lockfile found. [1/4] 🔎 Resolving packages... [2/4] 🚛 Fetching packages... [3/4] 🔘 Linking dependencies... [4/4] 📄 Building fresh packages... success Saved lockfile. $ lerna run prepare
 … lerna success run Ran npm script 'prepare' in packages: lerna success - states-dsl lerna success - browser-app lerna success - electron-app ✨ Done in 57.10s. └──>
slide-14
SLIDE 14

Theia Application

Browser Server

Theia Application

Text Editor Sprotty View

Language Server

Xtext LS

lsp4j

Sprotty LS Extension ELK Layout

slide-15
SLIDE 15

Next: DSL Theia Extension

Browser Server

Theia Application

Text Editor Sprotty View

Language Server

Xtext LS

lsp4j

Sprotty LS Extension ELK Layout

slide-16
SLIDE 16

(1) Copy the LS binary to the extension (2) Register language to the frontend DI Module (3) Register language to the backend DI Module

Integrate LS and Theia Extension

dsl-theia-extension

backend

LS Launcher Backend Module

frontend

Language Config Frontend DI Module Xtext Language Server

slide-17
SLIDE 17

(1) Syntax highlighting
 (TextMate grammar) (2) Bracket matching, folding
 (Monaco config)

Make it Nice

“Butterfly Tattoo Vector” by Riki Maltese is licensed under CC BY

slide-18
SLIDE 18

DSL Theia Extension

Browser Server

Theia Application

Text Editor Sprotty View

Language Server

Xtext LS

lsp4j

Sprotty LS Extension ELK Layout

slide-19
SLIDE 19

Next: Add Diagrams

Browser Server

Theia Application

Text Editor Sprotty View

Language Server

Xtext LS

lsp4j

Sprotty LS Extension ELK Layout

slide-20
SLIDE 20

Sprotty

  • A web-based diagramming framework
  • TypeScript, SVG, CSS
  • Supports LSP
  • Moving to Eclipse
slide-21
SLIDE 21

Sprotty

CommandStack Viewer

Command Action SModel

ActionDispatcher

slide-22
SLIDE 22

Sprotty Client-Server

CommandStack Viewer

Command Action SModel Action

Diagram Server ActionDispatcher

slide-23
SLIDE 23

Sprotty LSP

CommandStack Viewer

Command Action SModel LSP

ActionDispatcher Xtext LS Diagram Generator Diagram Server

slide-24
SLIDE 24

d

Theia-Sprotty

CommandStack Viewer

Command Action SModel LSP

ActionDispatcher

Theia Widget Theia Backend

Xtext LS Diagram Generator Diagram Server

slide-25
SLIDE 25

Sprotty Diagram Generator

class StatesDiagramGenerator implements IDiagramGenerator {

  • verride generate(Resource resource, …) {

(resource.contents.head as StateMachine).toSGraph() } def toSGraph(StateMachine sm) { new SGraph [ type = 'graph' children = sm.states.map[toSNode] + sm.allTransitions.map[toSEdge]) ] } def toSNode(State state) { new SNode [ type = 'node' children += new SLabel [ type = 'label' text = state.name ] ] } def toSEdge(Transition transition) { new SEdge [ sourceId = transition.fromState.name targetId = transition.toState.name type = ‘edge' ] }

slide-26
SLIDE 26

(1) Add custom figures (2) Style with CSS (3) Macro layout with 
 Eclipse Layout Kernel (ELK) (4) Add tracing

Make it Nice

“Butterfly Tattoo Vector” by Riki Maltese is licensed under CC BY

slide-27
SLIDE 27

Questions?

slide-28
SLIDE 28

And What About
 Graphical Editing?

slide-29
SLIDE 29

Don’t do it!

Graphical Views FTW!

slide-30
SLIDE 30

If it should work at all…

… it must be text first!

slide-31
SLIDE 31

Sprotty: Text-first LSP Graphical Editing

Graphical edit actions => textual LSP requests (1) Create Node => CodeAction (2) Rename Label => Rename (3) Rename X-Ref => CodeAssist (4) Create Edge => WorkspaceEdit beta

slide-32
SLIDE 32

Demo

slide-33
SLIDE 33

References

  • www.xtext.org
  • gihub.com/eclipse/lsp4j
  • www.theia-ide.org
  • github.com/eclipse/sprotty
  • github.com/eclipse/elk
  • github.com/TypeFox/theia-xtext-sprotty-example
slide-34
SLIDE 34

Evaluate the Sessions

  • 1 0 +1

Sign in and vote at eclipsecon.org