初探DSL和基于Theia的WEB IDE

callMe小王
762 阅读6分钟

目的：搭建一个内置DSL语言的WEB IDE

目录

  • DSL
  • xtext
  • LSP
  • theia
  • sprotty、GLSP

如何描述自定义语言？

在这里首先就要介绍DSL（domain-specific language，翻译过来就是，领域特定语言）例如SQL、HTML、JSON和ST（这就是我要实现的目标语言Structure Text）等等。同时与DSL相对的概念就是GPL(general puepose language，通用编程语言)如C、JavaScript、python等这些耳熟能详语言。

而如何去描述DSL语言的语言规范?目前我选择的实现方法是：Xtext

Xtext是用于开发编程语言和DSL的框架。使用Xtext，可以用强大的语法语言来定义你的语言。因此，你可以得到一个完整的基础架构，包括解析器、链接器、类型检查器、编译器以及对Eclipse的编辑支持、任何支持语言服务器协议的编辑器和您最喜欢的Web 浏览器。

选择使用Xtext的原因如下：

  • 能很好的去描述DSL的语言规范（Xtext的the grammer language还是比较通俗易懂的）；
  • Xtext有相伴的程序设计语言(Xtend)，它可以将DSL自动翻译成别的语言。比如，DSL的目标语言是ST语言，使用Xtend可以将ST翻译Java代码或者C++代码。
  • Xtext支持LSP。

（xtext的grammer language和xtend具体实现暂时就不仔细展开，有关它们的具体介绍请去查阅官方文档xtext的官网和《implementing domain-specific languages with Xtext and Xtend by Bettini L.》）

LSP

什么是LSP?

语言服务器协议 (LSP)是用于编辑器或IDE和语言服务器之间的一种协议，该协议提供诸如自动补全、转到定义等功能查找所有应用等语言功能。

语言服务器协议 (LSP)背后的想法是,标准化语言服务器和开发工具如何通信的协议。这样，单个语言服务器可以在多个开发工具中重复使用，从而可以轻松地支持多种语言。

语言服务器作为单独的进程运行，开发工具使用 JSON-RPC 上的语言协议与服务器通信。以下是在例行编辑会话期间工具和语言服务器如何通信的示例：

language-server-sequence.png

  • 用户在工具中打开文件(文档)：IDE通知语言服务器文档已打开（'textDocument/didOpen'）。从现在开始，关于文档内容的不再存在于文件系统中，而是由IDE保存在内存中。IDE和语言服务器之间同步内容。

  • 用户进行编辑：该工具将文档更改通知服务器（'textDocument/didChange'），并且文档的语言由语言服务器更新。发生这种情况时，语言服务器会分析此信息并将检测到的错误和警告通知IDE（“textDocument/publishDiagnostics”）。

  • 用户在打开文档上执行“转到定义”：该工具发送带有两个参数的“textDocument/definition”请求：（1）文档 URI （2）“转到定义”的文本位置。 请求已向服务器发起。服务器以文档 URI 和文档中符号定义的位置进行响应。

  • 用户关闭文档（文件）：从IDE发送“textDocument/didClose”通知，通知语言服务器该文档现在不再在内存中。当前内容现在在文件系统上是最新的。

以上是LSP的简单介绍，有关LSP的更多内容，请去查阅官方文档LSP的官网

编辑器或IDE的我们选择用Theia来实现。

什么是Theia？

Theia 是一个可扩展的平台，使用 Web 技术开发成熟的多语言云和桌面 IDE 类产品。

theia可以：

  • 搭建平台，打造类IDE产品
  • 为最终用户提供成熟的多语言 IDE（不仅仅是智能编辑器）
  • 同等支持 Cloud IDE 和 Desktop IDE
  • 通过语言和调试服务器协议提供对多种语言的支持
  • 使用 javascript UI 库提供现代 GUI

Theia和VS Code比较相似，VS Code是成熟的桌面应用程序（也有web版，但不是开源的）；Theia是完全开源的，并且可以同时搭建WEB IDE 和 桌面IDE，并且兼容VS Code的插件，支持LSP等。

有关Theia的更多内容，请去查阅官方文档Theia的官网

在考虑实现WEB IDE的时候，想要同时实现文本编辑器和图形编辑器，然后就找到一个解决方案：GLSP + Sprotty。

GLSP + Sprotty

图形语言服务器平台 (GLSP) 是一个可扩展的开源框架，用于构建基于 Web 技术的自定义图表编辑器。除了可扩展的客户端框架和服务器框架之外，GLSP 还为图表提供了语言服务器协议 (LSP)。这样一来，GLSP 就可以开发基于 Web 的现代图表编辑器，而根据建模语言规则进行的加载、解释和编辑等繁重的工作被封装在服务器中。GLSP 提供集成层，以便在网页、Eclipse Theia、VSCode中无缝使用 GLSP 编辑器。

GLSP 的架构非常灵活，并提供了多种实现选项：

glspoverview.png

  • GLSP Server

    GLSP 服务器可以用 Java 或基于 nodejs 的 Typescript 编写。

  • Source Model

    可以使用任何格式或框架来管理您的源模型。对于最常见的选择，GLSP 提供了专用的基础模块，例如EMF、emf.cloud或 GModel-JSON ，其中直接包含图形模型。

  • Tool Platform(GLSP Client)

    图编辑器可以在多个工具平台中使用，也可以在普通 Web 应用程序或电子应用程序中使用。虽然 GLSP 编辑器可以集成到任何 Web 应用程序中，但 GLSP 提供了专用的集成组件，用于在Eclipse Theia 或 VS Code中无缝部署 GLSP 编辑器。

GLSP 为最流行的选择提供了项目模板（这才叫快速入门啊喂！）

（以上的项目模板中就包含了Sprotty,有关Sprotty的更多介绍请看这里 ）

有关更多的GLSP的介绍，请去查阅官方文档GLSP的官网

小结

以上全部内容简单的介绍了实现DSL语言的WEB IDE的技术路线图。总的来说就是，基于Xtext实现DSL的语言服务器以及自动生成C或Java等代码；基于Theia实现IDE(WEB或者本地)；IDE和语言服务器之间通过LSP进行通信；最后，基于GLSP来实现图形化编辑器。

虽然，感觉是把路线图摸清楚了，但是这里面还是有不少的坑和难点没有解决。比如，Xtext如何高效且完备的描述出DSL；如何验证Xtext将DSL自动生成的C或Java的完备性和正确性；Xtext如何生成LSP（Xtext官方文档这部分写的不是很清晰而且还有很严重的滞后性，所以很头疼。。。）；InversifyJS的理解（Theia中各种使用InversifyJS也让人感到很头秃）等等等等问题。

问题总会被解决的！慢慢来吧:)

avatar
文章
阅读
粉丝