乐趣区

关于前端: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

返回目录


退出移动版