在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

kamranahmedse/developer-roadmap

菜单

系统架构

相关源文件

本文档全面概述了 roadmap.sh 平台的架构，解释了其核心系统、它们之间的交互以及技术实现细节。它侧重于应用程序的高层结构、关键组件之间的关系以及整个系统的数据流。

有关单个组件具体实现细节的信息，请参阅本维基中的相应页面。

核心系统概览

roadmap.sh 平台围绕多个相互连接的系统构建，这些系统协同工作，为学习新技能和规划职业道路的开发者提供一致的用户体验。

来源

技术栈

roadmap.sh 平台建立在现代 Web 技术栈之上，专注于静态站点生成和交互式客户端组件。

核心技术

组件技术目的
框架Astro支持部分水合的静态站点生成
UI 组件React交互式 UI 元素
样式Tailwind CSS实用优先 CSS 框架
构建工具Vite快速开发和优化构建
部署GitHub ActionsCI/CD流水线
服务器Node.js服务器端渲染和 API 处理
内容Markdown内容创作
图表Mermaid图表渲染

来源

内容系统架构

内容系统负责管理和渲染平台上提供的各种类型的内容，包括路线图、最佳实践、指南和问题。

来源

路线图数据结构

路线图是使用 Markdown 文件（带 YAML frontmatter）和 JSON 文件结合定义，用于视觉呈现。每个路线图都有一个对应的 .md 文件用于定义元数据，以及一个 .json 文件用于定义路线图可视化的结构和布局。

路线图 frontmatter 包含

  • 基本信息（标题、描述、顺序）
  • SEO 元数据
  • 渲染尺寸
  • 相关资源
  • 渲染配置

来源

页面渲染架构

该平台使用 Astro 进行静态站点生成，并结合 React 用于交互式组件。这种混合方法实现了快速的初始页面加载，并通过渐进式增强提高了交互性。

来源

基础布局结构

应用程序中的所有页面都使用一个通用的 BaseLayout 组件，该组件提供基本结构，包括

  • HTML 文档结构
  • Meta 标签和 SEO
  • 通用脚本和样式
  • 导航头部
  • 页脚
  • UI 组件，如身份验证、命令菜单和浮动通知

布局使用槽位（slots）允许页面在特定位置注入内容，例如主要内容区域、页面头部和页脚。

来源

进度跟踪系统

进度跟踪系统允许用户跟踪他们在路线图中的进度，支持认证用户（与服务器同步）和访客用户（本地存储）。

来源

进度存储

进度数据存储在两个位置

  1. 本地存储：对于认证用户和访客用户，进度都缓存在浏览器的 localStorage 中，以便更快地访问和离线使用。
  2. 后端 API：对于认证用户，进度也会同步到服务器，以便在不同设备上持久化。

系统包含检查本地缓存是否过期并在需要时从服务器刷新它的机制。

来源

进度可视化

进度跟踪系统通过操作 DOM 来直观地显示路线图可视化中主题的状态

  • 已完成主题：灰色并带删除线
  • 学习中主题：带浅紫色背景的下划线
  • 已跳过主题：深色背景并带删除线

这种视觉反馈帮助用户跟踪已完成的内容和待学习的内容。

来源

构建和部署系统

该平台使用基于 GitHub Actions 的持续集成和部署工作流，将应用程序构建并部署到 EC2 实例。

来源

构建流程

构建过程包括以下几个步骤

  1. 配置准备：设置环境变量和配置文件
  2. 依赖安装：安装 npm 包
  3. 渲染器生成：从单独的仓库创建路线图渲染器
  4. 图像压缩：优化图像以加快加载速度
  5. Astro 构建：生成静态站点文件

来源

部署过程

部署过程使用 GitHub Actions 来

  1. 构建应用程序
  2. 使用 rsync 将构建的文件部署到 EC2 实例
  3. 重启 PM2 进程管理器以更新运行中的应用程序
  4. 清除 CloudFront 缓存以确保用户获取最新版本

来源

主题详情系统

主题详情系统负责显示路线图中特定主题的详细信息。它提供了一个弹出界面，显示内容、资源和进度跟踪选项。

来源

主题内容加载

当用户点击路线图中的一个主题时，系统会

  1. 从本地路径或自定义资源的 API 端点获取内容
  2. 解析 HTML 或 Markdown 内容
  3. 提取标题、描述和资源链接
  4. 在弹出界面中渲染内容

对于官方路线图，主题内容以 HTML 文件形式存储并由服务器提供。对于自定义路线图，主题内容从 API 获取。

来源

进度交互

主题详情界面包含一个进度跟踪按钮，允许用户将主题标记为

  • 已完成
  • 学习中
  • 已跳过

此状态随后会传播到进度跟踪系统，并在路线图上直观地反映出来。

来源

认证系统

身份验证系统提供用户身份识别和授权，用于访问高级功能以及跨设备同步进度。

来源

身份验证流程

身份验证流程

  1. 用户点击登录/注册
  2. 用户选择身份验证提供商
  3. 用户被重定向到提供商进行身份验证
  4. 身份验证成功后，用户被重定向回应用程序
  5. 应用程序将身份验证令牌存储在 Cookie 中
  6. UI 更新以显示认证功能

来源

分析和跟踪

该平台包含多个分析和跟踪系统，用于监控用户行为并改善用户体验。

来源

变现系统

该平台采用多种变现策略，包括广告、高级课程和团队订阅。

来源

结论

roadmap.sh 平台建立在现代、基于组件的架构之上，强调静态站点生成与动态客户端交互。该系统旨在提供无缝的用户体验，同时高效地管理和向用户交付内容。

主要架构特点包括

  • 内容与呈现分离
  • 交互性的渐进增强
  • 进度跟踪的混合存储
  • 持续集成与部署
  • 基于组件的 UI 架构

这种架构使平台能够高效扩展，同时为学习新技能和规划职业道路的开发者提供丰富的用户体验。