[[379868]]

如果你想成為一名專業(yè)的前端工程師，那么你需要了解要學(xué)什么，學(xué)到什么程度，以及如何有效地學(xué)習(xí)。大學(xué)里沒有正規(guī)的前端技術(shù)課程，普遍缺少比較權(quán)威的渠道來系統(tǒng)地了解和學(xué)習(xí)當(dāng)前最實用、最前沿的前端技術(shù)。作為一個入行許久的前端工程師，我提煉了4個大家普遍關(guān)心的話題一一探討，希望對想要成為專業(yè)前端工程師的同學(xué)們有所幫助：

• 從事前端開發(fā)有前途嗎?
• 畢業(yè)之后去大公司，還是去“小而美”的公司?
• 個人很喜歡前端開發(fā)，掌握到什么程度才能進(jìn)“大廠”?
• 個人有一些前端開發(fā)經(jīng)驗，怎么提高自己?

一、前端開發(fā)的現(xiàn)況和前景

回顧編程語言的發(fā)展史，我們可以看到很多曾經(jīng)流行一時的編程語言都消亡了，或者在慢慢淡出。同時，2009年以后又有一批新興語言涌現(xiàn)。我們注意到一些歷史悠久的語言生命力特別頑強(qiáng)，像C / C++、Java。90年初大眾互聯(lián)網(wǎng)誕生，Web技術(shù)此時開始興起，Python / PHP / Java都是這個時期出現(xiàn)的。其中HTML / JavaScript / CSS也在那個時代相繼誕生。語言的興衰和當(dāng)時的時代背景緊密相關(guān)。前端技術(shù)經(jīng)歷了近三十年時代變遷，JavaScript依然是世界上最流行的語言，JavaScript開源社區(qū)也是最活躍的，我們可以看到Github Top20的項目里，多一半都是前端項目。今天的前端技術(shù)似乎是無所不能，無孔不入的，在各個領(lǐng)域都有應(yīng)用的可能性。

前端行業(yè)的發(fā)展實際上跟互聯(lián)網(wǎng)的發(fā)展和時代的需要是密不可分的。通過下圖可以看到有三個明顯的轉(zhuǎn)折點：

第一個轉(zhuǎn)折點是在2004年左右，2004年Gmail發(fā)布，這個產(chǎn)品意義非凡，Gmail可以說是最早的單頁應(yīng)用，大規(guī)模應(yīng)用Ajax這項技術(shù)，在瀏覽器里能夠?qū)崿F(xiàn)和桌面軟件一樣的交互體驗，這在當(dāng)時掀起了一場交互體驗的革命。這是一次真正意義的突變(在此之前，我們經(jīng)常說前端開發(fā)80%是排版問題，今天80%是工程開發(fā)問題)，由此，JavaScript開始快速發(fā)展起來。正如Atwood定律所言“任何能用JavaScript實現(xiàn)的應(yīng)用，最終都會用JavaScript實現(xiàn)”。

第二個轉(zhuǎn)折點在2010年左右，Node的出現(xiàn)沒有顛覆服務(wù)端開發(fā)方式，但是徹底升級了前端的工具鏈，從此前端的工程化體系開始了日新月異的發(fā)展。隨之NPM提供的開源包管理服務(wù)，激活了全球前端社區(qū)的活躍度。

到了2013年左右，移動時代來臨，商業(yè)戰(zhàn)場轉(zhuǎn)向移動端。傳統(tǒng)前端開發(fā)不得不說進(jìn)入低谷。但是很快，第三次轉(zhuǎn)折來了，服務(wù)和產(chǎn)品的互聯(lián)互通，跟原生應(yīng)用的封閉性是矛盾的。于是，衍生出各種混合開發(fā)方案，各種跨端技術(shù)。同時小程序的出現(xiàn)，為前端開辟出一塊新戰(zhàn)場，前端開發(fā)再次煥發(fā)活力。到了2017年左右，云時代正式拉來帷幕，生產(chǎn)和辦公方式加速數(shù)字化轉(zhuǎn)型，toB業(yè)務(wù)開始火了，傳統(tǒng)的前端技術(shù)又成為不二之選。因此，我們可以看到現(xiàn)在的人才市場對前端工程師的需求非常大，但是，資深前端人才一直都是稀缺資源。

二、前景：前端技術(shù)的價值

技術(shù)的價值決定了它的生命力。前端技術(shù)的價值就是“界面”的價值，我相信所有“界面”最終都會用前端技術(shù)實現(xiàn)。連接消費者和互聯(lián)網(wǎng)的，是數(shù)字化生活的“界面”，連接生產(chǎn)者(企業(yè)、機(jī)構(gòu)、自媒體)到互聯(lián)網(wǎng)的，是數(shù)字化生產(chǎn)方式的“界面”。今天大家也能感受到，這些“界面”變得越來越多元化、智能化、而且無所不在。

舉個例子，我們看60年代開始，火箭的控制臺都是物理界面，到最新的“龍飛船”的控制臺完全以數(shù)字化為主體的界面，據(jù)披露這個界面就是用JavaScript開發(fā)的。我相信，未來所有物理界面都會進(jìn)化為數(shù)字化界面。

前端開發(fā)簡單的說是實現(xiàn)產(chǎn)品的表現(xiàn)和交互。今天不同類型的產(chǎn)品的表現(xiàn)形式和交互形式非常豐富，早已不是單一的圖文、視頻和一些鼠標(biāo)鍵盤的交互操作。在業(yè)務(wù)類型上，有toC、toB、toG，面向的客群不同，前端技術(shù)應(yīng)用的方式方法有很大差異。有人擔(dān)心前端行業(yè)存在近30年了，會不會喪失創(chuàng)新性?綜上所述，顯然不會。未來已至，需要更多新人進(jìn)入到這個行業(yè)，這個行業(yè)需要更多的創(chuàng)新力。

總結(jié)一下，前端的發(fā)展趨勢正在從“單端向多端發(fā)展”、“界面正在從GUI向NUI演進(jìn)”、VR / AR、數(shù)字孿生等相關(guān)技術(shù)越來越成熟，這些在阿里的業(yè)務(wù)里都有落地。開發(fā)方式上也正在從傳統(tǒng)的B/S模式，向云+端的云原生模式發(fā)展。同學(xué)們目前正處在這樣一個全新的、充滿創(chuàng)新活力的時代。

三、職業(yè)選擇

第二個問題是關(guān)于職業(yè)選擇的問題。每個人都會關(guān)心專業(yè)成長的問題，個人成長離不開環(huán)境因素。去“大廠”、“小而美”的公司，還是去創(chuàng)業(yè)?我的建議是：如果心懷明確的夢想就去“小而美”的公司或者去創(chuàng)業(yè)，如果想成為一名專業(yè)的技術(shù)人就要去大公司。我個人建議人生之路很長，不要那么早就到達(dá)終態(tài)。剛畢業(yè)，先去公司好好歷煉一番，再出來創(chuàng)業(yè)。所謂的“專業(yè)性”，我們會看重這些方面：

• 解決的問題域要廣泛：有豐富的業(yè)務(wù)場景的實踐經(jīng)驗，解決問題的廣泛性。
• 足夠大的難度和挑戰(zhàn)：好比“修車”和“修飛機(jī)”，同一套技術(shù)棧，應(yīng)用的深度，項目規(guī)模的大小，玩法和挑戰(zhàn)都非常不一樣。
• 大軍團(tuán)作戰(zhàn)的經(jīng)驗：好比“游擊隊”和“正規(guī)軍”，在戰(zhàn)略戰(zhàn)術(shù)的認(rèn)知上、管理規(guī)劃、專業(yè)角色協(xié)同、開發(fā)流程、平臺思路、綜合能力上能帶來豐富的感受和經(jīng)驗。
• 專業(yè)的開發(fā)素養(yǎng)和特質(zhì)：小公司要求做完，大公司要求做好。高標(biāo)準(zhǔn)嚴(yán)要求下，有利于形成專業(yè)的開發(fā)素養(yǎng)。
• 具備先天的研發(fā)儲備：打持久戰(zhàn)，就必須投人投時間自研核心能力、技術(shù)儲備豐富。

“這個我會”、“那個我也懂”是遠(yuǎn)遠(yuǎn)不夠的，前端工程師的成長需要一定時間跨度的經(jīng)驗積淀。正如Bob Dylan的一句歌詞：“How many roads must a man walk down，Before you call him a man”，翻譯過來就是：一個前端工程師要踩過多少坑，才能稱得上是一個專業(yè)的前端工程師。

四、前端工程師的人才畫像

第三個問題，掌握到什么程度才能進(jìn)大廠?大廠對前端工程師的需求量很大，但校招通過率實際上并不高，市場供需明顯不對等。

目前現(xiàn)狀是所有人都是從自學(xué)開始，個人學(xué)的和公司需要的存在一定差距。學(xué)習(xí)上不夠系統(tǒng)，平時看看書，逛逛社區(qū)、隨機(jī)看一些文章，很容易被誤導(dǎo)。有一些實習(xí)經(jīng)驗，但接觸的比較有限，不清楚跟專業(yè)要求有什么差距。這樣帶來的問題是：大家普遍是碎片式的學(xué)習(xí)，不成體系，對前端技術(shù)的全景、發(fā)展趨勢不是很清楚。在阿里我們經(jīng)常說“體感”，體感就是有切身的感受和理解，唯有做過，反復(fù)做，踩過很多坑，才可能建立這種體感 。前端發(fā)展很快，很多知識過時的也很快。所以，不能停留在表面的用法上。前端技術(shù)有變化快的部分，也有相對穩(wěn)定的部分，所以，前端技術(shù)的學(xué)習(xí)方式應(yīng)該是多線程的、多維度的，這個后面會講到。

如圖所示，我們對前端候選人主要看三個變量：基礎(chǔ)程度(基礎(chǔ)怎么樣)、認(rèn)知程度(認(rèn)知是否全面、是否到位)、實踐程度(實際用過什么、做過什么)。

基礎(chǔ)方面：首先就是HTML / CSS / JavaScript / Web API要系統(tǒng)的學(xué)，要看好書(評價高的書，這里列了兩本)，要養(yǎng)成看權(quán)威文檔(MDN、官方文檔)的習(xí)慣。輔助看一些文章。

認(rèn)知方面：要有全景的了解(先有總體認(rèn)知，知道關(guān)注什么、關(guān)注技術(shù)的發(fā)展趨勢)、各種領(lǐng)域知識不要求多深，但要有準(zhǔn)確的理解。我建議大家多關(guān)注開源項目，主流的框架和流行的庫。關(guān)注的方式就是訂閱它們的更新，多看它們的源碼，在Github上圍觀別人的討論，能參與當(dāng)然更好。個人知識結(jié)構(gòu)要豐富，網(wǎng)絡(luò)、算法、產(chǎn)品、設(shè)計、可視化、工具 / 插件等等都要有所了解，人的視野在哪兒邊界就在哪兒。培養(yǎng)自己總結(jié)、歸納的習(xí)慣，平時應(yīng)該多寫寫，總結(jié)就是一種把知識結(jié)構(gòu)化的過程。

實踐方面：像實習(xí)項目、學(xué)校的項目、學(xué)習(xí)過程中多寫demo、最好有一些個人項目，總之要尋找各種動手實踐的機(jī)會。

另一個維度是潛質(zhì)方面，或者說個人特質(zhì)。我們非?？粗睾蜻x人的潛質(zhì)。遇到問題能否追根溯源，刨根問底，探求問題的本質(zhì)。對新 / 奇 / 特的事物，是否有足夠的好奇心和求知欲，愿意去嘗試，尤其對產(chǎn)品設(shè)計有自己的審美和品味。前端工程師的價值就在于“創(chuàng)造”，是否愿意動手實踐，用代碼還原你的想法，這一特質(zhì)非常重要。面試聊的很好，一筆試就懵了，寫不出來，這個肯定不行。在校招中，我們其實更看重人的潛質(zhì)，能力方面更看重基礎(chǔ)。

五、多線程學(xué)習(xí)路徑

我們看看第四個問題，如何持續(xù)提高個人的技術(shù)水平?在校招面試中，我發(fā)現(xiàn)大部分同學(xué)都零零散散的學(xué)了一些前端技術(shù)，也能做出一些東西，問題是止步不前了，不知道如何深入地學(xué)下去。公司和學(xué)校不同，學(xué)校是學(xué)習(xí)的地方，公司是工作的地方。我們希望同學(xué)們在進(jìn)入公司之前，就能建立好的學(xué)習(xí)習(xí)慣和有效的學(xué)習(xí)方法，這樣，進(jìn)到一個工作環(huán)境中，利用具體的業(yè)務(wù)場景，才能夠快速的成長起來。

前端技術(shù)的學(xué)習(xí)有兩條路徑：一個是“多線程”的學(xué)習(xí)路徑，一個是深入學(xué)習(xí)的路徑。什么是“多線程”的學(xué)習(xí)路徑?

第一個線程，是基礎(chǔ)知識的學(xué)習(xí)。這個是學(xué)習(xí)其它技術(shù)的基礎(chǔ)?；A(chǔ)知識需要系統(tǒng)的學(xué)，基礎(chǔ)包括JavaScript / HTML / CSS / 原生 Web API的學(xué)習(xí)。學(xué)過之后還不能直接做項目，你還需要掌握一些框架和工具才能解決問題，但如果要更好的解決問題、組合方案、調(diào)試問題，就必須對語言和語言特性有深入的理解。

第二個線程，領(lǐng)域知識的學(xué)習(xí)。前面也說過，要不斷豐富自己的知識結(jié)構(gòu)。特定的崗位需要特定的領(lǐng)域知識。會有一些通用性的知識，像軟件工程 / 數(shù)據(jù) & 算法 / 網(wǎng)絡(luò) / 可視化 / 安全 / 交互設(shè)計，這些知識和理論不要求有多深的學(xué)習(xí)，但要有一定的認(rèn)知。

第三個線程，工程實踐經(jīng)驗。重點是使用的經(jīng)驗。像開發(fā)工具 / 包管理 / 構(gòu)建工具 / 主流的框架和庫 / 代碼版本管理 / 調(diào)試和測試相關(guān)工具等等，這些工具層面的東西，雖然比較多，很多達(dá)到會用的程度就可以。前端工具有“喜新厭舊”的特點，變化很快，要不斷吸收最新的東西。所謂“善假于物”，善于使用開源的庫和工具，能夠幫助我們快速的解決問題。但是，如果不了解背后的原理、技術(shù)點，僅僅停留在會用的層面，只能是生搬硬套，很難有進(jìn)一步提高。很多人說前端發(fā)展太快了，剛學(xué)會一個東西，過兩年就被淘汰了，說的其實就是工具層面的東西，越基礎(chǔ)的東西相對越穩(wěn)定，也就越值得投入精力去學(xué)。工程方面，像React這種基礎(chǔ)庫相對穩(wěn)定，值得深入的去學(xué)，后面我會講怎么深入去學(xué)。實際上，任何新東西都有其發(fā)展的脈絡(luò)，如果你具備一定基礎(chǔ)，了解背后的原理，你不僅能很快掌握它，還能完善它。

要成為一名專業(yè)的前端工程師，需要多線程、多維度的學(xué)習(xí)，包括工作之后，仍然需要持續(xù)去學(xué)習(xí)。對同學(xué)們起步來說，基礎(chǔ)要牢固，工程方面有一定的使用經(jīng)驗，知識結(jié)構(gòu)要盡可能廣泛和豐富。

六 深度學(xué)習(xí)路徑

剛才說的是橫向上的，我們再看看縱向上如何深入學(xué)習(xí)。深入就是從Know What到Know How再到Know Why的過程。對應(yīng)到下面的鏈路上，Know What就是“聽過”、“概念清晰”，并且“知不同”。Know How就是“用過”、“理解用法”、“踩過坑”(沒踩坑的，基本上用的很淺)。Know Why就是“理解原理”、“演繹”，就是達(dá)到靈活運用的程度。

前面提到的三個維度：

• 基礎(chǔ)知識：要到“理解原理”的程度
• 工程實踐：尤其是前端主框架的學(xué)習(xí)，至少要到“理解用法”的程度
• 領(lǐng)域知識：要到“概念清晰”的程度

我們以React為例：

“聽過”是指我知道它是什么，一個UI開發(fā)的庫。概念清晰，我知道它的所有相關(guān)概念，它是一個聲明式的、基于組件架構(gòu)的、可預(yù)測的、響應(yīng)式的UI庫。那么什么是聲明式、什么是組件架構(gòu)，什么是響應(yīng)式，都需要知道。組件狀態(tài)是什么，響應(yīng)式編程是什么，VDOM、JSX分別是什么，這些都是它的相關(guān)概念，順藤摸瓜，一路要摸下去。

“用過”指有沒有做過一些比較復(fù)雜的、有挑戰(zhàn)性的項目，整個React技術(shù)棧里，用過哪些東西。理解用法，比如理解組件化的特點、組合方式、屬性傳遞的各種方式、類組件和函數(shù)組件的區(qū)別，為什么現(xiàn)在提倡用函數(shù)組件、受控和非受控組件用在什么場景下等等。“踩坑”，踩的坑越多，說明用的越深，比如版本差異的問題、re-render的性能問題、Hooks依賴的問題，有沒有真實的體感。理解原理，比如說是否理解Hooks的運行機(jī)制、是否理解React的并發(fā)模式、是否理解虛擬DOM的基本原理、React協(xié)調(diào)器的基本原理等等。

七、有效學(xué)習(xí)的方式

前面說的是學(xué)什么，以及要學(xué)到什么程度。接下來我們說說有效學(xué)習(xí)的方式。有效學(xué)習(xí)一定是在動手過程中學(xué)習(xí)，所有知識我都懂，但不一定能很好地解決問題(和人生一樣)。解決問題的能力是一種綜合能力，如圖所示：

解決問題是一個閉環(huán)。當(dāng)我們真正面對需求，面對問題時，我們要培養(yǎng)自己分析問題的能力，找到背后的需求點、技術(shù)點，再去調(diào)研方案，否則你都不知道搜什么。探索方案的過程建議多寫demo，把復(fù)合的問題拆成單一的點一一攻破(微積分的思路)。然后才是正式的編碼，解決問題。問題解決之后，還要歸納總結(jié)，這樣才能把實踐變成有效的經(jīng)驗。最后還沒完，還要繼續(xù)探索最優(yōu)解，有沒有更好的方案、代碼怎么寫可維護(hù)性更高、怎么寫擴(kuò)展更靈活。探索最優(yōu)解相當(dāng)于健身中，達(dá)到極限閾值時，突破的那一下。

我經(jīng)常聽到一些抱怨的聲音，“沒有好的實踐機(jī)會”、“工作中沒有接觸過”、“現(xiàn)在的工作沒挑戰(zhàn)，學(xué)不到東西”…….這些都是借囗，解決問題正是從善于發(fā)現(xiàn)和定義問題開始，平時當(dāng)我們學(xué)習(xí)一個技術(shù)點時，應(yīng)該先學(xué)會給自己出題，這就是定義問題。問題搞的越通透，解法越簡單明了。提高自己首先是提高自我要求，不滿足于現(xiàn)狀，從追求代碼質(zhì)量開始，到追求最優(yōu)解。

最后我們小結(jié)一下今天的分享。首先我們談到了“選擇”，講了前端技術(shù)的發(fā)展歷程和一些展望，前端行業(yè)的未來非常值得期待。大廠在培養(yǎng)專業(yè)人才上的優(yōu)勢，阿里有非常豐富的業(yè)務(wù)場景和技術(shù)儲備，如果愿意學(xué)，愿意接受挑戰(zhàn)，這里有很多機(jī)會。接下來，又講了前端工程師在能力和潛質(zhì)上的要求。最后重點探討了如何學(xué)習(xí)，講了兩條路徑：多線程的學(xué)習(xí)路徑和深入學(xué)習(xí)的路徑。