2020 前端學習路線總結

在 GitHub 看到一個很不錯的前端學習路線圖（roadmap），從前端基礎到前端工程化，再到跨端，都有知識點的覆蓋，非常推薦閱讀。

圖下面是我翻譯的一個文字版，可以先看圖再看文字。
?? 表示個人推薦學習
?? 表示可選擇學習
?? 表示不需要嚴格按照路線的先后順序，可在任何時間補充這一塊的知識
? 表示個人不再推薦

計算機網(wǎng)絡

掌握計算機網(wǎng)絡的基礎是一名前端工程師的基本素養(yǎng)，建議先學習以下的知識：

?? Internet 如何工作

?? HTTP 協(xié)議

?? 瀏覽器工作機制

?? DNS 及其運行機制

??了解域名、網(wǎng)站托管

HTML

?? 學習 HTML 基礎，標簽、元素、表單驗證等等

?? 語義化標簽

?? 了解 Web 無障礙（Accessibility）

?? 學習 SEO 優(yōu)化

CSS

?? 學習 CSS 基礎

?? 制作布局：浮動、定位、顯示、盒模型、網(wǎng)格布局、彈性布局

?? 響應式設計和媒體查詢（@media）

?? 結合 HTML 制作一個簡單的網(wǎng)頁作為最佳實踐

JavaScript

?? 學習語法和基本結構

?? 學習操作 DOM

?? 學習 Fetch API / Ajax（XHR）

?? ES6+ 和模塊化 JavaScript

?? 了解變量提升、事件冒泡機制、作用域、原型、Shadow DOM、嚴格模式等概念

版本控制

?? Git 的基本操作

?? 創(chuàng)建賬號并且學習使用 GitHub

?? 創(chuàng)建賬號并且學習使用 GitLab

Web 安全知識

?? HTTPS

?? 內容安全策略（CSP）

?? 跨域資源共享

?? OWASP 安全風險

上面的內容是前端最基礎的部分，建議多花時間，掌握好每一個知識點。

從這開始，將進入前端工程化的部分，你可能會接觸到很多種不同的框架，并學習使用多種的工具為自己的開發(fā)提效。

包管理工具

npm 和 yarn 都很好，選擇一個學習即可，他們兩是相似的

?? npm

?? yarn

CSS 構架

通過使用現(xiàn)代的 CSS 框架和 CSS-in-JS 的書寫方式，不用再擔心 CSS 的構架問題，但熟悉 BEM 規(guī)范是一個不錯的選擇。

?? BEM，一種書寫規(guī)范

? OOCSS

? SMACSS

CSS 預處理器

以下三個可選擇一個進行學習。

?? SCSS

?? PostCSS

?? Less

構建工具

任務執(zhí)行器

• ?? npm scripts
• ? Gulp

2.代碼檢查和格式化工具

• ?? Prettier 代碼格式化
• ?? ESLint 代碼檢查
• ? StandardJS

3.模塊打包

?? Webpack

?? Rollup

?? Parcel

前端框架

前端框架推薦先學習 React，能理解函數(shù)式編程和組件化。Vue 的特點是上手快，中文文檔齊全，可以選擇性的學習。

?? React.js

• ??Redux
• ?? MobX

2.?? Vue.js

• • VueX

3.?? Angular

• • RxJS
  • NgRx

現(xiàn)代 CSS

?? Styled Component

?? CSS Module

?? Styled JSX

?? Emotion

? Radium

? Glamorou

Web 組件

?? HTML 模版

?? 自定義元素

?? Shadow DOM

CSS 框架

CSS 框架有兩種，一種是基于 JavaScript 框架開發(fā)的應用程序。推薦的框架有：

?? Reactstrap

?? Material UI

?? TailWind CSS

?? Chakra UI

另外一只是純 CSS 框架，默認和不和 JavaScript 組件一起使用。

?? BootStrap

?? Materialize CSS

?? Bulma

測試

在這里你需要學習使用下面的框架進行單元、集成和功能測試。

?? Jest

?? react-testing-library

?? Cypress

?? Enzyme

類型檢查器

???? TypeScript

? Flow

上面是前端工程化的學習內容，接下來的內容涉及到性能、服務端渲染以及跨端，這一部分前端也叫被稱作「大前端」。

PWA

?? 學習 PWA 中使用到的 Web API：

• Storage
• Web Sockets
• Service Workers
• 定位
• 通知
• 設備方向
• 支付、證書等等

2.??計算、測量以及提高性能：

• PRPL 模式
• RAIL 模式
• 性能指標
• 學習使用 LightHouse
• 學習使用 DevTools

服務端渲染

?? Next.js （React.js）

?? Nuxt.js （Vue.js）

?? Universal（Angular）

?? GraphQL

?? Apollo

?? Relay Modern

?? 靜態(tài)網(wǎng)站生成

?? Next.js

?? GatsbyJS

?? Nuxt.js

?? Vuepress

?? JekyII

?? Hugo

?? 移動端應用開發(fā)

?? ReactNative

?? Flutter

?? 桌面應用開發(fā)

?? Electron

?? Carlo

?? Proton Native

?? WebAssembly

總結完畢，不由得感嘆前端生態(tài)真是豐富多彩，要學的東西很多，自己不懂的也很多，有些知識點也是淺嘗輒止。雖然有這么多的方向，但還是需要找到一個點能夠深挖。

如果你是前端的初學者，也不要被這些框架給嚇到，學好基礎然后加以實踐更為重要。

上面推薦的 Roadmap GitHub 倉庫里也有后端以及 DevOps 的學習路線，可以自行瀏覽，如果有時間我也會整理出一版文字版以供大家參閱。

Keep Learning，持續(xù)精進。

web的前端：最詳細的web前端學習攻略，直接收藏吧！?zhuanlan.zhihu.com作者：mydev
鏈接：https://juejin.im/post/6895203865336119304
來源：掘金

總結

以上是生活随笔為你收集整理的前端共享桌面_2020 前端学习路线总结，哎呦，不错哦！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。