2020年最新前端学习路线
這段日子在 B 站上收到小伙伴最多的要求就是出一個(gè)前端學(xué)習(xí)路線,我能夠充分的感受到大家抓耳撓腮加撓墻的迷茫~所以在這里給大家總結(jié)了一套前端學(xué)習(xí)路線。先從初級(jí)前端工程師所需的技能開始,然后一路升級(jí)到高級(jí)工程師該掌握的技能,層層相扣,讓大家在工作中能游刃有余。最后附上我自己是如何從一個(gè)后端工程師轉(zhuǎn)成了前端工程師^^。希望我的經(jīng)歷能對(duì)大家有幫助。
俗話說知己知彼百戰(zhàn)不殆,要成為一名前端大神,首先知道它是做什么的。單純從工作角度看,無非就是寫寫前端樣式,連接下后臺(tái) api,解析解析數(shù)據(jù),然后顯示給用戶,核心邏輯是這樣沒錯(cuò),只是這中間摻雜著無數(shù)個(gè)邊邊角角的問題,比如框架選擇、性能優(yōu)化、兼容性調(diào)整、工程化等等。不過呢,這些并不需要一次性掌握,隨著一次一次完成工作任務(wù),解決 bug,這些自然而然就學(xué)會(huì)了~
在正式開始之前,咱們先把心態(tài)放平,就像玩游戲,游戲滿級(jí)也不是一天兩天的事,滿級(jí)之后也才是一個(gè)新的開始。。。無盡的追求完美~。時(shí)間上,掌握前端工程師的基本技能大概需要 4 個(gè)月到 1 年的時(shí)間(看自己的意志力和上進(jìn)心),之后就是在工作實(shí)踐中不斷的提升自己,時(shí)刻關(guān)注業(yè)界新聞,保持在科技的最前沿。工作是一個(gè)長(zhǎng)期的事情,咱們靜下心來慢慢學(xué)。
#完整技能大圖
先來看 github 上一大神制作的路線圖:
https://roadmap.sh/frontend
#核心技能
?
好了,相信你已經(jīng)開始下定決心要成為前端大神了,那咱們第一步就是把前端的核心裝備拿下,它們分別是?html,?css?和?JavaScript。前端的初衷是開發(fā)網(wǎng)頁來讓其他人看的,可以向全世界分享信息,直到最近幾年才誕生了利用這些核心知識(shí)去開發(fā)移動(dòng) APP、小程序等多終端前端應(yīng)用的工具,學(xué)好核心是前端工程師必備的素養(yǎng)。下邊就是核心技能的簡(jiǎn)介:
#HTML
HTML 是用來編寫網(wǎng)頁代碼結(jié)構(gòu)的,它有一系列的標(biāo)簽用于顯示不同的頁面元素,比如用?<a/>?顯示一個(gè)超鏈接,<img/>?顯示一張圖片,就跟寫一個(gè) word 文檔一樣,只是單純用 html 只能寫內(nèi)容,不能進(jìn)行排版和美化樣式,如果讓網(wǎng)頁變得漂亮,需要 CSS。
學(xué)習(xí) HTML :指南與教程
書籍:Web 開發(fā)經(jīng)典叢書:HTML & CSS 設(shè)計(jì)與構(gòu)建網(wǎng)站
#CSS
CSS 是用來美化 HTML 編寫的頁面的,通過一些語法選擇特定的 html 標(biāo)簽,然后用一些屬性來給它們添加樣式,比如文字顏色,背景,位置,邊距,定位等等,還可以添加動(dòng)畫效果讓頁面顯示的栩栩如生~。重點(diǎn)要掌握 CSS 的盒子模型、常用的布局方式,比如 flex、grid 等。
CSS - 設(shè)計(jì) web
書籍:CSS 權(quán)威指南(第四版)(上下冊(cè))
#JavaScript
在寫完 html、css 之后,咱們就可以寫漂亮的頁面了,那么接下來就是需要學(xué)習(xí) JavaScript,讓網(wǎng)頁能和人進(jìn)行互動(dòng),比如點(diǎn)擊按鈕彈出個(gè)對(duì)話框,處理用戶輸入的表單信息,添加一些復(fù)雜的動(dòng)畫,使用 ajax 加載遠(yuǎn)程數(shù)據(jù)等等。它可以直接操作 HTML 元素,給網(wǎng)頁開發(fā)提供了無限可能~這里咱們一定要把 JavaScript 基礎(chǔ)語法掌握扎實(shí),可以觀看我 B 站上的 JavaScript 視頻:
JavaScript 基礎(chǔ)教程 | 2020 年最新
JavaScript — 用戶端動(dòng)態(tài)腳本
書籍:JavaScript 權(quán)威指南(第 6 版)
書籍:Eloquent JavaScript 3rd edition (包括 HTTP)
#網(wǎng)絡(luò)基礎(chǔ)
現(xiàn)在咱們可以做成型的網(wǎng)站了,那咱們?cè)撊绾巫屓澜绲娜丝吹皆蹅兊慕茏髂?#xff1f;那這里網(wǎng)絡(luò)基礎(chǔ)就派上用場(chǎng)了,不需要精通,只需要掌握幾個(gè)基本概念就好了。
#域名
訪問網(wǎng)站咱們都知道需要使用 url (網(wǎng)址),比如 www.baidu.com,這個(gè) baidu.com 就是域名,域名可以從域名提供商購買,比如阿里云。在購買域名之后要通過 DNS 解析服務(wù)把它對(duì)應(yīng)到一臺(tái)服務(wù)器的 IP 地址上。
什么是域名?
阿里云
#服務(wù)器
服務(wù)器就是一臺(tái)安裝了服務(wù)器程序的電腦。用戶用域名訪問一個(gè)網(wǎng)站時(shí),會(huì)有 DNS 解析服務(wù)把域名解析成 IP,再通過 IP 找到相應(yīng)的服務(wù)器,服務(wù)器程序就把網(wǎng)站內(nèi)容傳遞給用戶的瀏覽器。咱們的網(wǎng)站就部署在服務(wù)器上,它也是從阿里云之類的提供商購買。
阿里云
#Linux
服務(wù)器的操作系統(tǒng)一般是 linux,它可以沒有用戶界面,可以節(jié)省很多 CPU 和內(nèi)存資源,這樣就要求咱們掌握一些常用命令,比如創(chuàng)建文件,切換目錄,復(fù)制和移動(dòng)文件,顯示文件列表等。另外訪問服務(wù)器常用的工具是 SSH 和 FTP,咱們需要通過這幾個(gè)工具來從自己的電腦連接到遠(yuǎn)程的服務(wù)器,然后安裝服務(wù)器程序和上傳網(wǎng)站程序。
書籍:鳥哥的 Linux 私房菜 基礎(chǔ)學(xué)習(xí)篇(第 4 版)
#服務(wù)器程序
常用的服務(wù)器程序有 apache、nginx,它們都是基于 HTTP 協(xié)議的,有了服務(wù)器程序,網(wǎng)站文件比如 html 頁面才能發(fā)送到用戶的瀏覽器上。
Nginx 中文文檔
apache 中文文檔
#HTTP 協(xié)議
協(xié)議好比如說醫(yī)生開藥方,寫的龍飛鳳舞,但是藥房藥師居然都看得懂~這個(gè)可以說他們都有固定套路來理解對(duì)方~那么在計(jì)算機(jī)領(lǐng)域,協(xié)議就是電腦之間用來交換數(shù)據(jù)的規(guī)則。HTTP 協(xié)議是用來在網(wǎng)絡(luò)上交換和傳輸數(shù)據(jù)的,比如說咱們的網(wǎng)站 html、css 和 js 就是通過這個(gè) http 協(xié)議來發(fā)送到瀏覽器的。
HTTP 概述
#進(jìn)階技能
?
上邊核心技能都掌握了的話,你就已經(jīng)超過一半的前端工程師了,接下來就是成長(zhǎng)為更高級(jí)一些的前端工程師,這里的目的是除了理解一些高級(jí)的概念之外,還要提高開發(fā)效率,也就是用到所謂的框架。
#響應(yīng)式布局
現(xiàn)在手機(jī)和平板差不多要比電腦都流行了,所以一個(gè)網(wǎng)站要適應(yīng)不同尺寸的屏幕,有這種特性的網(wǎng)站就叫做響應(yīng)式網(wǎng)站。實(shí)現(xiàn)響應(yīng)式主要就是通過 css 的?media query?針對(duì)不同的屏幕寬度,編寫不同的 CSS 樣式。
響應(yīng)式 Web 設(shè)計(jì)
#兼容性調(diào)整
網(wǎng)站需要在不同的操作系統(tǒng)和瀏覽器下都要保持一致。對(duì)于 CSS,可以使用 css hack 來對(duì)不同的瀏覽器加載不同的樣式。 對(duì)于 JavaScript,則可以使用 Babel 等轉(zhuǎn)化工具,把新的 JS 語法轉(zhuǎn)換成舊的,或者使用 polyfill 加上瀏覽器不支持的語法。
跨瀏覽器測(cè)試介紹
#UI 框架
UI 框架提供了頁面的基本 UI 樣式和布局系統(tǒng),比如按鈕、對(duì)話框、輪播圖,省了自己去開發(fā),常用的有 Boostrap, Semantic UI, Tailwind CSS。
Bootstrap
Semantic UI
Tailwind CSS
#SEO
SEO 全稱是 Search Engine Optimization,搜索引擎優(yōu)化。咱們常見的百度、谷歌這些搜索引擎會(huì)定期爬取線上的網(wǎng)站內(nèi)容,然后進(jìn)行收錄,網(wǎng)站內(nèi)容質(zhì)量?jī)?yōu)秀、結(jié)構(gòu)良好、訪問量大的還會(huì)排名比較靠前。為了給自己的網(wǎng)站增加曝光量,這就需要針對(duì)搜索引擎給咱們的網(wǎng)站添加一些內(nèi)容,比如關(guān)鍵字。
如何帶著 SEO 的思維將 MDN 的 Web 文檔寫的更符合搜索引擎展現(xiàn)
SEO 基礎(chǔ)知識(shí)教程
#Node.js、npm / yarn
因?yàn)?Node.js 的出現(xiàn),JavaScript 的開發(fā)可以脫離瀏覽器了,這樣就產(chǎn)生了好多借助 Node.js 來寫前端代碼的方式,然后用相應(yīng)的打包工具去打包成瀏覽器可用的代碼。這樣的好處是,咱們可以充分利用 node.js 的包管理工具來方便開發(fā),比如使用 npm 或者 yarn 管理項(xiàng)目的依賴。
Node.js
npm
yarn
書籍:Node.js 實(shí)戰(zhàn) 第 2 版
#CSS 預(yù)編譯
咱們?cè)趯?CSS 的時(shí)候可能一段代碼要重復(fù)好多次,寫一連串的選擇器,重復(fù)的屬性組合等等。這時(shí) CSS 預(yù)編譯工具就派上用場(chǎng)了,比如 SASS、LESS,它們支持 CSS 選擇器嵌套、定義變量、Mixins、函數(shù)、繼承等等。
SASS
LESS
#自動(dòng)化工具
自動(dòng)化工具有 grunt、gulp 等,可以監(jiān)控文件變動(dòng),或者做一些自動(dòng)化操作,比如編譯 SASS 或 LESS 的代碼為 CSS 等。
gulp
grunt
#React, Vue, Angular
這里就不得不提當(dāng)下十分熱門的前端開發(fā)框架了,React、Vue、Angular 三大件。它們都提供組件化開發(fā)的方式,這就讓前端開發(fā)模式發(fā)生了巨大的變化,以往以頁面為核心現(xiàn)在轉(zhuǎn)為了以組件為核心,有了這些組件可以方便的在不頁面進(jìn)行復(fù)用。另外基于狀態(tài)的數(shù)據(jù)管理,也讓改變組件狀態(tài)變得十分簡(jiǎn)單。這三個(gè)框架可以都學(xué),但是工作中基本上只會(huì)用到一個(gè),深入一個(gè)就可以了。至于它們的 UI 框架也可以根據(jù)工作的需要去學(xué)習(xí)比如 ant design、element UI 等。
React
Vue
Angular
Ant Design
Element UI
#模塊化 CSS
因?yàn)?React 等組件化工程的出現(xiàn),CSS 分散在不同的組件中,很容易因?yàn)槊麤_突而導(dǎo)致樣式被覆蓋,模塊化的 CSS 開發(fā)方式通過使用 css modules, 或者 styled-components (css-in-js 方式) 工具能很好的避免這些問題,它們也提供了其它類似 SASS/LESS 的功能。
CSS Modules
styled-components
#工程化工具
所謂工程化的工具,也就是打包工具,前端項(xiàng)目的各種 JS、SASS 源代碼可能分散的不同的地方,利用打包工具,比如 webpack、parcel,可以把它們打包成一個(gè)單一的 js 和 css 文件,它們支持按需打包,用到的代碼才會(huì)打包到最終產(chǎn)品上,沒用到的則不會(huì)。另外圖片等靜態(tài)資源也可以指定規(guī)則進(jìn)行打包。
webpack
parcel
#測(cè)試工具
沒有人想要不健壯的代碼,在改動(dòng)一個(gè)地方之后引起全局崩塌~,咱們寫好的組件需要進(jìn)行詳盡的測(cè)試才能確保不出問題,另外也方便咱們工程師節(jié)省時(shí)間,因?yàn)橹灰砑拥男鹿δ鼙WC測(cè)試結(jié)果還是正常,那么就不需要再人工去測(cè)試了。常用的 UI 測(cè)試工具有 jest, enzyme 等等。
Jest
Enzyme
Puppeteer
#高級(jí)技能
?
在把編寫網(wǎng)頁的技能掌握熟練以后,就要從多端開始拓展自己的技能了,另外還要深入已經(jīng)掌握的技能。
#TypeScript
TypeScript 是微軟編寫的一款帶類型的 JavaScript 語言,它的代碼可以編譯成普通的 JavaScript,但是編寫的時(shí)候支持強(qiáng)類型,并且支持完全面向?qū)ο蟮男问健K暮锰幵谟趲в辛祟愋椭?#xff0c;代碼更容易維護(hù),適合大型項(xiàng)目的開發(fā)。
TypeScript
#移動(dòng)開發(fā)
移動(dòng)開發(fā)包括移動(dòng)的頁面 H5 開發(fā)、小程序和移動(dòng) APP 開發(fā),好在這些有統(tǒng)一的開發(fā)平臺(tái),使用 React 或者 Vue 就可以進(jìn)行一次開發(fā),多平臺(tái)使用。React 生態(tài)的有開發(fā)移動(dòng) APP 的 React Native,開發(fā)多端平臺(tái)的 taro。 Vue 有多端開發(fā)的 uni-app。
React Native
Taro
Uni-App
#桌面開發(fā)
桌面應(yīng)用到現(xiàn)在還是有用武之地的,比如音樂軟件,聊天軟件,寫作軟件等等,這些也可以用前端技術(shù)開發(fā),具體的工具有 eletron、proton native 等等。
Electron
Proton Native
#靜態(tài)網(wǎng)站生成工具
靜態(tài)網(wǎng)站因?yàn)槭羌?html、css 和 JavaScript 網(wǎng)站,所以擁有最快的速度、對(duì) SEO 搜索引擎優(yōu)化友好,最適合用于數(shù)據(jù)不常變動(dòng)的展示、博客類的網(wǎng)站的搭建,常用的工具有 hexo, gatsby, docusaurus 等。
Hexo
Gatsby
Docusaurus
#SSR(服務(wù)端渲染)
如果使用 React、Vue 等前端框架開發(fā)網(wǎng)站,那么最終的頁面源代碼是沒有 html 的,因?yàn)樗鼈兪怯?JavaScript 去動(dòng)態(tài)生成 html 代碼,這樣對(duì) SEO 很不利,不過有了 serer side rendering,服務(wù)端渲染技術(shù),就可以解決這個(gè)問題,它是把 JavaScript 生成好 HTML 之后,再把頁面發(fā)送給瀏覽器。常用的有 react 系的 next.js,vue 系的 nuxt.js。
Next.js
Nuxt.js
#GraphQL
GraphQL 是一種查詢語言,跟普通的 restful 結(jié)構(gòu)不一樣,它是按照類型來組織數(shù)據(jù)的,不同的類型之間也會(huì)有對(duì)應(yīng)關(guān)系,就像數(shù)據(jù)一樣,前端開發(fā)者根據(jù)自己的需要編寫 graphql 語句來按需查詢想要的數(shù)據(jù),它的這種模式非常適合 React 這種項(xiàng)目結(jié)構(gòu)的開發(fā)。
GraphQL
Apollo
Relay
#性能優(yōu)化
性能優(yōu)化的概念比較廣泛,而且根據(jù)應(yīng)用的用戶量、用戶類別而不同。總體來說就是提高頁面首次加載的時(shí)間、動(dòng)畫執(zhí)行的效率、事件響應(yīng)的效率。這些可以通過優(yōu)化代碼結(jié)構(gòu)、文件大小、DNS 緩存、lazy loading 等來實(shí)現(xiàn)。
Web 性能
書籍:Web 性能權(quán)威指南
#安全
安全也是一個(gè)寬泛的概念,要了解 CORS(跨域資源共享), XSS(跨站腳本攻擊), CSRF(跨站請(qǐng)求偽造) 等常見安全問題,也要了解 HTTPS 等安全協(xié)議,要盡量以周全的形式考慮,不要相信任何用戶的輸入,嚴(yán)格檢查需要接收用戶輸入的地方。
Web 安全
書籍:Web 安全測(cè)試
#工作與團(tuán)隊(duì)技能
工作與團(tuán)隊(duì)技能是在工作中所必備的,無論是初級(jí)還是高級(jí)前端工程師,這些只要在工作遇到了,就都需要掌握。
#Git
Git 是一個(gè)分布式的代碼協(xié)作工具,幾乎所有的公司都在用。Github 是 git 的一個(gè)遠(yuǎn)程倉庫,咱們可以把代碼發(fā)布到 github 上,既可以作為公開的向全世界展示自己的代碼、進(jìn)行合作,也可以作為私有的只限自己或者公司內(nèi)部使用。
Git
Github
書籍:精通 Git 第 2 版
#Docker
Docker 是一種新的虛擬化技術(shù),介于虛擬機(jī)和操作系統(tǒng)之間,它所用的資源少,并且能自動(dòng)化管理鏡像的運(yùn)行環(huán)境和集群。因?yàn)榍昂蠖碎_發(fā)的分離的方式,大型的前端應(yīng)用也會(huì)部署到 Docker 上。
Docker
#CI
CI,持續(xù)集成,是一個(gè)自動(dòng)化的部署過程,開發(fā)人員只需要改動(dòng)代碼,提交到 git 倉庫,CI 系統(tǒng)會(huì)抓取代碼進(jìn)行打包部署并發(fā)布,節(jié)省了人工運(yùn)維的時(shí)間。
Jenkins
#ESLint 和 Prettier
代碼合作經(jīng)常會(huì)有風(fēng)格和規(guī)范不統(tǒng)一的情況。ESLint 除了可以檢查語法錯(cuò)誤外,還可以定義開發(fā)規(guī)范,比如縮進(jìn)字符的數(shù)量、命名方式等,而 prettier 則可以根據(jù)一些規(guī)范自動(dòng)格式化代碼。
EsLint
#最新技術(shù)
#WebAssembly
Web Assembly 是瀏覽器新支持的編程語言,用于輔助 JavaScript。確切的說,它不是一個(gè)編程語言,咱們可以用它的編譯器編譯其它語言,用來編寫更強(qiáng)大的功能,它目前支持 c++和 rust
Web Assembly
#Web Components
Web Components 是類似 React、Vue 開發(fā)的方式,但是是 JS 原生支持的方式,不再需要依賴額外的庫。它的核心概念有 Custom elements(自定義元素),Shadow DOM(影子 DOM),HTML templates(HTML 模板)。
Web Components
#最佳實(shí)踐
在前端開發(fā)過程中有一些最佳實(shí)踐需要了解,比如 JavaScript 的設(shè)計(jì)模式、組件設(shè)計(jì)原則、代碼結(jié)構(gòu)等。
JavaScript 設(shè)計(jì)模式
#持續(xù)進(jìn)步
在掌握了上邊所有技能之后~咱們等級(jí)就算滿級(jí)了,現(xiàn)在就是真正的開始了,要不斷精進(jìn)自己的技能。前端技術(shù)的發(fā)展相比其它技術(shù)要快的多,咱們要時(shí)常關(guān)注一些前端新聞還有業(yè)界大佬的博客或微博,自己主動(dòng)去搜索一些新的前端庫或者設(shè)計(jì)模式,然后應(yīng)用到工作中去,這樣才不至于落后。另外,因?yàn)楹枚嗉夹g(shù)都是外國(guó)人寫的,所以要想得到第一手且最準(zhǔn)確的消息,一定要把英語學(xué)好,一些包和工具的官方文檔就算是靠著翻譯也要把它們看懂,相信我,過不了幾天,你會(huì)發(fā)現(xiàn)需要查的詞越來越少,閱讀速度也越來越快。
總結(jié)
以上是生活随笔為你收集整理的2020年最新前端学习路线的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 经济数据分析
- 下一篇: 中台创业潮起,你中台创业了吗?