简介
这是一份 2021 年前端开发手册，列举前端开发相关技术，提供相关技术的学习资源。下面的项目不用全部学习，可以选其中一些学习。
欢迎补充！项目地址：2021-frontend-handbook
目录
- HTML
- CSS
- JavaScript
- 前端框架
- 前端工程化
- 服务端渲染 SSR
- 静态站点生成器 SSG
- TypeScript
- 用 JS 去做服务器端
- 桌面应用程序 Electron
- 移动端混合开发
- 前端架构 JAMStack
- WebAssembly
1. HTML
- DOCTYPE
- HTML, XHTML, XML 差异性
- HTML5 新特性 及 语义化标签
- meta, img, script 等标签及其标签属性
- 有兴趣可以了解 W3C 和 WHATWG HTML5 差异
文章
- :book: HTML（超文本标记语言） —— MDN
- :book: HTML5 —— W3C
- :book: HTML5 教程 —— w3school
- :book: HTML5 标准 —— WHATWG
视频
2. CSS
- CSS 基础
- CSS 布局
- CSS 动画
- CSS 预处理器（sass, less, stylus）
文章
- :book: CSS（层叠样式表）
- :book: CSS现状和如何学习 —— 大漠
视频
3. JavaScript
- JavaScript 基础
- ES6
- 面向对象编程 和 函数式编程
文章
- :book: JavaScript 教程 —— W3School
- :book: 重新介绍 JavaScript（JS 教程）
视频
- :tv: JavaScript深入浅出 —— 慕课网
- :tv: 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）
文章
- :book: vue.js官网
- :book: 介绍 | Vue Router
- :book: Vuex 是什么? | Vuex
- :book: React 官方中文文档 – 用于构建用户界面的 JavaScript 库
- :book: React Router 中文文档
- :book: Redux 中文文档
- :book: MobX 中文文档
- :book: Angular 中文网
- :book: NgRx Docs
- :book: RxJS 中文文档
- :book: Svelte 中文文档
视频
- :tv: 3小时速成 Vue2.x 核心技术 —— 慕课网
- :tv: vue3教程 —— 慕课网
- :tv: React16.4 快速上手 —— 慕课网
- :tv: 油管搬运Svelte框架全教程 —— bilibili
5. 前端工程化
- 包管理工具（npm, yarn）
- JavaScript 编译器（babel）
- 代码检测工具（ESlint）
- 自动化打包工具（webpack, rollup, parcel, gulp）
文章
- :book: npm 中文文档 | npm 中文网
- :book: Yarn 中文文档
- :book: Babel - 下一代 JavaScript 语法的编译器
- :book: ESLint - 插件化的 JavaScript 代码检测工具
- :book: webpack 中文文档 | webpack 中文网
- :book: rollup.js 中文文档 | rollup.js 中文网
- :book: gulp 中文文档 - gulp.js 中文文档 | gulp.js 中文网
- :book: Parcel 中文网
视频
- :tv: 前端内容的自动化构建
- :tv: Grunt-beginner前端自动化工具
6. 服务端渲染 SSR
- Nuxt（Vue）
- Next（React）
- Sapper（Svelte）
文章
- :book: Nuxt.js - Vue.js 通用应用框架
- :book: Next.js - React 应用开发框架 | Next.js 中文网
- :book: sapper中文网
视频
7. 静态站点生成器 SSG
- Gridsome（Vue）
- Gatsby（React）
文章
- :book: Gridsome 是一个免费、开源、基于 Vue.js 构建的框架
- :book: GatsbyJS 中文网
8. TypeScript
- 和 JavaScript 的差异
- 基础类型
- OOP（模块，类，接口，继承，泛型等）
文章
视频
9. 用 JS 去做服务器端
-
Node.js
- 单线程、事件驱动、非阻塞I/O
- 框架（Express, Koa，Nest）
-
Deno
文章
- :book: node.js官网
- :book: Express - 基于 Node.js 平台的 web 应用开发框架
- :book: Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架
- :book: Nestjs中文网
- :book: Deno 中文手册
视频
- :tv: Nodejs全栈入门 —— 慕课网
10. 桌面应用程序 Electron
Electron.js是可以通过HTML，CSS，JavaScript开发跨平台的桌面应用程序。
- 基础语法，API
- 编译
- 性能优化
- 调试
- 部署
文章
- :book: Electron 文档
视频
11. 移动端开发
- React Native
- Flutter
- Ionic
文章
- :book: React Native 中文网 · 使用React来编写原生应用的框架
- :book: Flutter中文网
- :book: Ionic Framework - Ionic Documentation
视频
- :tv: 2020前端React-Native跨平台APP实战
- :tv: Flutter基础视频教程 —— bilibili
- :tv: Dart Flutter入门实战视频教程 —— bilibili
12. 前端架构 JAMStack
JAMStack（JAM 代表 JavaScript，API 和 Markup）
是一种使用 Static Site Generators (SSG) 技术、不依赖 Web Server 的前端架构。
文章
- :book: jamstack 官网
- :book: 前端架构之 JAMStack
视频
- :tv: What is JAMStack
13. WebAssembly
WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行底层字节码。
文章
- :book: WebAssembly —— MDN
- :book: WebAssembly 中文网|Wasm 中文文档
- :book: WebAssembly 现状与实战
