第三章 核心技术栈选型
做EDA前端图形化，说白了就是选工具、选框架、选通信方式。这三样选对了，后面开发顺风顺水；选错了，嗯，你会想重写一遍。
我这些年带过不少项目，踩过的坑能写本书。今天就跟你聊聊，我心目中EDA前端的技术栈该怎么选。
3.1 Electron框架：桌面应用的基石
为什么选Electron？因为EDA工具天生就是桌面应用。你想想看，一个芯片设计工程师，每天打开的就是一个本地软件，不是浏览器。Electron让你用Web技术写桌面应用，这本身就是个巨大的生产力解放。
我记得2018年第一次用Electron做EDA原型时，心里还犯嘀咕：这玩意儿能跑得动吗？结果发现，Chromium内核的渲染能力比我想象的强太多。
核心优势：
- 跨平台：一套代码跑Windows、macOS、Linux
- 生态丰富：npm上几十万个包随便用
- 调试方便：Chrome DevTools直接上手
- 硬件访问：Node.js能直接读写文件、调系统API
但Electron也有坑。我建议你注意两点：
避坑指南：
- 内存占用：每个窗口就是一个Chromium进程，别开太多窗口
- 启动速度：用懒加载，别一启动就加载所有模块
我曾经有个项目，一启动就加载了十几个面板，结果用户等了5秒才看到界面。后来改成按需加载，启动时间降到1秒以内。
3.2 React vs Vue：前端框架怎么选
这个问题我经常被问到。说实话，两个都能用，但侧重点不同。
| 对比维度 | React | Vue |
|---|---|---|
| 学习曲线 | 中等，JSX需要适应 | 平缓，模板语法直观 |
| 状态管理 | Redux/Zustand，灵活但复杂 | Pinia/Vuex，开箱即用 |
| 性能优化 | 手动控制渲染，适合复杂场景 | 自动追踪依赖，简单场景够用 |
| 社区生态 | 最丰富，第三方库最多 | 中文文档好，国内用得多 |
| 适合场景 | 大型复杂应用，频繁更新 | 中小型应用，快速开发 |
我个人习惯用React做EDA前端。为什么？因为EDA的界面交互太复杂了——画布上几千个元件，鼠标拖拽、缩放、选中，这些操作都需要精细控制渲染。React的虚拟DOM加上手动优化，能让我精确控制哪些组件需要更新。
但如果你团队里都是Vue高手，用Vue也没问题。我见过用Vue做的EDA工具，性能一样很好。关键看你对框架的掌控力。
我的建议：
选你团队最熟悉的框架。EDA开发的核心难点不在框架，而在绘图和通信。框架只是工具，别在选型上纠结太久。
3.3 WebGL与Canvas：绘图技术选型
EDA前端最核心的部分就是画图。你想想看，一个芯片版图可能有上百万个图形元素，普通的DOM渲染根本扛不住。
Canvas和WebGL，我两个都用过。简单说：
- Canvas 2D：适合绘制几千个元件，API简单，上手快
- WebGL：适合绘制几万甚至几十万个元件，GPU加速，性能强
我在项目中遇到过这样一个场景：一个芯片的布局布线图，里面有5万多个标准单元。用Canvas画，帧率掉到10fps，拖拽都卡。换成WebGL后，帧率稳定在60fps。
为什么会这样？因为Canvas是CPU绘图的，每个draw call都要CPU处理。而WebGL把数据传到GPU，GPU并行处理，效率高得多。
但WebGL也有门槛。你得懂着色器、缓冲区、纹理这些概念。我建议这样选：
选型指南：
- 元件数 < 5000：用Canvas，开发效率高
- 元件数 5000-50000：用Canvas + 优化（视口裁剪、分层渲染）
- 元件数 > 50000：必须上WebGL
这里有个小技巧：你可以用Canvas做基础绘图，遇到性能瓶颈时，把关键部分迁移到WebGL。我做过一个混合方案，90%的图形用Canvas，只有大规模阵列用WebGL，效果很好。
避坑指南：
我曾经在WebGL里直接操作像素数据，结果发现性能反而更差了。后来才明白，WebGL擅长的是批量绘制相同类型的图形，而不是逐个像素操作。记住：把数据批量传给GPU，别在CPU和GPU之间频繁通信。
3.4 后端通信协议：RESTful vs WebSocket
EDA工具不是单机玩的。你要从服务器加载库文件、保存设计数据、协同编辑。通信协议选不对，用户体验直接崩。
我一般这样分：
- RESTful API：适合请求-响应模式，比如加载元件库、查询设计规则
- WebSocket：适合实时推送，比如协同编辑、进度通知、状态更新
举个例子：用户打开一个芯片设计文件，这个操作用RESTful就够了——发个GET请求，服务器返回JSON数据，前端解析渲染。
但如果是多人协同编辑同一个版图，一个人移动了一个元件，其他所有人的画布都要实时更新。这时候WebSocket就派上用场了——服务器把变更推送给所有客户端，大家同步更新。
实际项目中的通信架构：
// RESTful：用于数据查询和操作
GET /api/designs // 获取设计列表
POST /api/designs // 创建设计
GET /api/designs/:id // 获取设计详情
PUT /api/designs/:id // 更新设计
DELETE /api/designs/:id // 删除设计
// WebSocket：用于实时通信
// 连接建立后，服务器推送变更
{
"type": "component_moved",
"componentId": "U123",
"newPosition": { "x": 100, "y": 200 },
"userId": "user_456"
}我建议你这样做：用RESTful做基础CRUD，用WebSocket做实时推送。两个不冲突，反而互补。
我的经验：
WebSocket连接别一直开着。用户闲置5分钟没操作，就断开连接，等用户有操作时再重连。这样可以节省服务器资源。我曾经有个项目没做这个优化，结果100个用户在线，服务器开了200多个WebSocket连接，内存直接爆了。
3.5 知识体系总览
下面这张图，是我对本章核心内容的总结。你看一眼，心里就有数了。
这张图把四个技术栈的关系理清楚了。Electron是底座，React/Vue是骨架，WebGL/Canvas是血肉，通信协议是神经。缺一不可。
好了，核心技术栈就聊到这儿。记住一句话：选型没有银弹，适合你的才是最好的。
公众号:蓝海资料掘金营，微信deep3321