前后端分离的架构 在 VS Code 中的应用
韩骏
自我介绍
- 高级软件工程师 @ 微软开发平台事业部
- 《Visual Studio Code 权威指南》作者
- 20 多款 VS Code 插件(比如 Code Runner)
- “玩转VS Code”知乎专栏 & 微信公众号
- VS Code 中文社区创始人
- https://github.com/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://github.com/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://github.com/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://github.com/Microsoft/la nguage-server-protocol
- IDE 与语言服务器之间的一种协议, 可以让不同的 IDE 方便嵌入各种程 序语言。
- 支持 LSP 的开发工具: Eclipse IDE, Eclipse Theia, Atom, Sublime Text, Emacs 等
Debug Adapter Protocol
- GitHub: https://github.com/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://github.com/microsoft/debugpy
- Debugpy with WebAssembly (proposal) https://github.com/microsoft/debugpy/wiki/Debugpy-with-Webassembly- (proposal)
- Debugpy with WebAssembly (proposal) https://github.com/microsoft/debugpy/wiki/Debugpy-with-Webassembly-(proposal)
WebAssembly is the future!