有人說互聯網是前端工程師的舞臺，先不論這個說法是否有些誇大其詞，但前端工程師絕對撐起了互聯網應用開發的“半壁江山”。隨著傳統網站、手機應用、桌面應用、微信小程序等次第出現，需要前端工程師設計和完成的客戶端功能邏輯在不斷複雜化。那麼，應該怎麼定位前端工程師這個崗位，怎麼描繪這個崗位的基本要求呢？下面讓我們從前端的發展歷史中尋找答案吧。
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產品的基本要素。這裡的用戶體驗並非指的是交互方案和視覺設計，當然這些也是用戶體驗的一部分。此處我們討論的用戶體驗包括但不限於以下幾點。
保證內容的快速展現，減少用戶等待時間。
保證操作的流暢度
如果是移動設備，應儘量減少設備的耗電量。
上述幾點總結起來其實就兩個字：性能。如果說按時完成了業務的所有需求是保證了“量”，那麼提升產品的性能就是保證了“質”，兩者缺一不可。
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領域還是客戶端領域，前端的工作產出均直接面向用戶，這在任何時代都不會改變。秉承這項宗旨，不論角色如何轉變，前端工程師始終需要堅持如下兩項原則。
於產品而言，須保證性能和體驗。
於開發而言，須保證快速與嚴謹。
前端工程化包含一系列規範和流程，其可提升前端工程師的工作效率，加快Web開發迭代速度，是現在前端開發領域中非常重要的一環。本書系統、全面地介紹了前端工程體系的各個環節，包括設計要點和實踐經驗。全書分為7章，分別是前端工程簡史、腳手架、構建、本地開發服務器、部署、工作流、前端工程化的未來。本書適合對前端工程化有一定理解和實踐的中高級前端工程師閱讀，同樣適合對前端工程化感興趣的服務器端開發者以及運維人員閱讀。
閱讀更多 前端嫣然呀呀呀 的文章
關鍵字: 互聯網 編程語言 JavaScript
