简介

这是一份 2021 年前端开发手册，列举前端开发相关技术，提供相关技术的学习资源。下面的项目不用全部学习，可以选其中一些学习。

欢迎补充！项目地址：2021-frontend-handbook

目录

1. HTML
2. CSS
3. JavaScript
4. 前端框架
5. 前端工程化
6. 服务端渲染 SSR
7. 静态站点生成器 SSG
8. TypeScript
9. 用 JS 去做服务器端
10. 桌面应用程序 Electron
11. 移动端混合开发
12. 前端架构 JAMStack
13. WebAssembly

1. HTML

• DOCTYPE
• HTML, XHTML, XML 差异性
• HTML5 新特性 及 语义化标签
• meta, img, script 等标签及其标签属性
• 有兴趣可以了解 W3C 和 WHATWG HTML5 差异

文章

• HTML（超文本标记语言） —— MDN
• HTML5 —— W3C
• HTML5 教程 —— w3school
• HTML5 标准 —— WHATWG

视频

• 初识HTML(5)+CSS(3)-2020升级版 —— 慕课网
• Web前端开发 —— 北京工业大学MOOC

返回目录

2. CSS

• CSS 基础
• CSS 布局
• CSS 动画
• CSS 预处理器（sass, less, stylus）

文章

• CSS（层叠样式表）
• CSS现状和如何学习 —— 大漠

视频

• 初识HTML(5)+CSS(3)-2020升级版 —— 慕课网

返回目录

3. JavaScript

• JavaScript 基础
• ES6
• 面向对象编程 和 函数式编程

文章

• JavaScript 教程 —— W3School
• 重新介绍 JavaScript（JS 教程）

视频

• JavaScript深入浅出 —— 慕课网
• JavaScript进阶篇 —— 慕课网

返回目录

4. 前端框架

• Vue

  • 路由（Vue-Router）
  • 状态管理（Vuex）

• React

  • JSX
  • Class Component, Hooks
  • 路由（React-Router, React-Router-Dom）
  • 状态管理（Redux, Mobx, Context API）

• Angular

  • 状态管理（Service, NgRx, RxJS）

• Svelte

  • 路由（svelte-spa-router）
  • 状态管理（Context API）

文章

• vue.js官网
• 介绍 | Vue Router
• Vuex 是什么? | Vuex
• React 官方中文文档 – 用于构建用户界面的 JavaScript 库
• React Router 中文文档
• Redux 中文文档
• MobX 中文文档
• Angular 中文网
• NgRx Docs
• RxJS 中文文档
• Svelte 中文文档

视频

• 3小时速成 Vue2.x 核心技术 —— 慕课网
• vue3教程 —— 慕课网
• React16.4 快速上手 —— 慕课网
• 油管搬运Svelte框架全教程 —— bilibili

返回目录

5. 前端工程化

• 包管理工具（npm, yarn）
• JavaScript 编译器（babel）
• 代码检测工具（ESlint）
• 自动化打包工具（webpack, rollup, parcel, gulp）

文章

• npm 中文文档 | npm 中文网
• Yarn 中文文档
• Babel - 下一代 JavaScript 语法的编译器
• ESLint - 插件化的 JavaScript 代码检测工具
• webpack 中文文档 | webpack 中文网
• rollup.js 中文文档 | rollup.js 中文网
• gulp 中文文档 - gulp.js 中文文档 | gulp.js 中文网
• Parcel 中文网

视频

• 前端内容的自动化构建
• Grunt-beginner前端自动化工具

返回目录

6. 服务端渲染 SSR

• Nuxt（Vue）
• Next（React）
• Sapper（Svelte）

文章

• Nuxt.js - Vue.js 通用应用框架
• Next.js - React 应用开发框架 | Next.js 中文网
• sapper中文网

视频

• Nuxt.js免费视频教程 开启SSR渲染 —— 技术胖

返回目录

7. 静态站点生成器 SSG

• Gridsome（Vue）
• Gatsby（React）

文章

• Gridsome 是一个免费、开源、基于 Vue.js 构建的框架
• GatsbyJS 中文网

返回目录

8. TypeScript

• 和 JavaScript 的差异
• 基础类型
• OOP（模块，类，接口，继承，泛型等）

文章

• TypeScript中文网 · TypeScript——JavaScript的超集
• TypeScript 入门教程 —— xcatliu

视频

• TypeScript从入门到精通视频教程-2020年新版

返回目录

9. 用 JS 去做服务器端

• Node.js

  • 单线程、事件驱动、非阻塞I/O
  • 框架（Express, Koa，Nest）
• Deno

文章

• node.js官网
• Express - 基于 Node.js 平台的 web 应用开发框架
• Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架
• Nestjs中文网
• Deno 中文手册

视频

• Nodejs全栈入门 —— 慕课网

返回目录

10. 桌面应用程序 Electron

Electron.js是可以通过HTML，CSS，JavaScript开发跨平台的桌面应用程序。

• 基础语法，API
• 编译
• 性能优化
• 调试
• 部署

文章

• Electron 文档

视频

• Electron免费视频教程 —— bilibili

返回目录

11. 移动端开发

• React Native
• Flutter
• Ionic

文章

• React Native 中文网 · 使用React来编写原生应用的框架
• Flutter中文网
• Ionic Framework - Ionic Documentation

视频

• 2020前端React-Native跨平台APP实战
• Flutter基础视频教程 —— bilibili
• Dart Flutter入门实战视频教程 —— bilibili

返回目录

12. 前端架构 JAMStack

JAMStack（JAM 代表 JavaScript，API 和 Markup）

是一种使用 Static Site Generators (SSG) 技术、不依赖 Web Server 的前端架构。

文章

• jamstack 官网
• 前端架构之 JAMStack

视频

• What is JAMStack

返回目录

13. WebAssembly

WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行底层字节码。

文章

• WebAssembly —— MDN
• WebAssembly 中文网|Wasm 中文文档
• WebAssembly 现状与实战

视频

• 下一代web技术，WebAssembly入门教程 —— bilibili
• WebAssembly入门 —— bilibili

返回目录