前端开发人员学习路线
#教程
互联网
互联网如何运作
什么是HTTP
浏览器及其工作原理
DNS及其工作原理
什么是域名
什么是托管
HTML
CSS
JavaScript
版本控制系统
Git的基本用法
存储库托管服务
(可选)网络安全知识
Package Managers
基本
- HTTPS
- 内容安全政策
- CORS
- 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
-
Next.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