主题
前端开发者路线
HTML
HTML（超文本标记语言）是创建网页的标准，它使用元素和属性来构建内容。浏览器会解释 HTML 标签来呈现页面。当前的标准 HTML5 添加了语义元素、多媒体支持和表单控件。它与 CSS 配合使用来设置样式，并与 JavaScript 配合使用来增强交互性，构成了 Web 开发的基础。
CSS
CSS（层叠样式表）用于设置 HTML 文档的样式，控制布局、颜色和字体。使用选择器定位元素，将设计与内容分离。支持响应式设计，包括媒体查询、层叠规则、继承和优先级。现代 CSS 包括 Flexbox、Grid、动画和过渡。
Less
Sass
Tailwind CSS
Css in JS
JavaScript
JavaScript 是一种多功能的编程语言，能够让网站具有交互性。它可以在浏览器、服务器（Node.js）和桌面应用程序中运行。它具有动态类型、事件驱动编程和持续演进的特性。是现代 Web 前端和后端开发不可或缺的语言。
TypeScript
Web Framework
Web 框架是提供用于构建应用程序的库、结构、规则和工具的开发工具包。不同的框架会根据项目需求提供不同的功能。常见的例子包括 React、Angular 和 Vue，它们各自都有独特的优势和功能。
React
React 最初是 Facebook 推出的一款 JavaScript 工具，用于构建 UI，尤其适用于单页应用。它允许您创建可复用的 UI 组件，并在数据更改时进行更新。React 使用虚拟 DOM 来提高速度，并具有单向数据流。这种组件风格使代码简洁易用。React 还可以与 Redux 等工具配合使用，用于数据管理，以及与 React Native 等工具配合使用，用于移动应用。React 因其简洁、快速且拥有庞大的社区而广受欢迎。
Vue
Vue.js 是一个用于构建网站界面的 JavaScript 框架。它易于上手，并且可以逐步添加到项目中。Vue 使用模板和虚拟 DOM（真实页面的轻量级副本）来高效地在屏幕上显示内容。它拥有一个可重用组件系统，使代码井然有序。虽然 Vue 主要处理用户可见的内容，但它也能与其他工具很好地协同工作，例如管理数据或页面导航。它以易学、灵活和快速而闻名，因此在各种项目中都很受欢迎。
Angular
Angular 是 Google 用于构建单页应用 (SPA) 的 TypeScript 框架。它具有可复用组件、双向数据绑定、依赖注入和强大的模板系统。此外，它还包含测试工具、路由和状态管理功能。非常适合大型复杂的企业级应用。
Svelte
Svelte 是一款用于构建 UI 的 JavaScript 工具。与其他工具不同，Svelte 的主要工作是在构建时完成，而不是在浏览器中。它将代码转换为简洁、快速、纯 JavaScript 代码。Svelte 使用组件，语法简单，因此您可以编写更少的代码。它包含管理数据、样式和动画的功能。由于 Svelte 不使用虚拟 DOM，因此页面加载和更新速度很快。它因其简洁和快速而广受欢迎。
SolidJS
SolidJS 是一款用于构建网站界面的 JavaScript 工具，以快速高效而闻名。它只更新页面中发生变化的部分，性能卓越。SolidJS 不使用虚拟 DOM，而是直接修改真实的 DOM。它的语法与 React 类似，因此许多开发者都对其很熟悉。它支持 JSX，内置数据管理方法，并且体积小巧。SolidJS 因其速度快、简洁易用以及智能的更新处理方式而越来越受欢迎。
SSR
服务器端渲染 (SSR) 在发送到浏览器之前，会在服务器上生成完整的 HTML。它可以缩短初始加载时间，提升 SEO 性能，并在低速设备上提供更好的性能。框架：Next.js (React)、Nuxt.js (Vue)。虽然会增加服务器负载，但会提升用户体验
React SSR
Vue SSR
Angular SSR
Package Managers
软件包管理器可自动执行软件包的安装、更新和依赖项管理。例如 npm (JavaScript)、pip (Python) 和 yarn。支持代码共享、复用和一致的项目设置。对于现代开发工作流程和团队协作至关重要。
Npm
npm（Node 包管理器）是用于查找、共享和管理代码依赖项的主要 JavaScript 包管理器。它使用 package.json 来跟踪项目需求，并支持跨环境的一致构建。尽管有 Yarn 和 pnpm 等替代方案，npm 仍然是最受欢迎的选择。
Yarn
Pnpm
Lerna
Module Bundlers
模块打包器将多个 JavaScript 文件合并成针对浏览器优化的打包文件。它可以处理依赖关系、代码转换和拆分，从而提高性能。例如：Webpack、Rollup、Parcel。它支持现代 JavaScript 功能，缩短加载时间，并简化开发工作流程。
Webpack
Rollup
Parcel
Parcel 是一款零配置的 Web 应用打包工具，可自动处理 JavaScript、CSS 和 HTML。它默认提供依赖解析、代码转换、代码优化、实时重新加载、代码拆分和 tree-shaking 等功能。Parcel 以简洁快速著称，是快速原型设计的理想选择。
Vite
Vite 是一款现代化的构建工具，使用原生 ES 模块实现即时服务器启动和快速热模块替换。支持 Vue、React、Svelte 和 Rollup 进行生产构建。具备 CSS 预处理器和 TypeScript 集成功能。通过更快的开发周期提升开发者体验。
SWC
SWC（Speedy Web Compiler）是一款基于 Rust 的 JavaScript/TypeScript 编译器和打包器，速度远超 Babel。它支持现代 JavaScript 特性、JSX 和 TypeScript 编译。它常用于大型项目，并可作为其他构建工具的性能基础。
esbuild
esbuild 是一个用 Go 编写的超快速 JavaScript 打包器和压缩器。它能够近乎即时地处理现代 JavaScript、TypeScript 和 JSX。它拥有简单的 API，性能卓越，适合开发环境，也可作为其他工具的基础。为了速度，它牺牲了一些高级功能。
Linters & Formatters
代码检查器和格式化程序通过查找错误、缺陷和样式问题（代码检查器）以及自动修复缩进和空格等格式问题（格式化程序）来提高代码质量。确保一致性、可读性和早期错误检测。示例：ESLint、Prettier。
ESLint
ESLint 是一款 JavaScript 代码检查工具，用于检查代码中的问题、保持一致的风格并查找错误。它高度可配置，支持自定义或预设规则。支持现代 JavaScript、JSX 和 TypeScript。它与编辑器和构建工具集成，并提供自动修复功能，以确保团队代码的一致性。
Prettier
Prettier 自动格式化代码，确保 JavaScript、TypeScript、CSS 和其他语言之间的一致性。强制执行固定的样式规则，消除样式争议并节省时间。与编辑器和预提交钩子集成。因其在团队间维护统一的代码外观而广受欢迎。
Performance
性能
DevTools Usage
Service Workers
Cache-Control
Streamed Response
Testing
测试通过单元测试、集成测试、功能测试、UI/UX 测试、性能测试、安全性测试、可访问性和兼容性测试来验证软件的功能和质量。现代方法使用自动化工具、CI/CD 流水线、TDD 和 BDD 方法。早期错误检测可提高应用程序的可靠性。
Vitest
Vitest 是一个快速的 JavaScript/TypeScript 测试框架，针对 Vite 进行了优化，并兼容 Jest 的 API。它具有实时测试更新、快照测试、模拟测试、代码覆盖率测试、并行执行和监视模式等功能。Vitest 专为 Vite 项目设计，但适用于任何 JavaScript 项目。
Jest
Jest 是 Facebook 的 JavaScript 测试框架，用于单元测试，具有自动模拟、代码覆盖率和快照测试等功能。可与 React、Angular 和 Vue 配合使用。它具有并行测试执行、监视模式和内置断言库等功能。是 JavaScript 开发人员的首选。
Playwright
Playwright 是微软的跨浏览器自动化测试框架，支持 Chromium、Firefox 和 WebKit 等跨平台浏览器。它兼容 JavaScript、TypeScript、Python 和 .NET。具备自动等待、网络控制和移动端模拟等功能，非常适合配合调试工具进行现代 Web 应用测试。
Cypress
Cypress 是一个 JavaScript 端到端测试框架，可直接在浏览器中运行测试。它基于 Mocha 构建，具有出色的异步测试支持。它具有时间旅行调试、自动等待和实时重新加载等功能。它支持 BDD/TDD 方法，可进行全面的 Web 应用程序测试。
SSG
静态网站生成器 (SSG) 会根据内容和模板，将网站构建为预生成的 HTML 文件。它能使网站快速、安全且易于托管。例如：Jekyll、Hugo、Eleventy。非常适合博客、文档和以内容为中心的网站，性能卓越。
Astro
Astro 是一个支持多种框架（React、Vue、Svelte）的静态网站生成器，并支持部分 hydration 机制。它将组件渲染为静态 HTML，仅在需要时发送 JavaScript。它具有基于文件的路由和 Markdown 支持。非常适合博客、文档和营销网站。
Next.js
Next.js 是一个支持服务器端渲染和静态站点生成的 React 框架。它具有自动代码拆分、基于文件的路由、CSS 支持、API 路由和优化的性能。此外，它还支持实时更新、智能预加载和轻松部署。非常适合 SEO 友好的应用程序。
VuePress
VuePress 是一款基于 Vue.js 的静态网站生成器，专为文档优化。它能够创建快速、SEO 友好的网站，并支持基于 Vue 的主题、语法高亮以及 Markdown 功能。此外，它还支持内置搜索、响应式布局以及插件/主题自定义功能。非常适合文档和简单网站。
Eleventy
Eleventy (11ty) 是一款灵活的静态网站生成器，支持多种模板语言（HTML、Markdown、JavaScript）。它基于数据源创建页面，无需添加客户端 JavaScript 代码，从而实现快速加载。高度可定制，并提供了实用的导航和图像处理插件。
Nuxt.js
Nuxt.js 是一个 Vue.js 框架，提供结构化、自动路由和服务端渲染功能。支持静态站点生成、代码拆分和数据获取。提供灵活的渲染选项，注重开发者体验和性能。凭借其插件生态系统，它因 SEO 友好的 Vue 应用而广受欢迎。
Web Components
Web 组件使用自定义元素、影子 DOM 和 HTML 模板创建可重用的 HTML 元素。通过封装的样式和结构，跨浏览器和框架工作。支持模块化、可共享的代码，减少样式冲突。构建可互操作 Web 部件的标准。
HTML Templates
<template> HTML 元素包含隐藏内容，供 JavaScript 稍后使用。它充当创建动态页面元素的可重用蓝图。支持在 Web 应用程序中实现高效的内容模板和基于组件的开发模式。
Shadow DOM
Shadow DOM 在元素内部创建私有的、封装的 DOM 树，将 HTML、CSS 和 JavaScript 与主页面隔离开来。它可以防止样式和脚本冲突，从而实现更简洁、可复用的组件。对于需要独立功能的 Web 组件来说，Shadow DOM 至关重要。
Custom Elements
自定义元素允许您创建自己的 HTML 标签作为 Web 组件的一部分。使用自定义行为构建可复用的网页组件，而非嵌套的标准 HTML。通过封装功能，HTML 更加简洁，组件更易于管理。
GraphQL
GraphQL 是 Facebook 的 API 查询语言，允许客户端精确请求所需数据。与 REST 相比，它减少了过度获取和获取不足的情况。非常适合移动应用、复杂的 API 以及具有强类型且快速变化的需求。
Apollo
Apollo GraphQL 是一个面向 GraphQL 应用程序的综合平台。Apollo 客户端负责处理缓存、数据获取和状态管理。Apollo 服务器负责构建 GraphQL API。此外，它还包含用于架构管理、性能监控和开发者工具的工具，旨在构建速度更快、可扩展的应用程序。
Relay Modern
Relay 是 Facebook 为使用 GraphQL 的数据密集型 React 应用程序提供的 JavaScript 库。它将数据需求与组件共置，从而实现高效的数据获取和更新。它能够处理缓存、实时更新和乐观的 UI 更改。非常适合需要复杂数据管理的复杂应用程序。
PWAs
渐进式 Web 应用 (PWA) 是使用 HTML、CSS 和 JavaScript 构建的 Web 应用，其行为与原生应用类似。它具备离线功能、推送通知、主屏幕安装以及用于缓存的 Service Worker。它是一款跨平台、易于发现且经济高效的原生应用替代方案。
Desktop Apps
JavaScript 使用 Electron、NW.js 或 Tauri 构建桌面应用，用于跨平台开发（Windows、Mac、Linux）。Electron 支持 VS Code 和 Discord。提供文件系统访问和原生集成。权衡：与原生应用相比，开发速度更快，但性能和资源占用更高。
Electron
Electron 使用 Web 技术（HTML、CSS、JavaScript）结合 Chromium 和 Node.js 构建跨平台桌面应用。它提供原生操作系统访问，并支持 VS Code 等应用程序。它支持快速开发，但可能占用大量资源。是 Web 开发者的热门选择。
Tauri
Tauri 使用 Web 技术构建小型、安全的桌面应用，后端使用 Rust。它使用系统 WebView 而非内置浏览器，从而节省应用空间。Tauri 拥有强大的安全性和 JavaScript 框架兼容性。与 Electron 相比，Tauri 更注重性能和更低的资源占用。
Flutter Desktop Apps
Flutter 是 Google 的跨平台框架，基于单一 Dart 代码库构建适用于 iOS、Android、Web 和桌面的应用。它拥有丰富的小部件库、热重载和自定义渲染引擎，可实现一致的 UI。Flutter 是移动开发领域的热门选择，并已扩展到 Web 和桌面平台。
Mobile Apps
React Native
React Native 支持使用 JavaScript 和 React 为 iOS 和 Android 构建原生移动应用。它会编译为原生组件，带来逼真的外观和性能。此外，它还支持代码共享、热加载和设备 API 访问。非常适合 React 开发者转型到移动开发。
Flutter Mobile Apps
Flutter 是 Google 的跨平台框架，基于单一 Dart 代码库构建适用于 iOS、Android、Web 和桌面的应用。它拥有丰富的小部件库、热重载和自定义渲染引擎，可实现一致的 UI。Flutter 是移动开发领域的热门选择，并已扩展到 Web 和桌面平台。
Ionic
Ionic 使用 Web 技术（HTML、CSS、JavaScript）结合 Angular、React 或 Vue 构建移动和桌面应用。提供 UI 组件和原生设备访问。它使用平台自适应样式封装 Web 应用，实现原生部署。支持快速跨平台开发。