2020 最新整理前端學(xué)習(xí)規(guī)劃路線
作者丨練識
來源丨小鹿動畫學(xué)編程
原本想寫個更加標(biāo)題黨的：《2020年你為什么還在用10年前的思路學(xué)習(xí)前端？》
不過本文更多的還是想給大家?guī)硐乱粋€時代前端開發(fā)學(xué)習(xí)和進(jìn)階的思考，而不是純標(biāo)題黨。就像今年前端領(lǐng)域發(fā)生了很多事情，卻沒有了前幾年的熱鬧非凡的感覺：
- Angular & React & Vue三大框架穩(wěn)定發(fā)展，不再有刻意吸引眼球的無意義爭論；
- ES6普及和瀏覽器對標(biāo)準(zhǔn)支持的增強，各種語言和Web的基礎(chǔ)知識逐漸成為合格前端的標(biāo)配；
- Hybrid和Native并行演進(jìn)，工程化的前端架構(gòu)設(shè)計逐步在各個項目中普及；
- 甚至涉及后端的Node、Ngnix等，也成為技術(shù)人員必知必會的領(lǐng)域知識。
如今也甚少聽到前后端分離、前端工程化等推廣，原因無非是大型前端項目早已普及工程化的前端架構(gòu)，而且更多的前端大牛們都已經(jīng)在實踐大前端體系化的架構(gòu)設(shè)計。
可以預(yù)想，前端開發(fā)已經(jīng)開始像后端開發(fā)一樣，在要求語言和技術(shù)基礎(chǔ)上，對規(guī)模化的實踐和企業(yè)級的流程成為更重要的需求。
2019年縮減HC、裁員不絕于耳，大家都是人心惶惶，年前如此。想必馬上到來的2020年又是一場更為慘烈的江湖廝殺。各大前端社區(qū)里，面試題整理的文章層出不窮，知識整理的內(nèi)容每天都在刷屏。準(zhǔn)備面試開始變成了重復(fù)性的刷題背題，然而每次面試前都要現(xiàn)找面試題，而且答案也不是現(xiàn)成的，這樣重復(fù)的事情在不知不覺中浪費你很多時間。
著名學(xué)者文森特·賴安·拉吉羅的《思考的藝術(shù)》一書中有這樣的總結(jié)：
人的思維過程是創(chuàng)造性思維和批判性思維的融合，前者強調(diào)的是思維的高大寬深，后者強調(diào)的是穩(wěn)準(zhǔn)狠快。
在這樣的方式指導(dǎo)下，就可以分步來重構(gòu)一套更值得借鑒的學(xué)習(xí)路徑。
Step 1 —— 基礎(chǔ)
學(xué)習(xí)固然有技巧，但絕不是走捷徑，所謂的基礎(chǔ)也不是背下來整個JS文檔，從HTML、CSS到Vue、React一個都不缺，跨平臺PC、移動端、小程序全都覆蓋。越是吹噓全面的，反而更容易徘徊在基礎(chǔ)薄弱的邊緣。
基礎(chǔ)扎實，需要的是對前端相關(guān)領(lǐng)域都有一些基礎(chǔ)性的了解，了解各項技術(shù)的應(yīng)用場景和優(yōu)劣選擇。對于技術(shù)人員來說，理解***前端UI層、通信層、服務(wù)層和存儲層***的層次結(jié)構(gòu)和關(guān)系，才是最初應(yīng)該掌握的基礎(chǔ)。
前端開發(fā)如今已經(jīng)進(jìn)入工程化的階段，踐行軟件工程在前端領(lǐng)域的應(yīng)用，就需要任何一個專業(yè)開發(fā)人員理解工程領(lǐng)域的各個階段應(yīng)用。
Step 2 —— 體系
很多前端課程，都強調(diào)知識面的廣度與深度并行，真正去學(xué)習(xí)的時候就發(fā)現(xiàn)是單純的灌輸式學(xué)習(xí)，反正全都給你講了，聽完了就號稱有深度了……
其實在日常工作中，我們講究的是開發(fā)效率，很少會去刻意記下一些細(xì)節(jié)和概念，腦海中都是一些分散的知識點，無法系統(tǒng)性地關(guān)聯(lián)成網(wǎng)，一直處于似曾相識的狀態(tài)。
前端項目基礎(chǔ)架構(gòu).png以如此的狀態(tài)，不論是面試還是遇到業(yè)務(wù)難題的解決，都是很難快速應(yīng)對的。其實面試就猶如考試，大家回想下高考之前所做的事，無非就是 知識點理解 和 體系化關(guān)聯(lián)記憶。能夠?qū)⒁呀?jīng)懂得的知識體系化，最直接的方式就是結(jié)合自身業(yè)務(wù)提出問題。舉個例子：
不論使用Vue還是React，總需要每天編寫很多業(yè)務(wù)組件，通過看官方文檔和官方教程，我們能夠知道組件化的思想是什么，能知道父子組件以及之間如何傳遞參數(shù)，能知道組件有生命周期，也能知道組件的數(shù)據(jù)流等等。
這些知識是框架設(shè)計者所提供的功能，為了能應(yīng)付各種場景方便使用所做了最簡化的抽象。在開發(fā)的過程中，從0開始就需要思考：
- 如何拆分出合適的組件粒度
- 如何編寫擴(kuò)展性、通用性強的組件
- 如何把握數(shù)據(jù)流向，畫好數(shù)據(jù)流向圖
- 如何在業(yè)務(wù)復(fù)雜后，對數(shù)據(jù)流正確的處理
- 如何解決功能沖突和異常
- ……
在這個結(jié)合自身業(yè)務(wù)思考的過程中，才能逐步提升技術(shù)思維層級。
Step 3 —— 產(chǎn)出
也許有人會問，剛剛到思考問題這一步，怎么直接就到「產(chǎn)出」了？很多問題（包括剛剛提到的組件化問題），我還沒有想明白，怎么去做產(chǎn)出？
其實就像幾年前我一直都堅持的一個論調(diào)：“互聯(lián)網(wǎng)上不缺垃圾！污染互聯(lián)網(wǎng)的人是在作惡！” 而經(jīng)過幾年的各種形式技術(shù)分享之后，反而開始積極推動隨時做技術(shù)產(chǎn)出這件事。因為之前的想法不無道理，但是實際情況是：
- 如果你不首先有足夠多的產(chǎn)出，得不到互聯(lián)網(wǎng)上足夠的反饋和批評，那你的產(chǎn)出的質(zhì)量如何才能提高呢？
- 不是精品的內(nèi)容其實也未必會污染到哪里，比如現(xiàn)在寫的這些文字，如果給它一個很清晰的標(biāo)題，放到我自己的名下合理的歸類，那么讀者很容易決定留下或是離開。
- 在所謂的「自我要求不高」的內(nèi)容創(chuàng)作時，思維更加容易自由馳騁，很多臨時的想法其實可能是很有意義的。
比如，兩年前阿里巴巴推行中臺戰(zhàn)略，對技術(shù)中臺還沒有太深入實踐的我，寫過一篇《我為什么說中臺是多此一舉？》的文章，很多讀者給了反饋，并且在和我的溝通中讀到一些樂趣和啟發(fā)。同時此文備案存下之后，日后對技術(shù)有了更高層面的理解，想要勸說大型項目思考技術(shù)中臺的優(yōu)勢的話，那這篇幼稚的文章就是極為重要的反面教材。
所以最近我在微信群、自己身邊的社群一直推動**「行動高于成果」**的活動。以這樣的態(tài)度去做主動學(xué)習(xí)，原本想要推廣自己對技術(shù)的一些思考，卻發(fā)現(xiàn)意外獲得了更多技術(shù)干貨。
將大家發(fā)布的內(nèi)容做個簡單整理，其實有很多可以隨手產(chǎn)出的知識點，比如：
- 業(yè)務(wù)思考：理解業(yè)務(wù)和公司的目標(biāo)，同時也要多思考業(yè)務(wù)，想著有沒有通過技術(shù)手段來提升業(yè)務(wù)價值，比如移動端的白屏?xí)r間減少，可以帶來很好的用戶體驗，提升用戶的留存率。
- 技術(shù)思考：思考業(yè)務(wù)開發(fā)中的一些痛點，如何用技術(shù)手段去優(yōu)化業(yè)務(wù)的開發(fā)流程，提升開發(fā)效率，比如為業(yè)務(wù)量身定制一款腳手架工具等。
- 優(yōu)化工作流程：不僅可以從熟悉的需求-開發(fā)-聯(lián)調(diào)-測試-上線的每個工作環(huán)節(jié)做出思考分析，還可以思考每個環(huán)節(jié)有沒有可以提升的點，特別是上線過程，比如能不能做到自動化、能不能做到小流量上線、能不能及時回滾代碼。
- ……
所以技術(shù)產(chǎn)出，把工作中遇到的一些問題的解決方案、學(xué)習(xí)的一些新技術(shù)，產(chǎn)出的一些技術(shù)項目總結(jié)下來，作為技術(shù)分享和輸出，這樣一是可以總結(jié)沉淀你的技術(shù)，二是可以讓大家能知道你做的東西，三是鍛煉自己的表述能力，這個能力在大公司的晉升述職中非常重要。
?推薦↓↓↓?
長
按
關(guān)
注
?【16個技術(shù)公眾號】都在這里！
涵蓋：程序員大咖、源碼共讀、程序員共讀、數(shù)據(jù)結(jié)構(gòu)與算法、黑客技術(shù)和網(wǎng)絡(luò)安全、大數(shù)據(jù)科技、編程前端、Java、Python、Web編程開發(fā)、Android、iOS開發(fā)、Linux、數(shù)據(jù)庫研發(fā)、幽默程序員等。
萬水千山總是情，點個 “在看” 行不行