前端工程下一站 IDE

1.

2. 前端⼯工程下⼀一站 - IDE 上坡吭头

3. ⾃自我介绍上坡(张伟) 阿⾥里里集团 - 淘系技术部 - 前端技术 - 前端⼯工程前端⼯工程⼯工具阿⾥里里前端⼯工程中台吭头(⻢马航) 蚂蚁⾦金金服 - 终端技术部 - 前端技术 - ⼯工程服务⽀支付宝⼩小程序 IDE KAITIAN 项⽬目技术负责⼈人 KAITIAN 项⽬目 PM

4. • 新站台: IDE • 技术实现 • 落地实践 • 下⼀一步

5. 新站台: IDE — 基础设施硬件端容器器端 Prometheus Kubernetes 本地端 Electron NW.js Carlo 基础依赖 Language Server Protocol Debug Adapter Protocol Monaco Editor

6. 新站台: IDE — 外部环境独⽴立解决⽅方案云⼚厂商收购⽅方案

7. 新站台: IDE — Expo Snack IDE 调试预览编译构建编辑器器 Editor

8. 新站台: IDE — 阿⾥里里场景⽀支付宝⼩小程序阿⾥里里云 FC 函数计算中后台智能还原登录验证编译构建集成部署编辑器器⽂文件树终端

9. 新站台: IDE — 阿⾥里里场景本地端云端品牌⼊入⼝口效率研发环境⼀一致系统原⽣生能⼒力力线上服务集成⽹网络环境依赖安装使⽤用成本

10. 新站台: IDE —KAITIAN FAAS 函数搭建模块⼩小程序中后台 … 数据调试智能还原真机调试物料料管理理 … IDE 集成⽅方式本地端 Web 端内部 IDE 平台外部 IDE 平台插件体系(插件机制/插件市场) 集成部署登录验证编译构建规则校验 KAITIAN FRAMEWORK 编辑器器插件体系调试预览终端资源管理理 …

11. 新站台: IDE — 内部场景 Web FAAS ⽣生本地 IDE KAITIAN FRAMEWORK ⽀支付宝⼩小程序外部插件搭建平台态研发⼯工作台内部

12. • 新站台: IDE • 技术实现 • 落地实践 • 下⼀一步

13. 技术实现 • 整体架构 • 两端⼀一致 • 插件扩展设计

14. 技术实现 — 整体架构⽀支撑服务插件市场容器器服务更更新服务⽇日志服务灰度服务配置服务封装能⼒力力编辑器器 SCM 列列表输出⾯面板功能模块编辑器器插件 API Monaco 定制 Hover 提示定义查询语法检测 Editor 定制引⽤用跳转 Model ⽂文档定制 Grid 布局管理理⽂文档管理理编辑状态管理理语⾔言/语法注册诊断展示组件化展示引⽤用管理理版本管理理主题设置编辑状态栏镜像同步虚拟⽂文档快捷键管理理代码着⾊色 Tab 管理理 URI 关联 Resource ⽬目录浏览组件定制展示资源服务定制⽂文档内容快捷打开 Markdown 预览搜索状态栏命令⾯面板设置⾯面板左侧导航代码管理理⼯工具栏预览⾯面板展示集成(xterm.js) 动态加载临时内容已打开⽂文件布局监听节点回收内容提供定制⾯面包屑终端⽂文件树组件分组划分基础库加载频道管理理搜索结果语⾔言服务(LSP) 语⾔言注册通信协议适配 ws/ipc ⽬目录管理理操作连接管理理监听响应模拟进程(node-pty) 基础能⼒力力预览服务布局能⼒力力插件机制本地/远程加载插件扫描安装卸载插件激活基本能⼒力力调试能⼒力力插槽能⼒力力调试⾯面板命令机制 Editor 调试⽀支持消息链路路设置服务依赖注⼊入数据存储国际化快捷键绑定状态管理理事件机制存储服务标签服务⽇日志能⼒力力主题服务⼯工作空间管理理应⽤用加载断点扩展能⼒力力匹配调⽤用通道位置管理理计算 UI 定制逻辑隔离环境环境适配服务注册 WebWorker 堆栈操作⾯面板应⽤用⽣生命周期管理理 Node ⽂文件服务拖拽布局调试插件集成定制菜单 DAP 容器器环境动态视图注册 Session 管理理 VSCode 定制配置 Contribution 内容操作⽬目录操作监听服务 color command language localization configuration menu grammar keybinding theme view 插件进程管理理消息通道 API 注⼊入进程重连唯⼀一性控制预加载管理理编码探测可定制⽂文件系统通信能⼒力力插件 API 本地⽂文件系统 languages workspace debug scm version 插件定制⽂文件系统 commands window env extensions root 服务注册连接协议适配 ws/ipc 远程调⽤用消息推送调⽤用撤销重连恢复连接管理理插件通信

15. 技术实现 • 整体架构 • 两端⼀一致 • 插件扩展设计

16. 技术实现 — 两端⼀一致 Electron App 两端⼀一致在浏览器器环境与本地客户端环境运⾏行行相同实现代码

17. 技术实现 — 两端⼀一致 Browser Electron ⻚页⾯面渲染 ✓ ✓ 原⽣生组件 ✖ ✓ Node环境 ✖ ✓ ⽂文件访问 ✖ ✓

18. 技术实现 — 两端⼀一致 Electron App Web 渲染环境 IDE Server

19. 技术实现 — 两端⼀一致 BrowserTab BrowserWindow Web 渲染环境通信抽象 IPC WEBSOCKET 服务环境 Docker Container Electron Main(Child Process) IDE Extension IDE Extension IDE Node Server IDE Node Server

20. 技术实现 — 两端⼀一致 Browser 通信抽象 WEBSOCKET IPC Backend Services Terminal Service Extension Runtime Language Server File System Db Storage

21. 技术实现 — 两端⼀一致 Browser Terminal Service Interface Extension Runtime Interface File System Interface Language Service Interface Db Storage Interface 通信抽象 WEBSOCKET Backend Service Suite 1 Terminal Service IPC Backend Service Suite 2 Extension Runtime File System Language Service Backend Service Suite 3 Db Storage

22. 技术实现 • 整体架构 • 两端⼀一致 • 插件扩展设计

23. 技术实现 — 插件扩展设计 Extension Registration name code entry Extension Runtime Extension Registration name code entry Extension Registration name code entry Extension Registry e.g. require(codeEntry)

24. 技术实现 — 插件扩展设计 Browser Context Extension Api Extension Code Extension Code Extension Code Atom Editor 将扩展代码运⾏行行在 Browser 进程中⽀支付宝⼩小程序IDE

25. 技术实现 — 插件扩展设计 Core Code Extension Code Extension Code Extension Code Extension Code Extension Code

26. 技术实现 — 插件扩展设计 Core Code Extension Code Extension Code Extension Code Extension Code Extension Code

27. 技术实现 — 插件扩展设计两端⼀一致 Core Code Extension Code Extension Code Extension Code Extension Code Extension Code

28. 技术实现 — 插件扩展设计 Browser Context Api Server Extension Api Extension Host Extension Code Extension Code 将扩展代码运⾏行行在独⽴立进程中 Extension Code Visual Studio Code

29. 技术实现 — 插件扩展设计 Browser Context Api Server DOM Extension Api Extension Host Extension Code Extension Code 将扩展代码运⾏行行在独⽴立进程中 Extension Code

30. 技术实现 — 插件扩展设计 View Page XML Page XML User Action Set Data Model & Controller Page JS Page JS

31. 技术实现 — UI 扩展定制 UI 组件 Component 1 业务逻辑调⽤用 Component 2 Component 3 Component ⽅方法调⽤用 UI 服务注册隔离(Extension Host) 业务逻辑扩展 API 调⽤用

32. 技术实现 — UI 扩展定制

33. 技术实现 — UI 扩展定制 React 组件调⽤用调⽤用 Node 进程中注册的服务 component.tsx extend-node.ts

34. 技术实现 — UI 扩展定制 Node 进程调⽤用 React 组件 UI 响应⽅方法 component.tsx extend-node.ts

35. 技术实现 — UI 扩展定制完整示例例 component.tsx extend-node.ts

36. 技术实现 — 插件扩展设计 VSCode 插件市场 KAITIAN EXTENSION VSCode Extension UI Extend 编码体验业务场景

37. 技术实现 — UI 扩展定制客户端 Electron Chrome Web 渲染环境插件 UI 注册 Component 1 Component 2 Component ⽅方法注册业务逻辑调⽤用插件 B UI 注册插件 C UI 注册插件 B 服务插件 C 服务 Component 3 UI 渲染展示 Webwoker / Node 进程隔离环境插件 A 服务扩展能⼒力力业务逻辑注册 Component ⽅方法调⽤用 VSCode 插件能⼒力力兼容插件服务插件扫描插件激活上下⽂文 API 注⼊入消息通信配置注⼊入

38. • 新站台: IDE • 技术实现 • 落地实践 • 下⼀一步

39. 落地实践 • ⽀支付宝⼩小程序 IDE • WebIDE 中台

40. 落地实践 — ⽀支付宝⼩小程序 IDE ⼩小程序插件业务集成模拟器器调试器器账号编译构建底层能⼒力力编辑器器插件体系调试预览终端资源管理理 …

41. 落地实践 — ⽀支付宝⼩小程序 IDE 标准插件集成 NPM 管理理模拟器器调试器器账号编译构建 KAITIAN-FRAMEWORK 编辑器器插件体系调试预览终端资源管理理 …

42. 落地实践 — ⽀支付宝⼩小程序 IDE KAITIAN-FRAMEWORK

43. 落地实践 • ⽀支付宝⼩小程序 IDE • WebIDE 中台

44. 落地实践 — WebIDE 中台 KAITIAN-FRAMEWORK IDE

45. 落地实践 — WebIDE 中台 FAAS 函数搭建模块⼩小程序中后台 IDE IDE 集成调度策略略底层服务路路由访问服务集成平台同步整体解决⽅方案域名代理理内核更更新数据监控异常容灾基础设施容器器搭建空间调度服务部署 KAITIAN-FRAMEWORK 资源管理理

46. 落地实践 — WebIDE 中台 FAAS 函数搭建模块⼩小程序中后台服务 SDK 服务管理理⼯工作空间空间⽤用户代码仓库业务配置镜像模板机器器规格插件集成伴⽣生服务布局配置定制服务能⼒力力监控运维租户管理理底层能⼒力力容器器调度⽹网络访问稳定性保障

47. • 新站台: IDE • 技术实现 • 落地实践 • 下⼀一步

48. 落地实践 — 开发者⼯工作平台 2020.03 开发者⼯工作平台

49. 落地实践 — 开源开放 2020.05 插件市场最佳实践 Web 端⽅方案本地端⽅方案插件开发 KAITIAN FRAMEWORK ⽂文档⽅方案示例例源码

50. Q&A 上坡吭头