如何成為一個卓越的前端開發工程師

原文鏈接：https://www.infoq.com/news/2015/08/great-front-end-developer/

這不是一篇嚴格意義上的翻譯，我只是用中文傳達了原文的觀點，裡面有很多自己撰寫的部分，可能和原文根本對應不上但表述的還是一個意思。而且我替換了其中所有的資源鏈接，以方便大家查閱。如果有什麼建議歡迎在評論中提出。

本文中提到的建議來自於兩位工程師，一位推薦高效的工具和技術，另一位提供在編程實踐中解決困難的建議和方法。

Rebecca Murphey, 來自 Bazaarvoice 的開發者，之前寫過一篇題為 A Baseline for Front-End [JS] Developers: 2015 的博文。總結起來有以下幾點：

學習 ECMAScript 2015(ES6)

推薦資源:

1. 阮一峰 ECMAScript 6入門
2. ECMAScript 6 Features 中文版

事實上你並沒有必要現在就精通ES6的全部特性，很多情況下ES6的應用還需要通過BabelJS編譯來實現對不支持瀏覽器的兼容。Murphey推薦深入了解有關非同步調用，回調以及Promises的部分。

使用模塊

推薦資源:

1. Webpack 中文指南
2. webpack
3. ECMAScript 6 模塊簡介

模塊化是開發Web應用的大趨勢。你可以通過webpack一類的構建工具來組織你的代碼，當然現在ES6已經提供了原生的modules支持。

測試你的代碼

推薦資源:

1. Intern.
2. Mocha
3. 修改代碼的藝術
4. Working Effectively with Legacy Code

Intern.的使用方式更人性化一些，而使用Mocha已經屬於一種習慣。這裡還要推薦一本書修改代碼的藝術，有能力者可以讀英文原版。

自動化構建

推薦資源:

1. Grunt
2. Gulp
3. Yeoman -Yeoman官方教程中文版
4. Broccoli.js

大家對Grunt和Gulp可能已經比較熟悉了。在這裡Murphey和譯者都強烈推薦Yeoman，它提供了特別多的啟動開發項目的模板，只需要命令行里的一行代碼就可以將你應用需要的技術棧下載配置完畢。Broccoli也是新流行起來的一個構建工具。

編寫高質量的代碼

推薦資源:

1. JSCS
   • JavaScript代碼風格檢查工具 - JSCS 介紹
2. ESLint
   • ESLint 使用入門

在編寫代碼的過程中一定要注意保持統一的規範和風格。畢竟在很多情況下，你寫的代碼並不是自己一個人看，即使是你自己一個人看，如果不遵循任何規則，你敢保證你能看懂自己上個月寫出的代碼么？

使用Git

推薦資源:

1. ghooks

在項目開發中，你必然要使用到版本控制工具來和他人協作編寫代碼。git本身提供一個hook功能，可以在commit或者push前出發一些其他任務。ghook這個npm包提供了一種非常簡便的配置hook的方法。

伺服器端渲染

推薦閱讀:

1. JS前端渲染VS伺服器端渲染
2. 玩轉 React 伺服器端渲染

在實際應用中，由於性能問題等一些原因，會在伺服器端預先渲染好客戶端請求的數據頁面，再直接將靜態文件傳回客戶端。

使用Node.js

推薦資源:

1. Node.js 中文官網
2. 淘寶 NPM 鏡像(提高速度請使用鏡像源)
3. Express 中文官網
4. request module -node.js的request模塊使用說明

不用學習新的語言，使用js就可以直接在伺服器端編程，前端工程師一秒變全棧。雖然Nodejs廣為詬病，被諷刺node根本不是一種語言，充其量是個框架。但實際應用中還是挺爽的。至少學會如何使用Express搭建一個簡單的API服務，如何使用request代理請求。在譯者看來，會用npm就可以解決很多問題啦。

來自Google的工程師Philip Walton有著不同的觀點，他並不推薦工具和框架，而更看重在實際應用中解決問題的能力。他說「區別人能力高低的關鍵在於思想而不是知識。」

譯者認為，尤其是在這個三天兩頭就有新輪子新工具推出的大環境下，不要出現一個新流行趨勢就馬上去學習使用這個工具或是框架，而不去了解開發這個框架想要解決的問題和其背後的原理。這樣只會陷入眼花繚亂之中，永遠掌握不料編程的真諦。

npm的社區維護的也沒有你想像的好，你下載下來的包里可能會包含著一個後台默默為別人twitter點贊轉發的代碼，也有可能下載下來一張十幾兆的廣告圖片。隨便一個人移除了自己的代碼包可能會造成使用其代碼的項目大面積癱瘓。所以永遠信賴自己，不要依靠工具。

知其然知其所以然

現在有太多的人面向搜索引擎，面向Github，面向別人的代碼編程。也許你找來的一段代碼碰巧好用起了效果，但是你並不明白其中的原理，短期來看你稀里糊塗解決了手頭的問題，但是真正了解其中的原理可以節省你未來的時間。你會很清楚你要怎樣寫，節約大把的「猜猜然後再試試」的時間。

時刻關注瀏覽器的變化

比如說當IE10出來之後下面這行代碼就不能用了：

var isIE6 = !isIE7 && !isIE8 && !isIE9;

其實這是鄙視IE的環節。譯者覺得我們連帶著鄙視用IE的人和單位就好了。

閱讀標準規範

推薦閱讀:

1. Mozilla 開發者網路
2. W3C Web 平台文庫

雖然很痛苦，但可以讓你的理解更深入。例如在瀏覽器兼容的調試中，如果你不知道標準，很難發現調試中發現bug的原因。

審查代碼

Walton認為閱讀別人的代碼對於擴展思路，團隊合作都有很好的幫助。而且我們得承認「我們大部分時間都是在組織或者修改已有的代碼」，而不是從零開始。

和更優秀的人一起工作

Walton強烈推薦開發者在最初工作時加入一個團隊，這樣才可以從更有經驗的人身上學習，也有機會讓別人審閱你的代碼。如果你仍然想作為一個自由職業者，那麼參加合作開源項目可以彌補你團隊工作的經驗。

重新發明輪子

重新發明輪子並不能提高你的生產力，卻是非常好的一種學習途徑。不使用別人的代碼而是自己從頭實現一個功能可以讓你學習到很多。

學習與實踐相結合

Walton總結：「根據我的經驗來看，寫作，講述，開發demo是由內到外完整了解某項知識的最好方式，即使你寫的東西沒人看，但你在做這些事情中取得的進步更有價值。」