关于前端:2021-前端开发手册

简介

这是一份 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

返回目录