我们在现代 Web 项目中面临一个大问题:开发者花了太多时间在构建错误的东西上 📦
我们搭建多层架构 🏗️,接入三套不同的状态管理系统 📚,配置多个缓存层 🗄️,把几乎不需要容器化的东西全都容器化 🐳,然后才开始写第一行真正的业务逻辑 💻
几周前,我在做一个自主多智能体工作流系统,用到了 next.js 前端、n8n webhooks、voiceflow 以及其他各种有状态组件,而我对自己的进展之慢感到非常沮丧。我的应用里有太多类似 Redux 的样板代码和 context 地狱,这实实在在地拖慢了我构建的速度,也阻碍了我交付性能更好的应用 🐢
我决定把一切推倒重来 🔨
并构建一条精简、事件驱动、解耦的自动化流水线 ⚡ 以下正是我这样做的原因、它的运作方式,以及它如何通过抛弃臃肿把开发速度提升了 10 倍 📈
问题所在:过度工程的陷阱
我们都经历过这种情况;我们怀着最美好的初衷开始一个项目 😇
Simple Idea ➔ Clean Frontend ➔ Minimal Backend ➔ Production
但很快它就变成了一场混乱的灾难 🌀
Simple Idea ➔ Micro-frontend Setup ➔ 5 State Libraries ➔ Custom Event Emitters ➔ Redis Caching ➔ 12 Docker Containers ➔ Infinite Suffering 💀
为什么复杂的状态管理在 AI/自动化应用中让我们所有人都在失败
当你构建的应用要利用 LLM 🧠、Make.com 或 n8n(webhooks)这类外部 API 触发器,并且需要把响应流式传回前端 📡 时,你惯用的 UI 状态管理模式会彻底崩溃 💔
竞态条件 🏃♂️💨:你的状态与实际的后端 webhook 事件脱节
维护开销 🛠️:更新一个数据模型需要改动五个不同的文件
认知负担 🤯:你 80% 的时间都花在思考数据存放在哪里,而不是它实际在做什么
解决方案:事件驱动流水线
与其强迫我的前端管理所有这些微状态,我改用了一种事件驱动的发布-订阅模型,借助一些轻量级 webhooks 和直接的状态同步 🔄
核心架构
大脑(自动化层)🧠:n8n / Make.com,处理所有繁重的后端操作、AI 提示编排,以及通过 google AI studio 路由外部 API 触发器。
通信层 📨:通过 webhook 进行干净的 JSON 载荷通信,无需任何额外的轮询。后端只在需要时才与前端通信
界面 💻:一个极其精简干净的前端,使用 React/TypeScript/Tailwind CSS,监听事件并仅在需要时更新本地组件状态。
代码:(解耦的 Webhook 处理器)
我们得到的是干净、模块化、易于维护和阅读的 webhook 处理函数,而不是庞大的全局 store ⚡
interface AgentEventPayload {
eventId: string;
agentStatus: 'idle' | 'processing' | 'success' | 'error';
data: Record;
}
// 干净、解耦的 webhook 监听器 🎧
async function handleAgentWebhook(payload: AgentEventPayload) Promise {
try {
console.log(`[Event Received]:${payload.eventId}- Status:${payload.agentStatus}`);
// 直接派发 UI 状态,无需样板中间层 🎯
updateLocalUIState(payload.agentStatus, payload.data);
} catch(error) {
console.error('Failed to process agent event:', error);
}
}
结果:真正重要的指标
通过砍掉架构上的臃肿,我们一开始就看到了巨大的改进 🎉
打包体积 📦:通过砍掉大量冗余的辅助库和状态包装器,打包体积减少了近 45%。
开发速度 🚀:重构 context provider 现在只需几小时,而不是几天
可靠性 🛡️:在处理外部 LLM API 超时或限流问题时,潜在故障点更少。
我们学到了什么?
简单本身就是一种特性 ✨:某个东西存在,并不意味着你就需要它。默认选择能解决问题的最简单工具。
拥抱事件驱动的未来 🔄:将你的 UI 逻辑与后端流程解耦,会让你的 AI 工作流扩展变得无比轻松。
不要再为你还不需要的规模做面向未来的设计。写注定会被删除的代码,而不是永存的代码。🏗️
咱们评论区见!👇
我知道,我知道。你们中有些人就是复杂状态管理系统和重型企业级样板代码的死忠粉 🏢
你曾经不得不理清的最过度设计的架构是什么?你有没有曾经拆掉技术栈的核心部分,然后立刻感到如释重负?
咱们讨论讨论!🗣️