大家好，我是双越老师，也是 wangEditor 作者。先祝每一个读者 2025 新年快乐！
2024 一晃而过，回顾一整年，我貌似就做了一件事儿 —— 花 8-9 个月时间，认真开发了一个 Node 全栈 AIGC 知识库项目 划水AI 。
这是真实上线的项目，有复杂度，有难度。当然 2025 还要继续升级、维护下去。
2024 是初创项目，开发基础功能。2025 争取把 划水AI 做成国内 Node 全栈项目的标杆，给所有 前端转全栈 的同学一个 Node 全栈技术解决方案的参考。
本文将介绍一下 划水AI 当前的研发成果，项目的研发过程，踩坑记录，以及我个人对行业和技术的一些思考。
初衷
务虚年代，逆风飞翔
记得 2024 春天我写了一篇文章 前端转全栈: Next.js + ChatGPT 开发 AIGC 知识库(AI 写作) 欢迎围观~ 开始思考和规划这个项目。
在那篇文章中我提到：去认真踏实的做一个项目，去务实，是很难的。第一，我个人也 35+ 不再年轻了；第二，当前环境下大家更愿意（或不得不）看看资料刷刷题去找工作，少有人愿意踏实学技术。
但我还是想做这件事，就因为我觉得：一个程序员，尤其是自由职业者，一定要有一个自己的代表作。产品/项目，才是程序员的脸面，而不是写多少 PPT 开多少会。
前几年 wangEditor 是我的代表作，后来我无力维护。接下来 划水AI 就是我的代表作，我要努力做好，持续维护。
所以，想了就做。人在任何阶段，最难得的就是任性和叛逆，去做自己想做的事。但往往是人到中年就随波逐流，我永远不做随大流者。
庆幸的是，从项目开始研发至今，得到了很多同学的关注和支持，也有很多同学加入了项目研发团队，这给我了足够的鼓励，让我继续更好的做下去。
项目功能介绍
划水AI 是一个 AIGC 知识库平台，类似于国外的 Notion AI 。国内也有很多知识库平台，如腾讯文档、飞书文档、语鹊、石墨等。
基础的功能其实都差不多，可以创建文档，管理文档，编辑文档，支持团队、分享、权限，支持多人协同编辑等，这也是大家日常工作使用的。
另外，划水AI 还支持使用 AI 智能生成文档内容，以及 AI 智能优化文字，如下图。
PS. 2024 AI 继续大力发展，AI 应用遍地开花，其中在知识库和文档编辑领域也已经被广泛应用，大部分知识库平台都已经接入了 AI 功能。
划水AI 界面看着很简洁，这是因为功能都隐藏起来了，不用的时候看不到。现在已经有将近 100 功能，如下列表。
技术选型
前端转全栈，首选 Node 全栈，2024 年 Node 框架也是遍地开花，对比整个技术社区，最火爆的还是 Next.js ，React 服务端渲染。
为何不选择 Vue ？ 在我看来，开发功能 Vue 和 React 其实差不多（虽然网络上吵的你死我活），但 Vue 服务端渲染框架 Nuxt.js 目前不如 Next.js 使用广泛。
为何不选择 Nest.js ？ 首先，Nest.js 是参考 Java spring 设计出来的框架，前端人员学习成本更高；其次，使用 Nest.js 就是前后端分离，没法使用 SSR 服务端渲染技术，而 SSR 对于首屏性能优化是很重要的。
但是选择 Next.js 默认是要部署在 Vercel 服务上的，而国内一直屏蔽 Vercel 服务，这不行。于是我就把项目部署在阿里云 FC 上，自动部署，线上访问都很稳定。
数据库就直接选择 Prisma 和 PostgreSQL，后者使用 Supabase 云数据库，非常方便，不用自己搭建，使用 URL 连接即可。
线上服务
一个真实上线的项目，需要很多线上服务，作为项目负责人/架构师，你都需要去考虑选择。PS. 其实你如果是学习的话，这些服务几乎不用花钱。
我之前分写过一篇文章 免费搞定域名、云服务器、Serverless、云数据库，助力 Node 全栈开发 分享了一部分服务的免费使用方法，可以作为参考。
下面是当前 划水AI 所有的线上服务，有些需要购买（或免费试用），有些使用第三方服务，有些需要自研。
- 域名：建议购买一个，最便宜的一年几十块钱，还不到一个肯德基汉堡的价格
- SSL 证书：阿里云 腾讯云 都可以申请免费的，有效期 90 天，到期再继续申请即可
- 云服务器：各个云平台都有免费试用，或低价活动，如果是学习用，可以轮流“薅羊毛”
- Serverless：推荐使用阿里云 Serverless 对 Node 和 Next.js 支持都非常好，支持从 GitHub 自动部署
- 云数据库：有很多平台提供云数据库服务，免费试用，如 Supabase Mongodb Upstash
- 存储和 CDN：可选择阿里云 OSS 和 CDN ，使用方便，如个人学习使用几乎不收费
- AI 服务：ChatGPT 早就停止了对中国地区 API 服务，我们可以选择国内大模型，现在也发展的很好
- 协同编辑服务：这个需要配合编辑器，没有现成的，需要自研，下文有介绍
- 邮件服务：个大邮箱网站都提供 SMTP 服务，如 163 邮箱，QQ 邮箱
- 统计监控：可使用百度统计做一些基础 PV UV 统计，然后使用 Sentry 做性能统计和报错监控
如果你是一个纯前端，看到这些服务可能会比较陌生。这也是正常的，这才是你晋升全栈需要重点学习的领域。
稳定性建设
一个真实上线的项目，最需要保障的就是安全和稳定 —— 这才是项目架构师最应该关注的地方。
- 有 bug 要及早发现，尽量避免线上 bug ；
- 如果万一有线上 bug （放心，肯定会有的），我们要第一时间得到通知，及时回滚/修复。
首先，我们选择 Typescript 作为开发语言，TS 是静态类型语言，可以及时发现类型错误。JS 做不到这一点，项目越大差别越明显。
然后，我们写组件单元测试，在 git commit 之前自动触发测试，并使用 GitHub actions 自动触发测试，时刻保障代码质量。
还有，我们很早就在增加了心跳检测的功能，每隔 10min 就检测一次核心接口和服务，如遇到问题，立刻邮件报警。
最后，近期我们加入了 Sentry 平台，可做性能统计和错误监控，一旦遇到线上的执行错误，就立刻邮件报警。
项目上线几个月了，虽然不间断的发生各种 bug （这是正常情况、真实情况），但从没有一次宕机超过 10 分钟。因为我能及时收到报警邮件，及时回滚/处理问题。
AI Service
项目已开始使用 ChatGPT 服务，当时还可以从某宝上购买 API key 也不贵，后来到 7 月就不能用了。
然后我就选择中间服务 deepbricks 目前看来还可用，如果个人学习用，价格也很便宜。
后来我又选择了其他服务，如 deepseek ，现在用着也不错。而且它有很大的免费试用额度，如果个人学习用，可用很长时间。
现在国内的 AI 大模型也都发展的很好，可以直接选择国内的服务，速度还快。
AI 服务是一方面，调用接口即可；另一方面是：结合 AI 开发智能编辑器，这个并不容易。
我之前写过一篇文章 开发一个 AI 编辑器（AI 智能写作）难吗？ 讲述过这一点，需要考虑的东西有很多，可不是简单的调调接口
- 如何实现流式打印效果，增加用户体验
- 如何合理传递 messages 给 AI？总不能把文档全文传递过去吧，这样内容太多了，浪费 token，而且会很慢
- 如何把生成的内容合理的插入、替换到编辑器？要考虑编辑器的内容和选取状态
- 如何让 AI 生成富文本，如大纲标题、表格、列表、代码块？并把这些内容插入到编辑器
- 如何处理暂停、重试？暂停时如何已经消耗的 token ？
- 如何记录 token 使用数量，并作出合理限制？否则无限制免费用，成本太高，且可能会被滥用
- 如何对 AI 接口进行合理鉴权，防止被别人盗用
- 如何应对 AI 服务的 rate limit 调用频率限制问题？
- 如何限制用户对自己 AI 接口的调用频率？防止恶意频繁访问的攻击
- 如何保证 AI 接口稳定性，如何做好监控和报警
编辑器和多人协同编辑
富文本编辑器选择的是 Tiptap，它是基于 ProseMirror 二次开发的，支持 Vue React ，其中 ProseMirror 是社区知名老牌的编辑器，功能强大且稳定。
为何不选择我自己的 wangEditor ? 因为 wangEditor 没有实践过多人协同编辑，而 划水AI 强烈需要多人协同编辑。
为何不为 wangEditor 开发多人协同编辑？ —— 我费劲开发出来，能有几个人用？而且协同编辑复杂度高，如运行有问题又该怪我文档没写好、文档看不懂 —— 大部分用户连文件上传都搞不定，返回的图片 url D://xxx/xxx.png
虽然使用 Tiptap 但也需要大量的二次开发，支持多种格式，模拟 Notion 块编辑器的效果。
多人协同编辑器也是一个难点。Tiptap 有多人协同编辑的服务，但第一它收费，第二它的服务在欧美，距离远了速度就慢、稳定性就差。所以，我基于 Tiptap 的开源方案自研了多人协同编辑服务。
Note. 由于多人协同编辑服务是通过 WebSocket 通讯的，所以它还没法部署到 Serverless ，它需要单独部署在一个云服务器上。
我之前写过一篇文章 10 分钟从 0 实现多人协同编辑 ProseMirror + Yjs 分享过一个简单的多人协同编辑的例子，可去试试。 钟 我现在给别人 1v1 优化简历、模拟面试，都是使用 划水AI 的分享、多人协同编辑，实时同步记录，效果非常好。
我记得，有那么几次，用 10 分钟就开始卡顿，越来越卡，然后我分析网页内存变化，最终发现了一个内存泄漏问题。
研发过程
划水AI 项目主要由我来开发，也有其他同学参与开发，修复一些 bug ，做一些优化等。
多人协作开发，我依据大厂研发规范，设计了详细的协作开发流程，从认领任务、写技术方案，再到开发代码、提交 PR、CodeReview、最后合并代码、内部测试... 都需要按照这个流程走完。
而且，我都会详细记录每一个研发过程，其中还会有详细的代码提交记录，每一步怎么做的都非常清楚。
项目亮点
很多同学都会问：这个项目如何写到简历中呢？我知道这个很重要，所以我有单独总结：如何把项目写到简历中。
例如这个项目的定位、介绍、技术栈，你在项目中的角色和职责，项目的主要功能和模块。
当然最重要的就是项目的亮点和难点，我总结了有近 20 个。线上项目，复杂项目，就是这么多难点。
此外，还有各种性能优化和体验优化，例如：
- OSS 上传图片相关的优化，如图片尺寸压缩、图片占位、图片预览、图片懒加载
- AI 功能的一些优化，如考虑中止、报错提醒、设置时间间隔防止频繁触发
- 协同编辑优化，如避免 WebSocket 重复连接、WebSocket 断开提醒，loading 状态使用 Skeleton
- 减少数据库查询次数，如 session 改为 jwt ，避免频发查询 tokenUsage ，避免频发查询 doc 数据
- 代码优化：Editor 拆分为多个 Hooks ，简化代码，增加可读性
2025 前端行情
我记得是 2023 年春天全网疯传：前端已死。
到现在快两年了，前端到底死没死呢？这是一个很矛盾的话题，你看：
- 一方面： React19 发布，Nextjs15 发布，Deno 2.0 发布，Vue 作者尤雨溪成立 ViodZero， Rust 疯狂重构前端打包工具... 一片欣欣向荣
- 另一方面：大量的裁员、失业，国内更严重，国外也很卷... 一片死气沉沉
从目前的形势来看：
- 整个互联网行业不景气，没有新的增长点（除了前两年 Web3、近两年 AI）。行业不好，所有从业人员都会受影响，不仅仅是前端。
- 前端在发生变化和升级，更需要全栈、AI 等综合性人才，纯前端将会被慢慢淘汰
对于我们每个人来说：
- 不要裸辞，工资是最大的生活保障 （程序员群体，大概家里都不会有矿）
- 不要只顾工作，多考虑自身提升和学习。你全身心为公司考虑，公司可不一定为你考虑，裁员指不定就在哪天。
最后
划水AI 2025 继续，还有很多工作，例如：导入导出 word，文档版本，本地文档，短信验证码登录，扫码登录，VIP 付费升级等。
还是开头那句话，2025 争取把 划水AI 项目做成一个 Node 全栈技术解决方案的标杆，给所有 前端转全栈 的同学一个参考。
