乐趣区

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

jiezi

简介

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

返回目录

退出移动版