实现轻协同IDE的技术选型经验

1. 实现轻协同IDE的技术选型经验李亚飞

2. 个人介绍 • 李亚飞，ShowMeBug CEO兼首席架构师 • 连续创业者，14年开始创业，9年创业经验 • 2009年毕业于吉林大学计算机系 • Ruby 社区核心贡献者，RubyConf China 三届讲师 • 前深信服资深架构师，自动化产品线主管&技术负责人 • 2015年，通过个人 Github 获得某前沿科技公司前端架构师职位 • 2021年科创中国深圳企业家 U30 上榜成员 • ShowMeBug 连续获得奇绩、盈动、变量、真格、红杉、高瓴六家近亿元融资

3. 分享内容 • 轻协同IDE引擎的开发动机与要求 • 选择 PaaS 方案，提供 NPM 包的 SDK • 选择 React + zustand 作为前端 SDK 组件 • 选型 socketio • 协同层：NestJS + socketio • 后端交互：MQ 消息队列，容器化机制

4. 今天我们一起看看，NodeJS 全栈能支撑多大能力的业务？

5. 轻协同IDE的前世今生

6.

7.

8. • 轻量级（简单，易用，免安装） • 协同性（用于Coding面试、学习指导等场景） • 零秒启动（极快的启动速度、所有包依赖提前准备） • 零秒切换（秒换不同编程环境） • 零秒延迟（所有操作实时进行，包括Shell、Console、文件树）

9. • 需要完全自主可控（排除 VSCode 定制方案） • 需要超出预期的协同体验 • 需要超强自定义：答题区、隐藏锁定答案、测试用例解析等等 • 结论：排除 VSCode 等IDE定制方案，完全从零开发

10. 接下来一起来进行架构之旅

11. PaaS 模式因为轻协同IDE拥有很多应用场景：技术测评、在线面试、编程学习，为了支持不同的业务，所以采用 PaaS 化的架构。NPM 是必然的采用的打包方案。

12. MonoRepo • pnpm 提供更快的安装速度 • demo：提供演示和测试能力 • client：SDK核心代码 • server: Node层负责长连接协同

13. React + zustand • DaoStore.tsx • 状态管理非常复杂 • 自行实现状态机 • 共享全局数据

14. 异步事件编程 • SocketIO • Channel 与服务端进行异步事件，基于状态驱动的封装与管理 • 组件的无依赖状态设计 • 离线上下线交互

15.

16. Node后端职责与架构选型

17. 后端技术栈选型 • 与 SocketIO 通信极为便捷 • 高并发支撑 • 异步事件编程支持良好 • 对 OT 协同算法支持良好，抽象性好

18. 后端技术选型结论 • NestJS（充分利用 Inject 注入技术，简化复杂依赖） • SocketIO 中间件 • 高性能支撑 • 部分复用前端状态 • Mongodb（高性能支撑，每秒2万QPS）

19. 后端与Java中台交互选型 • MQ 消息队列（RabbitMQ NestJS中间件） • 容器化管理机制 • 容器环境 Golang Agents 注册

20.

21.

22. 架构总结 • 单链路 1万同时在线 • 加载速度不超过1s • 切换环境速度不超过1s • 完美支撑业务侧灵活定制页面与接口

23. 感兴趣可以来试试 • 前端中级以上工程师，Vue & React 有一个掌握即可构建自己的编程环境 • 你可以用 1024PaaS 实现自己的在线编程环境，通过跟我对接来体验 SDK • 可以完整自定义各个页面结构 • 应用场景举例：在线教育、互动培训、公司内训学习

24.

25.

26. QA环节 • 欢迎与我交流架构、前端、创业相关的话题 • 欢迎使用 ShowMeBug 进行技术测评 • 欢迎使用 1024PaaS 开发自己的IDE应用微信号：lyfi2003

27.