前端工程師應(yīng)具備那些基本素質(zhì)

閑來(lái)無(wú)事，今天隨便聊聊前端工程師應(yīng)該具備哪些素質(zhì)，權(quán)當(dāng)博大家一笑。

前端工程師到底是工作很簡(jiǎn)單的“切圖仔”，還是包攬客戶端和中間層的“大前端”？招聘市場(chǎng)上有大量的公司對(duì)前端工程師求賢若渴；但同時(shí)求職市場(chǎng)上卻有大量的前端工程師在“求職若渴”。造成這種兩難局面的原因是用人單位與求職者對(duì)前端工程師的技能需求以及定位存在差異。

應(yīng)該怎么定位前端工程師這個(gè)崗位？我們可以從前端的發(fā)展歷史中得到答案。

1.1.1 前端工程師的發(fā)展史

1990年，Tim Berners Lee發(fā)明了世界上第一個(gè)網(wǎng)頁(yè)瀏覽器WorldWideWeb。1995年，Brendan Eich只用了10天便完成了第一版網(wǎng)頁(yè)腳本語(yǔ)言（也就是目前我們熟知的JavaScript）的設(shè)計(jì)。在網(wǎng)絡(luò)條件與計(jì)算機(jī)設(shè)備比較落后的年代，網(wǎng)頁(yè)基本是靜態(tài)的。對(duì)網(wǎng)頁(yè)腳本語(yǔ)言功能的最初設(shè)想是僅僅能夠在瀏覽器終端中完成一些簡(jiǎn)單地校驗(yàn)，比如表單驗(yàn)證。所以網(wǎng)頁(yè)腳本語(yǔ)言的特點(diǎn)是：功能簡(jiǎn)單、語(yǔ)法簡(jiǎn)潔、易學(xué)習(xí)、易部署。那個(gè)年代的web應(yīng)用是重服務(wù)端、輕客戶端的模式，web開發(fā)人員以服務(wù)端開發(fā)為主，并且兼顧瀏覽器端，沒(méi)有所謂的前端工程師。

2005年，AJAX技術(shù)的問(wèn)世令靜態(tài)的網(wǎng)頁(yè)“動(dòng)”了起來(lái)，異步請(qǐng)求和局部刷新徹底改變了網(wǎng)頁(yè)的交互模式。同時(shí)，網(wǎng)絡(luò)速度與個(gè)人計(jì)算機(jī)的普及給網(wǎng)站帶來(lái)了更多用戶，用戶對(duì)網(wǎng)站的需求也越來(lái)越多。需求與技術(shù)的同步增長(zhǎng)讓早期的重服務(wù)端、輕客戶端的天平有所傾斜，也就是從那個(gè)時(shí)候開始出現(xiàn)了第一批專職的前端工程師。這批前端工程師相對(duì)于服務(wù)端工程師的優(yōu)勢(shì)主要體現(xiàn)在對(duì)交互與UI的敏感度和專業(yè)度。很多設(shè)計(jì)出身的人投入了前端工程師的行列，所以有了一個(gè)現(xiàn)在前端工程師們很不喜歡的稱謂：美工。但不可否認(rèn)的是，第一批前端工程師主要負(fù)責(zé)的是CSS與HTML的開發(fā)，雖然有了AJAX技術(shù)，但受限于JavaScript引擎的性能，JavaScript語(yǔ)言在瀏覽器端的邏輯仍然十分簡(jiǎn)單。

2008年，Google推出了全新的JavaScript引擎V8，采用JIT（實(shí)時(shí)編譯）技術(shù)解釋編譯JavaScript代碼，大大提高了JavaScript的運(yùn)行性能。隨后，Netscape公司的SpiderMonkey和蘋果公司的JavaScriptCore也緊隨V8，加入了JavaScript引擎的性能追逐戰(zhàn)。JavaScript引擎性能的提升讓許多早期不能在瀏覽器端實(shí)現(xiàn)的功能得以實(shí)現(xiàn)，瀏覽器能夠承載幾千行甚至幾萬(wàn)行的邏輯，web應(yīng)用服務(wù)端與客戶端的天平再次向客戶端一方發(fā)生傾斜。業(yè)內(nèi)開始提倡REST（Representational State Transfer，具象狀態(tài)傳輸）風(fēng)格的web服務(wù)API與SPA（Single Page Application，單頁(yè)應(yīng)用）風(fēng)格的客戶端。前端工程師承擔(dān)起了客戶端的交互、UI和邏輯的開發(fā)，工作職責(zé)進(jìn)一步加重。

2009年，Node.js的問(wèn)世在前端界引發(fā)了軒然大波。Node.js將JavaScript語(yǔ)言帶到了服務(wù)端開發(fā)領(lǐng)域，截止目前，業(yè)內(nèi)已經(jīng)有很多公司將Node.js應(yīng)用到企業(yè)級(jí)產(chǎn)品中。雖然Node.js仍然沒(méi)有PHP、Java等傳統(tǒng)服務(wù)端語(yǔ)言一樣普及，但由它引發(fā)的“大前端”模式已經(jīng)在web開發(fā)領(lǐng)域中蔓延。Node.js對(duì)前端生態(tài)的促進(jìn)，以及對(duì)同構(gòu)開發(fā)的支持是PHP、Java等語(yǔ)言遠(yuǎn)不能比的?！按笄岸恕蹦Ｊ较碌那岸斯こ處熆缭搅酥盀g覽器與服務(wù)端之間看似難以逾越的鴻溝，踏入了web服務(wù)端開發(fā)領(lǐng)域。

1.1.2 前端工程師的技能棧

從最初的重交互、UI，輕JavaScript的開發(fā)模式，到交互、UI、邏輯一把抓，再到“大前端”的服務(wù)端客戶端全掌控，前端工程師的工作內(nèi)容和工作職責(zé)不斷擴(kuò)寬。從前端工程師的發(fā)展歷史中，我們可以總結(jié)出前端工程師的技能棧：

硬技能：HTML/CSS/JavaScript。這三項(xiàng)是前端工程師從蠻荒年代發(fā)展至今從未脫離的技術(shù)；

軟技能：用戶體驗(yàn)。用戶體驗(yàn)的web產(chǎn)品吸引用戶的第一道菜，也是前端工程師工作產(chǎn)出的重點(diǎn)；

擴(kuò)展技能：Node.js。并非特指Node.js本身，而是Node.js所代表的web服務(wù)端知識(shí)。即使你不是一個(gè)“大前端”，了解web產(chǎn)品的運(yùn)行原理是一個(gè)前端工程師必備的素養(yǎng)。

硬技能 - HTML/CSS/JavaScript

俗稱“前端工程師的三把刷子”，前端工程師必須掌握的三項(xiàng)技能。其實(shí)將HTML/CSS與JavaScript放在一起討論并不合適，HTML和CSS作為標(biāo)記性語(yǔ)言，只有在瀏覽器環(huán)境或者類瀏覽器環(huán)境下才會(huì)被識(shí)別解析，所以這兩者可以認(rèn)為是DSL（Domain Specific Lauguage，領(lǐng)域特定語(yǔ)言）；而JavaScript與HTML/CSS的性質(zhì)不同，雖然不如C++、Java等高級(jí)語(yǔ)言那樣嚴(yán)謹(jǐn)，但其本質(zhì)上是一門編程語(yǔ)言。同其他編程語(yǔ)言一樣，對(duì)于JavaScript的要求，掌握其語(yǔ)法和特性是最基本的。但這些只是應(yīng)用能力，最終考量的仍然是計(jì)算機(jī)體系的理論知識(shí)。所以，數(shù)據(jù)結(jié)構(gòu)、算法、軟件工程等基礎(chǔ)知識(shí)對(duì)于前端工程師同樣重要，這些知識(shí)能夠決定一個(gè)前端工程師的上限。

HTML/CSS/JavaScript這三者只是統(tǒng)稱，代表著前端工程師能力的三個(gè)方面。三者相互耦合，并非獨(dú)立。比如CSS必須與HTML配合、JavaScript邏輯的根本目的就是改變HTML或者CSS并且最終直觀地展示給用戶。任何一項(xiàng)都是一個(gè)龐大的技能樹，細(xì)分出很多子技能。對(duì)于HTML，掌握各個(gè)標(biāo)簽的合理使用方案和基本的web API。對(duì)于CSS，在理解各屬性的工作模式的前提下能夠綜合使用，給出合理的解決方案；并且由于瀏覽器的實(shí)現(xiàn)差異，還必須掌握必要的hack方案，雖然這些hack方案最終都會(huì)被歷史的塵埃掩埋，但目前我們?nèi)匀粺o(wú)法避免兼容性問(wèn)題。對(duì)于JavaScript，與其他任何一門編程語(yǔ)言一樣，除了要求掌握基本的語(yǔ)法，有基本的應(yīng)用編程能力以外，還必須具備良好的抽象能力以及架構(gòu)能力。

軟技能 - 用戶體驗(yàn)

除了以上提到的“硬技能”，前端工程師還必須掌握一項(xiàng)“軟技能”：用戶體驗(yàn)。

前端工程師的產(chǎn)出是直接面向用戶的，良好的用戶體驗(yàn)是一個(gè)web產(chǎn)品的基本要素。這里的用戶體驗(yàn)并非指的是交互方案和視覺(jué)設(shè)計(jì)，當(dāng)然這也是用戶體驗(yàn)的一部分，此處我們討論的用戶體驗(yàn)包括但不限于以下幾點(diǎn)：

保證內(nèi)容的快速展現(xiàn)，減少的用戶等待時(shí)間；

保證操作的流暢度；

如果是移動(dòng)設(shè)備，應(yīng)盡量減少設(shè)備的耗電量；

上述幾點(diǎn)總結(jié)起來(lái)其實(shí)就兩個(gè)字：性能。如果說(shuō)按時(shí)完成了業(yè)務(wù)的所有需求是保證了“量”，那么提升產(chǎn)品的性能就是保證了“質(zhì)”，兩者缺一不可。

JavaScript設(shè)計(jì)之初最經(jīng)典的應(yīng)用場(chǎng)景是表單驗(yàn)證。比如，一個(gè)需要驗(yàn)證用戶名和密碼的表單，用戶沒(méi)有輸入任何內(nèi)容就點(diǎn)擊“發(fā)送”按鈕，仍然會(huì)發(fā)送一個(gè)請(qǐng)求到服務(wù)端進(jìn)行驗(yàn)證。這在今天的網(wǎng)絡(luò)技術(shù)下沒(méi)什么大不了，但在網(wǎng)絡(luò)速度慢而且上網(wǎng)費(fèi)用昂貴的年代，這樣的代價(jià)是非常巨大的，并且用戶必須等待服務(wù)端處理后才能得到反饋。JavaScript在瀏覽器發(fā)送請(qǐng)求之前驗(yàn)證內(nèi)容的有效性，避免一次無(wú)效的請(qǐng)求，即減輕了服務(wù)端壓力節(jié)省了成本，又減少了用戶等待時(shí)間提升了用戶體驗(yàn)?？梢?jiàn)JavaScript設(shè)計(jì)的初衷便將用戶體驗(yàn)zui。

現(xiàn)今社會(huì)的快速節(jié)奏下，用戶對(duì)于產(chǎn)品的需求也傾向于快速化：快速的展現(xiàn)、快速的迭代。用戶不想為了看一條新聞而去下載一款新聞軟件，打開網(wǎng)站即可快速查看。web產(chǎn)品本身就具備快速的基因，性能優(yōu)化的最終目標(biāo)也是保證“足夠快”。所以，前端工程師不僅要求熟練地使用基本的開發(fā)技能，還必須具備性能優(yōu)化的意識(shí)和技能。

注：你可能會(huì)疑問(wèn)：學(xué)習(xí)能力不算軟技能的一種嗎？學(xué)習(xí)能力是任何崗位都必須具備的軟技能之一，并不是專屬于前端工程師的軟技能。擴(kuò)展技能 - Node.js

將Node.js定位為擴(kuò)展技能，并非指的是Node.js本身，而是以Node.js為代表的web服務(wù)端知識(shí)。前端工程師掌握web客戶端的相關(guān)知識(shí)是基本要求，欠缺的是對(duì)web服務(wù)端了解。雖然并不是每個(gè)前端工程師都是“大前端”，并且讓前端工程師編寫不熟悉的服務(wù)端邏輯也并不十分恰當(dāng)，專業(yè)的事應(yīng)該由專業(yè)的人負(fù)責(zé)。但這并不意味著前端工程師不需要掌握服務(wù)端的理論知識(shí)。了解web應(yīng)用從前到后的工作流程和整體架構(gòu)模型，有助于前端工程師編寫更合理的客戶端邏輯，以及對(duì)產(chǎn)品出現(xiàn)的問(wèn)題及時(shí)定位。

綜上所述，一個(gè)合格的前端工程師應(yīng)該掌握的技術(shù)?？梢杂孟聢D概括：

前端工程師是承載用戶層所有功能的資源產(chǎn)出者。不僅僅是客戶端最終呈現(xiàn)給用戶的HTML/CSS/JavaScript等資源成品，還包括這些資源從零開始到最終產(chǎn)出的生產(chǎn)流水線所涵蓋的所有環(huán)節(jié)。