Skip to main content

前端开发人员学习路线

#教程

互联网​

互联网如何运作​

什么是HTTP​

浏览器及其工作原理​

DNS及其工作原理​

什么是域名​

什么是托管​

HTML​

CSS​

JavaScript​

版本控制系统​

Git的基本用法​

存储库托管服务​

(可选)网络安全知识​

Package Managers

基本​

  1. HTTPS
  2. 内容安全政策
  3. CORS
  4. OWASP安全风险

包管理器​

Package Managers​

  • pnpm

  • yarn

  • npm

CSS架构​

(了解)BEM 命名规范​

块(block),元素(element),修饰符(modiffier)
nav_button-primary{
    code...
}

CSS预处理器​

Sass​

(可选)PostCSS​

(不学)Less​

构建工具​

任务运行器​

Task Runners

  • npm scripts​

模块化捆绑工具​

格式化程序​

Linters and Formatters​

Prettier​

ESLint​

框架​

Framework​

Vue​

  • Vue-router
  • pinia
  • Vue-i18n

React​

  • Redux

  • Mobx

  • Recoil

Modern CSS / 现代CSS​

Styles Components​

样式化组件

CSS Module​

模块话组件

(可选)JSX​

(可选)Emotion​

(可选)Web Components / Web组件​

Web 组件

HTML Templates​

Custom Elements​

Shadow DOM​

CSS Frameworks​

CSS 框架, 基于JS,更适合基于JS的框架

Tailwind CSS​

Chakra UI​

Material UI​

Radix UI​

Testing / 测试​

测试,用下列的测试满足所有需求

Jest​

react-testing-library​

Cypress​

Enzyme​

(不推荐)​

  • Mocha
  • Chai
  • Ava
  • Jasmine

类型检测​

TypeScript​

Progressive Web Apps / BOM API​

渐进式 Web App

Browser Object Module Application Programming Interface

学习 PWAs 中 使用不同的Web API

Storage(存储)​

Web Sockets​

Service Works(网络服务)​

(可选)Location(位置)​

(可选)Notiffcations(通知)​

(可选)Device Orentation(设备方向)​

(可选)Payments(付款)​

(可选)Credentials(凭据)​

Performance​

性能

PRPL Pattern​

RAIL Model​

Performance​

Metrics​

Using Lighthouse​

Using DevTools

Server Side Rendering (SSR) / 服务端渲染​

React.js​

Vue.js​

  • Nuxt.js

(可选) Graphql​

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Apollo​

(备选)Relay Modern​

static Site Generators​

静态网站生成

Next.js​

Nuxt.js​

Vuepress​

GatsbyJS​

(可选)Jekyli​

(可选)Hugo​

(可选)Gridsome​

(可选)Eleventy​

桌面程序​

Electron​

移动端程序​

  • React Native
  • Flutter
  • (备选) NativeScript
  • Ionic

Web Assembly​