一個前端工程師的基本修養

摘要：

有人說互聯網是前端工程師的舞臺，先不論這個說法是否有些誇大其詞，但前端工程師絕對撐起了互聯網應用開發的「半壁江山」。隨着傳統網站、手機應用、桌面應用、微信小程序等次第出現，須要前端工程師設計和完成的客戶端功能邏輯在不斷複雜化。

有人說互聯網是前端工程師的舞臺，先不論這個說法是否有些誇大其詞，但前端工程師絕對撐起了互聯網應用開發的「半壁江山」。隨着傳統網站、手機應用、桌面應用、微信小程序等次第出現，須要前端工程師設計和完成的客戶端功能邏輯在不斷複雜化。那麼，應該怎麼定位前端工程師這個崗位，怎麼描繪這個崗位的基本要求呢？下面讓咱們從前端的發展歷史中尋找答案吧。

1. 前端工程師的發展歷史

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

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

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

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

能夠看到前端工程師的職責範疇已經發生了翻天覆地的變化，那麼前端工程師應該掌握哪些技能、擁有哪些職業素養呢？下面一一介紹。

2. 前端工程師的技能棧

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

• 硬技能：HTML/CSS/JavaScript。這3項是前端工程師從蠻荒年代發展至今從未脫離的核心技術。

• 軟技能：用戶體驗。用戶體驗是Web產品吸引用戶的第一道菜，也是前端工程師工做產出的重點。

• 擴展技能：Node.js。並不是特指Node.js自己，而是Node.js所表明的Web服務器端知識。即便你不是一個「大前端」，瞭解Web產品的運行原理也是一個前端工程師必備的素養。

硬技能——HTML/CSS/JavaScript

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

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

軟技能——用戶體驗

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

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

1. 保證內容的快速展示，減小用戶等待時間。

2. 保證操做的流暢度

3. 若是是移動設備，應儘可能減小設備的耗電量。

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

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

你可能會產生疑問：學習能力不算軟技能的一種嗎？這是由於學習能力是任何崗位都必須具有的軟技能之一，並非專屬於前端工程師的軟技能。
在現今社會的快節奏下，用戶對於產品的需求也傾向於快速化：快速展示、快速迭代。用戶不想爲了看一條新聞而去下載一款新聞軟件，他們但願打開網站便可快速查看。Web產品自己就具有快速的基因，性能優化的最終目標也是保證「足夠快」。因此，前端工程師不只要求熟練地使用基本的開發技能，還必須具有性能優化的意識和技能。

擴展技能——Node.js

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

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

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

從誕生到發展至今，前端工程師的定位一直在變化。從「切圖仔」升級到「大前端」，改變的是負責的技術範疇，不變的是前端工程師產出的對象永遠是用戶。這種變化不會中止，下面讓咱們看看前端工程師將來可能的定位。

3. 前端工程師將來的定位

前端工程師的發展方向並未明確，可是如今平臺的多樣性以及新技術的不斷涌現，前端逐漸發展出了面向Web和麪向移動App兩個方向。

不僅是瀏覽器

在Node.js以前，瀏覽器是前端工程師惟一的「陣地」，Node.js的出現打破了這個局面，以至出現了所謂的「大前端」。之因此Node.js出現以前沒有「大前端」概念的主要緣由之一是，當時的 Web 服務器端編程語言並非JavaScript，雖然PHP、Python等Web腳本語言一樣簡潔易學，可是學習兩門編程語言畢竟須要消耗大量的精力。而 Node.js 出現以後，語言的共通性不只下降了使用 Node.js 進行服務器端開發的門檻，也爲實現同構編程提供了有力的技術支持。除此以外，Node.js 的輕量、非阻塞I/O、異步處理等特性很是適用於微服務等特定場景。

前端工程師掌控着與用戶相關的全部資源（數據、邏輯和模板），可以更全面地掌控開發進度以及實現更合理的先後端分離。這種模式的前端將技術範疇擴大到Web服務層，能夠視爲在Web領域縱向的延伸。國內外團隊對這種模式的接受程度也愈來愈高。突破瀏覽器、面向Web應用層的「大前端」逐漸成爲了前端工程師將來發展的主流方向。

也不僅是Web

不管是專一瀏覽器端，仍是兼顧 Node.js 中間層，前端工程師始終未脫離常規意義上的Web領域（即面向瀏覽器的 Web）。近些年隨着 React Native、Weex 等技術的發展，JavaScript語言能夠直接編寫接近Native體驗的移動App，這令前端工程師有望探索常規Web之外的開發領域。實際上，近幾年前端工程師「入侵」移動開發領域的腳步從未停下。以PhoneGap、Cordova、Ionic等爲表明的類App開發，以及內嵌在App中WebView的Hybrid開發，加上近期 Google 提出的PWA ，甚至微信小程序和支付寶小程序等，前端工程師的陣地早已再也不是單純的瀏覽器了，而是面向各種GUI應用的泛前端領域。

移動客戶端開發領域之因此不斷被Web「入侵」，一方面是因爲Web技術發展迅速，好比JavaScript引擎性能的提高以及隨着HTML5的推廣瀏覽器和類瀏覽器的權限不斷加強；另外一方面是因爲移動操做系統政策的不斷收緊。2017年6月，Apple公司發佈公告禁用以JSPatch爲表明的「僞熱更新」技術；Google I/O 2017開發者大會上點名提出以MIUI爲表明的第三方Android定製系統粗糙的圖標，雖然並未宣佈 Android 即將閉源的任何消息，但這件事也令不少開發者和媒體嗅到了不安的氣氛。因此目前的局面是：Native不斷收緊，Web逐漸開放。這是前端可以有機會而且有能力「跨界」踏入移動App開發領域的重要前提。雖然這個方向目前仍然處於起步階段，距離真正成熟還有多長的路誰也沒法預測，但不能否認的是前端的橫向邊界正在不斷延伸。

Web自身格局不斷變化的同時，其餘領域的誘惑也不斷挑逗前端不安分的觸角。前端工程師將來的具體定位雖然沒法精確預測，但不管是Web領域仍是客戶端領域，前端的工做產出均直接面向用戶，這在任什麼時候代都不會改變。秉承這項宗旨，不論角色如何轉變，前端工程師始終須要堅持以下兩項原則。

• 於產品而言，須保證性能和體驗。

• 於開發而言，須保證快速與嚴謹。

以上內容節選自 《前端工程化體系設計與實踐》一書

原文連接