成為一名優秀的Web前端開發者
本文記錄了兩位工程師為web開發者們所提出的多條建議,其中一位推薦了多種實用的工具與技術,而另一位則對于如何克服瀏覽器開發時所面臨的挑戰提出了諸多建議。
Rebecca Murphey是來自于 Bazaarvoice 的一位軟件工程師。今年早些時候,她發布了一篇博客文章“ 前端(JS)開發者的基本素質之2015版 ”,為JavaScript開發者在進行客戶端web開發時使用的工具與開發方式提出了一些建議。她在文章的總結中寫道:
學習ECMAScript 2015,推薦的參考資料有: 《Understanding ES6》 、 ES6 Rocks 以及 BabelJS 。我們在此還要加上一條,即Axel Rauschmayer的著作《探索ES6》。考慮到在當前這個時間點上似乎還沒有必要了解ECMAScript 2015的所有細節,Murphey建議開發者更深入地了解如何使用異步調用、回調以及promise。
使用模塊。Murphey相信,模塊毫無疑問應當作為客戶端web應用程序的構建塊。她最近在使用 webpack 以實現模塊化的效果,但她希望讓每個人都能夠使用ECMAScript標準模塊的那一天能夠早日到來。
測試你的代碼。在Murphey看來,為你的代碼編寫測試,并且保證代碼的可測試性是至關重要的。雖然她對于 Intern “非常中意”,但出于習慣,她還是堅持使用 Mocha 。關于這一方面,她也強烈推薦Michael Feathers的著作《 修改代碼的藝術 》。
實現流程自動化。Murphey曾經嘗試使用 Grunt 與 Gulp ,但她最終還是選擇了 Yeoman 。因為在“使用不熟悉的技術開始一個全新的項目”,或是對第三方JavaScript應用的開發進行標準化時,Yeoman的表現“非常出色”。Murphey也提到了 Broccoli ,認為它將來或許能夠取代Grunt和Yeoman。
編寫高質量的代碼。她的建議是,對“違反了項目中經過良好定義的風格指南”的代碼進行重構,還應當使用lint工具,例如 JSCS 或 ESLint 。
使用Git。Murphey建議在Git中使用特性分支,因此得以“通過交互式rebase,在與他人分享提交時對提交進行清理,并且盡可能地在較小的單元上進行工作,以減少沖突的發生機率”。此外還應當通過 ghooks 在push操作與commit操作前運行鉤子操作。
在服務端生成HTML。出于性能方面的考慮,Murphey推薦在大型項目中盡可能在服務端生成HTML。“預先生成這些文件,將其作為靜態文件保存,以加快處理請求的速度。隨后在客戶端的相應事件中可通過客戶端代碼操作這些HTML文件,并在客戶端模板中修改。”
擁抱Node。Murphey建議web開發者熟練掌握Node.js的相關知識,至少要了解如何初始化一個Node項目、如何搭建一臺 Express 服務器、以及如何使用 request 模塊轉發請求。
Philip Walton是來自Google的一位軟件工程師,他最近撰寫了一篇博客文章“ 如何成為一名優秀的前端工程師 ”。這篇文章的觀點另辟蹊徑,他并沒有向讀者推薦任何工具或框架,而是專注于如何處理這一領域中的某些挑戰。在他看來, 優秀員工與真正杰出的人才的差別不在于他們的知識量,而在于他們的思考方式 。他是這樣描述開發者的智慧的:
真正理解背后的過程。對于Walton來說,僅僅編寫出可以運行的代碼算不得優秀。他見過許多編寫CSS與JavaScript的人,他們 “只求找到能夠運行的代碼,然后就繼續下一步工作了。”很多時候,開發者并不了解某段代碼運行的機制。Walton建議開發者進行深入鉆研:
要充分理解代碼的工作原理或許會很耗時間,但我向你保證,從長遠來說,這種方式最終將節省你大量的時間。一旦你充分理解你所參與的系統是如何運作的,你就無需不斷地進行猜測與檢驗這些費時的工作了。
預先了解瀏覽器將產生的改動。Web開發者應當持續了解有哪些瀏覽器的改動會破壞現有的代碼。以下代碼在IE10中必然會導致整個JavaScript框架的方法出錯:
var isIE6 = !isIE7 && !isIE8 && !isIE9;
仔細閱讀規范。Walton指出,雖然閱讀規范是一項艱辛的任務,但一旦出現瀏覽器對某個頁面的渲染不同的情況,這一任務就是不可避免的了。他為此特別舉例說明:
最近我遇到這樣一個例子,與可伸縮(flex)元素的默認最小尺寸有關。根據規范所說,可伸縮元素的min-width與min-height的初始值是 auto,而不是0,這就意味著在默認情況下,這些元素不可能收縮到比其中的內容尺寸還小。而在過去8個月中,Firefox是唯一一個正確地實現了這一特性的瀏覽器。
如果你遇到了這個跨瀏覽器的不一致性問題,并且注意到你的網站在Chrome、IE、Opera和Safari上的展現完全相同,只在Firefox上有所差別,那你很可能會認為是Firefox的問題。實際上,我曾多次發現這一情況,在我的 Flexbugs 項目中,有許多由用戶報告的bug其實都是由這種不一致性所導致的。而如果我按照用戶所提議的那些臨時方案來改變實現方式,那么在兩周前所發布的 Chrome 44中又會產生問題。由于這些臨時方案選擇了違背規范的方式,它們在無形中起到了提倡不正確行為的負面作用。
代碼審查。Walton表示,從閱讀他人的代碼中可以學到很多知識,它可以拓寬你的思路,了解“新的工作方法”,同時也有助于你在團隊中的工作。實際上,這一點確實相當必要,因為“作為一位工程師來說,你的時間大部分都是在一個現有的代碼庫中添加或修改代碼”,而不是從頭開始編寫全新的代碼。
與更聰明的人一起工作。Walton“強烈”建議你至少在職業生涯的初期階段要盡量在某個團隊中進行工作,向更有經驗的團隊成員學習,并讓他們審查你的代碼。如果之后選擇了自由職業者這條職業路線,那么Walton建議你參與開源項目,這同樣可以感受到在團隊中工作的益處。
重復發明輪子。Walton相信,雖然“重復發明輪子對于業務來說是有害的”,但它對于學習很有好處。在有些情況下,他建議你自己編寫代碼,而不是依賴于第三方的代碼,因為這一過程將讓你學到許多東西。當然這也要看情況而定。
將你的經驗記錄下來。Walton的最后一條建議是將你所學到的東西用文字記錄下來:“按我的經驗來看,寫作、演講以及開發demo,這些方法能夠迫使我對知識點進行充分的挖掘,并做到從內到外的完全理解。哪怕你寫的東西完全沒人看,但寫作的過程本身就已經值得你付出的努力了。”
查看英文原文: Becoming a Great Web Front-end Developer