動態

詳情 返回 返回

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

返回目錄

frontend , Javascript , 前端
點贊

Add a new 評論

Some HTML is okay.