前端工程師的基本素養

閱讀原文

閒來無事，今天隨便聊聊前端工程師應該具有哪些素質，權當博你們一笑。

前端工程師究竟是工做很簡單的「切圖仔」，仍是包攬客戶端和中間層的「大前端」？招聘市場上有大量的公司對前端工程師求賢若渴；但同時求職市場上卻有大量的前端工程師在「求職若渴」。形成這種兩難局面的緣由是用人單位與求職者對前端工程師的技能需求以及定位存在差別。

應該怎麼定位前端工程師這個崗位？咱們能夠從前端的發展歷史中獲得答案。

1.1.1 前端工程師的發展史

1990年，Tim Berners Lee發明了世界上第一個網頁瀏覽器WorldWideWeb。1995年，Brendan Eich只用了10天便完成了初版網頁腳本語言（也就是目前咱們熟知的JavaScript）的設計。在網絡條件與計算機設備比較落後的年代，網頁基本是靜態的。對網頁腳本語言功能的最初設想是僅僅可以在瀏覽器終端中完成一些簡單地校驗，好比表單驗證。因此網頁腳本語言的特色是：功能簡單、語法簡潔、易學習、易部署。那個年代的web應用是重服務端、輕客戶端的模式，web開發人員以服務端開發爲主，而且兼顧瀏覽器端，沒有所謂的前端工程師。

2005年，AJAX技術的問世令靜態的網頁「動」了起來，異步請求和局部刷新完全改變了網頁的交互模式。同時，網絡速度與我的計算機的普及給網站帶來了更多用戶，用戶對網站的需求也愈來愈多。需求與技術的同步增加讓早期的重服務端、輕客戶端的天平有所傾斜，也就是從那個時候開始出現了第一批專職的前端工程師。這批前端工程師相對於服務端工程師的優點主要體如今對交互與UI的敏感度和專業度。不少設計出身的人投入了前端工程師的行列，因此有了一個如今前端工程師們很不喜歡的稱謂：美工。但不能否認的是，第一批前端工程師主要負責的是CSS與HTML的開發，雖然有了AJAX技術，但受限於JavaScript引擎的性能，JavaScript語言在瀏覽器端的邏輯仍然十分簡單。

2008年，Google推出了全新的JavaScript引擎V8，採用JIT（實時編譯）技術解釋編譯JavaScript代碼，大大提升了JavaScript的運行性能。隨後，Netscape公司的SpiderMonkey和蘋果公司的JavaScriptCore也緊隨V8，加入了JavaScript引擎的性能追逐戰。JavaScript引擎性能的提高讓許多早期不能在瀏覽器端實現的功能得以實現，瀏覽器可以承載幾千行甚至幾萬行的邏輯，web應用服務端與客戶端的天平再次向客戶端一方發生傾斜。業內開始提倡REST（Representational State Transfer，具象狀態傳輸）風格的web服務API與SPA（Single Page Application，單頁應用）風格的客戶端。前端工程師承擔起了客戶端的交互、UI和邏輯的開發，工做職責進一步加劇。

2009年，Node.js的問世在前端界引起了軒然大波。Node.js將JavaScript語言帶到了服務端開發領域，截止目前，業內已經有不少公司將Node.js應用到企業級產品中。雖然Node.js仍然沒有PHP、Java等傳統服務端語言同樣普及，但由它引起的「大前端」模式已經在web開發領域中蔓延。Node.js對前端生態的促進，以及對同構開發的支持是PHP、Java等語言遠不能比的。「大前端」模式下的前端工程師跨越了以前瀏覽器與服務端之間看似難以逾越的鴻溝，踏入了web服務端開發領域。

1.1.2 前端工程師的技能棧

從最初的重交互、UI，輕JavaScript的開發模式，到交互、UI、邏輯一把抓，再到「大前端」的服務端客戶端全掌控，前端工程師的工做內容和工做職責不斷擴寬。從前端工程師的發展歷史中，咱們能夠總結出前端工程師的技能棧：

• 硬技能：HTML/CSS/JavaScript。這三項是前端工程師從蠻荒年代發展至今從未脫離的技術；
• 軟技能：用戶體驗。用戶體驗的web產品吸引用戶的第一道菜，也是前端工程師工做產出的重點；
• 擴展技能：Node.js。並不是特指Node.js自己，而是Node.js所表明的web服務端知識。即便你不是一個「大前端」，瞭解web產品的運行原理是一個前端工程師必備的素養。

硬技能 - HTML/CSS/JavaScript

俗稱「前端工程師的三把刷子」，前端工程師必須掌握的三項技能。其實將HTML/CSS與JavaScript放在一塊兒討論並不合適，HTML和CSS做爲標記性語言，只有在瀏覽器環境或者類瀏覽器環境下才會被識別解析，因此這二者能夠認爲是DSL（Domain Specific Lauguage，領域特定語言）；而JavaScript與HTML/CSS的性質不一樣，雖然不如C++、Java等高級語言那樣嚴謹，但其本質上是一門編程語言。同其餘編程語言同樣，對於JavaScript的要求，掌握其語法和特性是最基本的。但這些只是應用能力，最終考量的仍然是計算機體系的理論知識。因此，數據結構、算法、軟件工程等基礎知識對於前端工程師一樣重要，這些知識可以決定一個前端工程師的上限。

HTML/CSS/JavaScript這三者只是統稱，表明着前端工程師能力的三個方面。三者相互耦合，並不是獨立。好比CSS必須與HTML配合、JavaScript邏輯的根本目的就是改變HTML或者CSS而且最終直觀地展現給用戶。任何一項都是一個龐大的技能樹，細分出不少子技能。對於HTML，掌握各個標籤的合理使用方案和基本的web API。對於CSS，在理解各屬性的工做模式的前提下可以綜合使用，給出合理的解決方案；而且因爲瀏覽器的實現差別，還必須掌握必要的hack方案，雖然這些hack方案最終都會被歷史的塵埃掩埋，但目前咱們仍然沒法避免兼容性問題。對於JavaScript，與其餘任何一門編程語言同樣，除了要求掌握基本的語法，有基本的應用編程能力之外，還必須具有良好的抽象能力以及架構能力。

軟技能 - 用戶體驗

除了以上提到的「硬技能」，前端工程師還必須掌握一項「軟技能」：用戶體驗。

前端工程師的產出是直接面向用戶的，良好的用戶體驗是一個web產品的基本要素。這裏的用戶體驗並不是指的是交互方案和視覺設計，固然這也是用戶體驗的一部分，此處咱們討論的用戶體驗包括但不限於如下幾點：

• 保證內容的快速展示，減小的用戶等待時間；
• 保證操做的流暢度；
• 若是是移動設備，應儘可能減小設備的耗電量；

上述幾點總結起來其實就兩個字：性能。若是說按時完成了業務的全部需求是保證了「量」，那麼提高產品的性能就是保證了「質」，二者缺一不可。

JavaScript設計之初最經典的應用場景是表單驗證。好比，一個須要驗證用戶名和密碼的表單，用戶沒有輸入任何內容就點擊「發送」按鈕，仍然會發送一個請求到服務端進行驗證。這在今天的網絡技術下沒什麼大不了，但在網絡速度慢並且上網費用昂貴的年代，這樣的代價是很是巨大的，而且用戶必須等待服務端處理後才能獲得反饋。JavaScript在瀏覽器發送請求以前驗證內容的有效性，避免一次無效的請求，即減輕了服務端壓力節省了成本，又減小了用戶等待時間提高了用戶體驗。可見JavaScript設計的初衷便將用戶體驗zui。

現今社會的快速節奏下，用戶對於產品的需求也傾向於快速化：快速的展示、快速的迭代。用戶不想爲了看一條新聞而去下載一款新聞軟件，打開網站便可快速查看。web產品自己就具有快速的基因，性能優化的最終目標也是保證「足夠快」。因此，前端工程師不只要求熟練地使用基本的開發技能，還必須具有性能優化的意識和技能。

注：你可能會疑問：學習能力不算軟技能的一種嗎？學習能力是任何崗位都必須具有的軟技能之一，並非專屬於前端工程師的軟技能。

擴展技能 - Node.js

將Node.js定位爲擴展技能，並不是指的是Node.js自己，而是以Node.js爲表明的web服務端知識。前端工程師掌握web客戶端的相關知識是基本要求，欠缺的是對web服務端了解。雖然並非每一個前端工程師都是「大前端」，而且讓前端工程師編寫不熟悉的服務端邏輯也並不十分恰當，專業的事應該由專業的人負責。但這並不意味着前端工程師不須要掌握服務端的理論知識。瞭解web應用從前到後的工做流程和總體架構模型，有助於前端工程師編寫更合理的客戶端邏輯，以及對產品出現的問題及時定位。

綜上所述，一個合格的前端工程師應該掌握的技術棧能夠用下圖歸納：

前端工程師是承載用戶層全部功能的資源產出者。不只僅是客戶端最終呈現給用戶的HTML/CSS/JavaScript等資源成品，還包括這些資源從零開始到最終產出的生產流水線所涵蓋的全部環節。