跳转到内容

系统案例:场景驱动演进

每个系统从零依赖开始,逐步演进到十万级用户规模。每一步新增依赖都有「不得不引入的理由」。

V1: 1 人用 — 纯前端 / localStorage / 单 HTML 文件,零后端依赖
V2: 10 人用 — 需要共享/持久化,才加最小后端(文件/SQLite)
V3: 100 人用 — 并发/一致性问题出现,引入数据库 + 事务
V4: 1000 人用 — 性能瓶颈,加缓存、异步处理、索引优化
V5: 1 万人用 — 单机极限,水平扩展、读写分离、集群
V6: 10 万+ 用 — 全国/全球规模,分片、CDN、微服务拆分

AI 时代原则: 引入的依赖越少越好。很多功能 AI 可以直接做,不需要传统的重型基础设施。

#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
1URL Shortener⭐⭐localStorage映射Go+JSON文件PostgreSQL+Redis异步统计多实例+集群全球GeoDNS
2Rate Limiter⭐⭐⭐前端计数器内存令牌桶Redis滑动窗口分布式限流多维度策略全局限流网关
3Distributed ID⭐⭐前端UUIDSnowflake单机高可用ID服务多机房多数据中心全球唯一ID
4Notification System⭐⭐⭐页面弹窗邮件+文件队列消息队列多渠道模板+批量精准推送全渠道触达
5Task Scheduler⭐⭐⭐setTimeoutCron+本地执行分布式调度优先级队列多Worker集群跨数据中心
#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
6News Feed⭐⭐⭐⭐localStorage动态SQLite timelinePostgreSQL推拉模式个性化过滤Redis混合推拉AI推荐引擎
7Chat System⭐⭐⭐⭐BroadcastChannelWebSocket+文件DB+ACK机制群聊扩展多WS节点文件/消息搜索
8YouTube⭐⭐⭐⭐⭐HTML5本地播放上传+本地存储转码+CDN自适应码率转码队列多CDN+冷存储
9Instagram⭐⭐⭐⭐本地图片+滤镜上传+SQLite对象存储+CDN关注推荐图片处理集群全球分发
10Twitter/X⭐⭐⭐⭐localStorage推文SQLite+关注表PostgreSQL+Fan-out热点话题读写分离全球分片
11Spotify⭐⭐⭐⭐HTML5音频播放音频上传+SQLite流媒体+CDN播放列表同步音频转码集群全球低延迟
12TikTok⭐⭐⭐⭐⭐本地视频滚动上传+简单推荐短视频转码+AI推荐实时互动推荐模型更新全球内容分发
#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
13Search Engine⭐⭐⭐⭐Fuse.js前端搜索内存倒排索引Elasticsearch过滤+建议ES集群AI语义搜索
14Web Crawler⭐⭐⭐单页脚本抓取BFS+文件存储分布式+去重定时+增量Pipeline+ES分布式调度
15Analytics Platform⭐⭐⭐⭐前端埋点+CSV日志收集+SQLiteClickHouse列存储实时大盘流式处理数据湖+OLAP
16Content Moderation⭐⭐⭐关键词过滤规则引擎+文件AI模型+人工审核多类型检测异步审核队列多语言全球审核
#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
17Hotel Reservation⭐⭐⭐⭐localStorage预订SQLite库存PostgreSQL悲观锁搜索缓存多实例+队列分片+动态定价
18E-commerce⭐⭐⭐⭐⭐商品展示+购物车SQLite商品库PostgreSQL+事务搜索+推荐订单异步处理全球多仓库
19Payment System⭐⭐⭐⭐模拟支付UI第三方支付集成事务+幂等+对账风控规则多支付渠道全球货币支持
20Flash Sale⭐⭐⭐⭐倒计时+抢购UISQLite库存扣减Redis原子操作预热+限流消息队列削峰多机房容灾
#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
21Proximity Service⭐⭐⭐硬编码JSON+定位SQLite+距离计算PostGIS空间索引实时状态评分排序全国分片
22Google Maps⭐⭐⭐⭐Leaflet标记路线规划API实时路况实时追踪路线缓存瓦片+流处理
23Uber/滴滴⭐⭐⭐⭐⭐地图选点模拟派单+SQLite实时匹配+WebSocket动态定价多城市调度全球多区域
24Food Delivery⭐⭐⭐⭐⭐菜单+购物车订单+SQLite实时配送追踪骑手调度多商家平台城市级分片
#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
25Google Drive⭐⭐⭐⭐拖拽+localStorage本地文件系统版本控制+锁分块上传去重+分层存储实时协作(CRDT)
26Google Docs⭐⭐⭐⭐⭐contenteditable+localStorageWebSocket同步OT/CRDT实时协作评论+历史多人同时编辑离线合并
27Dropbox⭐⭐⭐⭐文件夹监听+JSON文件同步+SQLite增量同步+冲突解决带宽优化客户端缓存全球CDN同步
#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
28Gaming Leaderboard⭐⭐⭐localStorage排名JSON文件存分数Redis SortedSet多维排行批量+SSE优化好友/地区排名
29Multiplayer Game⭐⭐⭐⭐⭐本地双人对战WebSocket房间状态同步+预测反作弊游戏服务器集群全球大区路由
30Live Streaming⭐⭐⭐⭐HTML5本地视频RTMP推流+HLS转码+CDN分发弹幕互动多码率+低延迟全球直播网络
#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
31Email System⭐⭐⭐⭐mailto链接SMTP+SQLite邮件队列+IMAP附件+搜索反垃圾系统全球邮件路由
32Calendar System⭐⭐⭐HTML日历+localStorageSQLite事件冲突检测+提醒共享日历多时区同步企业级权限
33CRM⭐⭐⭐Excel导入+展示SQLite客户库PostgreSQL+全文搜索销售漏斗多租户SaaS数据分析集成
34Monitoring & Alerting⭐⭐⭐⭐前端健康检查HTTP健康端点Prometheus+Grafana多维告警分布式追踪全链路可观测
#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
35Stock Trading⭐⭐⭐⭐⭐模拟行情+本地交易SQLite持仓+订单撮合引擎+事务实时行情推送高频订单处理全球交易所接入
36Digital Wallet⭐⭐⭐⭐本地余额记录SQLite账本双向记账+幂等风控+限额清算系统跨境支付
#系统难度V1 零依赖V2 最小后端V3 生产化V4 千人V5 万人V6 十万+
37Push Notification⭐⭐⭐浏览器Notification APIFCM/APNs接入消息队列+分发精准定向批量推送优化全球推送网络
38Offline-First App⭐⭐⭐纯离线PWAService Worker+同步冲突解决+CRDT增量同步多端一致性全球低延迟同步
39IDE/Code Editor⭐⭐⭐⭐⭐CodeMirror单页项目文件+LSP插件系统+调试协作编辑AI代码补全云端IDE集群
40Desktop Sync Client⭐⭐⭐本地文件夹监听上传+SQLite元数据增量同步+版本控制冲突处理P2P局域网加速全球分布式存储
  1. 选一个感兴趣的系统
  2. 从 V1 开始做——用 AI 10 分钟就能搞定
  3. 体验 V1 的局限,理解为什么需要 V2
  4. 逐步演进,每个版本在前一个基础上迭代
  5. 不需要做完所有版本 —— V1-V3 覆盖基础,V4-V6 是进阶挑战
  6. 遇到不懂的知识点,查 深度参考模块

入门(V1-V3 就够):URL Shortener → Gaming Leaderboard → Proximity Service

进阶(挑战 V4-V5):Hotel Reservation → News Feed → Chat System

深度(完整 V1-V6):YouTube → Search Engine → Google Drive

金融/企业挑战:Payment System → Stock Trading → Digital Wallet