前端 AI 应用入门：普通开发者第一条链路
从零理解 LLM、Token 与 Chat 接口，用 React + Route 跑通第一个流式对话，并建立后续 RAG/Agent 的知识地图。
文章
赵汝波 的技术笔记——7 篇 AI 体系文章（入门→精通），以及大前端架构与工程化实践。
AI SDK 前端集成与流式响应实践
Vercel AI SDK、OpenAI API 流式调用、SSE 处理和 AI 聊天界面的前端架构设计。
LLM RAG 前端架构设计
检索增强生成的完整前端链路：文档上传、向量检索、上下文注入与引用溯源 UI 设计。
AI Agent UI 设计模式与交互架构
Tool Calling 可视化、Multi-Agent 协作界面、Human-in-the-Loop 与 Agent 状态机的前端设计。
AI 应用工程化：MCP 工作流与 Agent 编排
MCP 协议、Tool Calling 架构、Agent 状态机、Prompt 版本管理与 AI 应用从 Demo 到生产的工程化路径。
生产级 Prompt 工程与评测体系
Prompt 模板化、版本管理、离线 eval 与 CI 门禁——让 AI 功能像发版一样可回归。
AI 应用可观测性与成本治理
Token 计量、链路追踪、质量指标与模型降级——AI 功能上线后如何管得住。
更多文章
前端架构、框架原理、工程化与跨端。
埋点数据分析：漏斗、留存与 A/B
事件模型、漏斗 SQL 思路、 cohort 留存、实验分流与前端埋点质量校验。
前端测试金字塔：单测、组件测与 E2E
Vitest + Testing Library 单元测试、MSW 契约、Playwright E2E 与 CI 门禁的落地配比。
数据可视化选型：ECharts 与自研 Canvas
中后台图表选型决策树、ECharts 主题与性能、Canvas 自绘适用场景与混合架构。
TypeScript 契约类型与 API 建模
zod/io-ts 运行时校验、OpenAPI 生成类型、satisfies 与前后端契约同步策略。
React Native 调试与性能治理
Flipper、Hermes、Systrace、列表优化、包体积与 New Architecture 下的性能排查路径。
H5 视口、安全区与 1px 边框实战
viewport-fit、env(safe-area-inset)、rem/vw 方案、高清屏 1px 与 WebView 兼容清单。
小程序登录、支付与订阅消息实战
wx.login 会话、code2Session、支付签名、订阅消息模板与前后端协作的安全边界。
BFF 容错、超时与降级设计
Promise.allSettled 聚合、熔断、超时链、错误码规范与 partial response 的前端协作模式。
前端系统设计面试题解
设计一个前端监控平台、微前端架构、低代码编辑器的前端系统设计思路与面试表达。
高级前端面试知识体系与准备策略
7 年经验高级前端面试的完整知识地图、项目表达框架、算法策略与薪资谈判指南。
微信小程序架构与性能优化实战
双线程模型、setData 优化、分包策略、Skyline 渲染与 Taro 跨端选型的系统化指南。
前端埋点 SDK 架构设计：从规范到治理
事件命名规范、自研埋点 SDK、自动/手动/可视化采集、数据治理与漏斗分析的完整工程体系。
移动端 H5 适配架构：从 viewport 到组件级响应式
viewport 策略、rem/vw 动态适配、安全区、软键盘与 WebView 容器的移动端 H5 工程化方案。
BFF 层架构设计：从前端视角掌控 API
BFF 在微服务中的定位、Koa 中间件模型、API 聚合、鉴权与 Node 服务工程化实践。
React Native 新架构与跨端性能实践
Fabric 渲染器、TurboModule、JSI 直连、Hermes 引擎与 RN 性能治理的系统化方法。
React 复杂表单架构设计实践
从字段建模、状态隔离、联动规则和性能优化几个角度，拆解大型业务表单的工程设计。
React 状态管理方案对比与选型
Redux、Zustand、Jotai、Recoil、Context 的状态边界设计与大型项目选型决策树。
React Server Components 实战指南
RSC 的渲染模型、Server/Client 组件边界、数据获取模式与 Next.js App Router 落地经验。
React Fiber 与调和机制深度解析
从 Stack Reconciler 到 Fiber，理解 React 可中断渲染、优先级调度与 Diff 算法的完整链路。
Pinia 状态管理设计与大型 Vue 项目实践
Pinia Store 设计模式、模块化拆分、持久化策略与 Vuex 迁移的完整指南。
Vue 3 Composition API 架构设计实践
Composable 设计模式、逻辑复用边界、与 Options API 的迁移策略及大型项目模块组织。
Vue 3 响应式系统原理深度解析
从 Object.defineProperty 到 Proxy，理解 track/trigger、effect 调度与 computed/watch 的实现机制。
前端权限系统如何设计
从账号、角色、资源、操作和数据范围几个维度，梳理中后台权限系统的前端设计方式。
Electron 性能优化与打包发布
渲染进程性能调优、内存泄漏排查、Vite+Electron 构建配置与多平台打包策略。
Electron 架构设计与安全实践
主进程/渲染进程模型、IPC 通信、Context Isolation、Preload 脚本与 Electron 安全最佳实践。
前端 CI/CD 质量门禁设计
Lint、Type Check、Unit Test、E2E、Bundle 分析的流水线设计与分支策略。
Monorepo 架构治理与依赖管理
pnpm workspace、Turborepo、Changesets 与大型前端 Monorepo 的边界设计与依赖治理。
Vite 与 Webpack 构建原理对比
从 ESM 开发服务器到 Rollup 生产构建，理解 Vite/Webpack/Rspack 的编译模型与选型依据。
一次首屏性能优化的完整复盘
用指标拆解、瓶颈定位、方案实施和收益验证的方式，复盘一次首屏性能优化。
TypeScript 高级类型模式与 API 设计
泛型约束、条件类型、映射类型、模板字面量类型在 API 设计中的实战应用。
前端安全攻防：XSS、CSRF 与 CSP
常见 Web 攻击原理、防御策略、Content Security Policy 配置与 Electron 安全加固。
浏览器渲染流水线与性能优化
从 URL 输入到像素输出：关键渲染路径、重排重绘、合成层与 GPU 加速的完整链路。
大型项目中的组件分层与状态管理
总结复杂前端项目中组件职责、状态边界和跨模块协作的组织方式。
Canvas 2D 与 WebGL 渲染性能指南
Canvas 绘制优化、WebGL 渲染管线、OffscreenCanvas 与大数据量图形渲染的性能策略。
前端监控体系：错误、性能与用户行为
从错误采集、性能指标、用户行为和告警策略几个角度，搭建可用于排障的监控体系。
我如何做 Code Review
从正确性、可维护性、测试、性能和团队协作几个维度，整理 Code Review 的关注点。