前端工程師的英文名為front-end engineer，簡(jiǎn)稱FE，下文將用FE來代稱?，F(xiàn)在意義上的前端（并非只制作網(wǎng)頁），國(guó)內(nèi)最早開始有大規(guī)模招聘崗位應(yīng)該是2011年左右的事情吧，在此之前，F(xiàn)E的工作基本都是由服務(wù)端工程師包辦的，或者是由設(shè)計(jì)師來產(chǎn)出HTML頁面。那么，是什么樣的原因催生出了FE這一職位呢？本文將從FE的工作內(nèi)容、專業(yè)FE應(yīng)具備的技能和品質(zhì)來聊聊這個(gè)職業(yè)。

用戶體驗(yàn)的操刀者

前端工程師的首要工作就是開發(fā)用戶界面，在web系統(tǒng)中，就是指網(wǎng)頁了。為什么網(wǎng)頁需要專門的FE來寫呢？答案就是「用戶體驗(yàn)」。隨著web2.0概念的普及以及web3.0的提出，用戶成為互聯(lián)網(wǎng)的主要生產(chǎn)者，網(wǎng)頁所承載的功能越來越多。

一方面，企業(yè)的「用戶體驗(yàn)」訴求很強(qiáng)烈。這個(gè)很容易就能理解，如果你的產(chǎn)品看上去就像個(gè)釣魚網(wǎng)站而且還特別難用，就會(huì)有一部分用戶離你而去。非互聯(lián)網(wǎng)企業(yè)呢？也會(huì)面臨這樣的情況，你花了很大的功夫優(yōu)化數(shù)據(jù)庫(kù)，優(yōu)化服務(wù)器負(fù)載，你的客戶卻很難感知到你的努力。你的系統(tǒng)界面還是八九十年代的風(fēng)格，客戶的第一感覺就是這系統(tǒng)不行，不買你的帳。相反，如果你花一點(diǎn)時(shí)間做一套嶄新風(fēng)格的界面出來，客戶的第一感覺就是這個(gè)系統(tǒng)好炫酷，技術(shù)含量很高。不要小看這個(gè)第一感覺，對(duì)于外行人來說，第一感覺往往起到了決定作用。好多企業(yè)都意識(shí)到了這一點(diǎn)，所以對(duì)用戶體驗(yàn)的訴求就上去了。

另一方面，現(xiàn)在的用戶也都很挑剔。畢竟他們使用的產(chǎn)品一個(gè)比一個(gè)炫，都被慣壞了，你的產(chǎn)品稍有點(diǎn)不爽的地方，就上微博去給你宣傳。

前端工程師是用戶體驗(yàn)的把控者，在產(chǎn)品經(jīng)理構(gòu)想出交互原型，設(shè)計(jì)師設(shè)計(jì)出交互細(xì)節(jié)后，F(xiàn)E就用他的雙手一行行敲出這些代碼。他敲出的每一個(gè)按鈕，每一張圖片，都被成千上萬的用戶點(diǎn)擊著，F(xiàn)E與用戶可以說是“零距離接觸”。作為產(chǎn)品交互的實(shí)現(xiàn)者，除了HTML、CSS這兩門語言要精通外，對(duì)前端要求更高的其實(shí)是非技術(shù)因素。

FE需要對(duì)用戶體驗(yàn)有較深的理解。比如頁面上有一個(gè)超鏈接，字體比較小的情況下，用戶可能會(huì)一下點(diǎn)不中，因?yàn)殒溄拥目牲c(diǎn)擊區(qū)域是緊貼著文字邊緣的。前端可以通過很簡(jiǎn)單的方法來擴(kuò)大這個(gè)鏈接的可點(diǎn)擊區(qū)域，使得用戶更容易點(diǎn)中。這就是用戶體驗(yàn)，正如《瞬間之美》中提到的那樣，touch到用戶的內(nèi)心只需要一瞬間。對(duì)用戶體驗(yàn)的理解，還體現(xiàn)在對(duì)一些交互常識(shí)的把握上。比如用戶操作某個(gè)軟件的界面，會(huì)感覺它很靈巧，卻具體說不出到底是哪里。那么很可能是這個(gè)界面上的按鈕有著設(shè)計(jì)良好的四態(tài)（正常、鼠標(biāo)移上、鼠標(biāo)按下、不可用），它會(huì)隨時(shí)對(duì)你的操作給出反饋。

懂用戶體驗(yàn)的前端工程師，會(huì)讓他的作品與用戶溝通，能夠touch到用戶心中那一塊柔軟的區(qū)域。

FE需要有一點(diǎn)強(qiáng)迫癥。這體現(xiàn)在對(duì)任何瑕疵的不容忍。比如采用技術(shù)手段讓頁面的滾動(dòng)更平滑些，減少頁面的視覺抖動(dòng)，像素級(jí)別的定位校準(zhǔn)。當(dāng)用戶觸碰的內(nèi)容是一串非電話號(hào)碼的數(shù)字時(shí)，不要讓手機(jī)自動(dòng)調(diào)出撥號(hào)功能，等等。很多細(xì)節(jié)是產(chǎn)品經(jīng)理無法感知的，因?yàn)檫@些都是很零散的技術(shù)手段，只有靠FE來點(diǎn)滴積累。再有極致者，追求讓頁面的響應(yīng)時(shí)間再減少幾個(gè)毫秒，讓你的手機(jī)少耗幾KB流量，少耗一些電量。這些甚至連用戶都無法感知，但是當(dāng)你的用戶有百萬級(jí)別或者千萬級(jí)別，這樣做的價(jià)值就顯現(xiàn)出來了。

前端工程師需要是一個(gè)心思細(xì)膩之人，需要對(duì)美有所領(lǐng)悟，需要執(zhí)著地追求完美，需要有品味，有思想，有大局觀，最好還能懂點(diǎn)心理學(xué)。

用戶端業(yè)務(wù)邏輯

做出優(yōu)雅的界面只是前端工程師的第一步，編程也是必備技能，F(xiàn)E承擔(dān)著處理用戶端業(yè)務(wù)邏輯的任務(wù)。放在以前，用戶端就是個(gè)IE瀏覽器，沒有什么業(yè)務(wù)邏輯可言。但現(xiàn)在不同了，用戶使用瀏覽器發(fā)表文章、進(jìn)行社交活動(dòng)，更復(fù)雜的能使用在線工具完成工作。

javascript就是FE需要掌握的編程語言，他應(yīng)該通曉這門語言的優(yōu)勢(shì)和缺點(diǎn)，掌握各種編程思想、開發(fā)模式。利用各種技巧實(shí)現(xiàn)交互越來越豐富的界面，同時(shí)還要與服務(wù)端的工程師溝通，調(diào)試接口，完成：頁面展示——響應(yīng)用戶操作——提交用戶數(shù)據(jù)——反饋操作結(jié)果這一系列流程。

從這一點(diǎn)上，要求前端工程師要有軟件開發(fā)的基礎(chǔ)，了解計(jì)算機(jī)的基本原理，網(wǎng)絡(luò)通信的基本原理，所以計(jì)算機(jī)相關(guān)專業(yè)出身的前端會(huì)更有優(yōu)勢(shì)一些。

前端也需要架構(gòu)

寫寫網(wǎng)頁也要架構(gòu)？有什么好架的？回答這個(gè)問題首先得明確一點(diǎn)，F(xiàn)E的工作內(nèi)容已不再是「寫寫頁面」這么簡(jiǎn)單。隨著前端代碼的規(guī)模越來越大，逐漸涌現(xiàn)出了模塊化開發(fā)、MVC、MVVM等開發(fā)模式。團(tuán)隊(duì)規(guī)模也從原來的單兵作戰(zhàn)演變?yōu)閳F(tuán)隊(duì)開發(fā)。

所以，一個(gè)高級(jí)前端工程師，要有架構(gòu)能力。這個(gè)架構(gòu)能力包括不限于：

對(duì)現(xiàn)有優(yōu)秀框架的了解與整合使用

根據(jù)項(xiàng)目的業(yè)務(wù)特點(diǎn)構(gòu)建出合適的開發(fā)模式

設(shè)計(jì)前端測(cè)試方案保證代碼質(zhì)量

用工程化方案組織起團(tuán)隊(duì)的開發(fā)流程。

向前延伸、向后延伸

物聯(lián)網(wǎng)的市場(chǎng)越來越熱了，手機(jī)是物聯(lián)網(wǎng)體系中的一個(gè)關(guān)鍵節(jié)點(diǎn)。前端工程師的戰(zhàn)場(chǎng)已不再是單純的瀏覽器，將來會(huì)覆蓋到各種「端設(shè)備」上。得益于javascript語言的靈活性，現(xiàn)在用javascript已經(jīng)可以開發(fā)windows應(yīng)用、ios應(yīng)用、android應(yīng)用，可以編寫智能電視上的應(yīng)用。將來，或許是VR、可穿戴設(shè)備、智能家電。這是前端可以向前延伸的方向。

另一方面，由于nodejs的橫空出世，javascript這門語言竟然神奇的有了服務(wù)端的能力。之前用java、PHP做的事情，js同樣可以實(shí)現(xiàn)了。本來前端陣營(yíng)中就有一批人是從后端轉(zhuǎn)過來的，有服務(wù)端開發(fā)的基礎(chǔ)，得了nodejs這一利器，再加上現(xiàn)在市場(chǎng)的需求，快出產(chǎn)品，敏捷開發(fā)，前端工程師向后延伸的路線寬廣而明亮。事實(shí)上，全棧工程師的概念在前年就被提出，BAT這樣的業(yè)界領(lǐng)頭羊早已用nodejs做一些基礎(chǔ)設(shè)施的建設(shè)，而很多小而快的創(chuàng)業(yè)公司，也在用nodejs進(jìn)行快速迭代開發(fā)。

持續(xù)學(xué)習(xí)

前端領(lǐng)域的技術(shù)更新相對(duì)于其他領(lǐng)域要快很多，原因大概也是因?yàn)檫@個(gè)領(lǐng)域離用戶最近吧。有一些新的技術(shù)甚至是顛覆性的，前端工程師必須要跟上時(shí)代的步伐，否則你開發(fā)出的產(chǎn)品在體驗(yàn)上就落后別人一截了。

有一些市場(chǎng)人員提出的需求，產(chǎn)品經(jīng)理根據(jù)多年的經(jīng)驗(yàn)評(píng)估后覺得無法實(shí)現(xiàn)，就被打回了。而事實(shí)上，隨著新技術(shù)的出現(xiàn)，有些你認(rèn)為無法實(shí)現(xiàn)的功能已經(jīng)可以在前端實(shí)現(xiàn)了。隨著HTML5的支持度越來越高，前端擁有的能力也會(huì)越強(qiáng)。比如利用canvas能夠獲取到圖片上的每一個(gè)像素點(diǎn)，這樣前端就擁有了圖像處理能力。有了FileReader API，前端擁有了本地文件的讀取能力，還有地理位置獲取等等。

而這些新東西，就需要前端工程師來不斷學(xué)習(xí)。所以，一個(gè)稱職的前端必須能夠保持持續(xù)學(xué)習(xí)能力，能夠?qū)π录夹g(shù)有敏銳的嗅覺?；畹嚼?，學(xué)到老，說的就是前端工程師。

高情商的程序猿

大多數(shù)人對(duì)程序猿的印象就是情商低、不善言談。但前端工程師應(yīng)該是個(gè)例外，這是由工作性質(zhì)決定的。

從工作流程來看，F(xiàn)E處于設(shè)計(jì)師的下游，他要接設(shè)計(jì)稿，轉(zhuǎn)化為網(wǎng)頁。同時(shí)又是后端工程師的上游，需要把用戶產(chǎn)生的數(shù)據(jù)提交到服務(wù)端。橫向來看，他又與產(chǎn)品經(jīng)理有著密切接觸，因?yàn)樗赡茈S時(shí)和產(chǎn)品經(jīng)理探討交互的細(xì)節(jié)。這樣一個(gè)連接著團(tuán)隊(duì)中的其他成員的角色，需要他既是一個(gè)粘合劑，又是一個(gè)潤(rùn)滑劑。

前端工程師需要有較高的溝通能力和理解能力。我們經(jīng)常開玩笑說“設(shè)計(jì)師活在童話故事里”，因?yàn)橛袝r(shí)候他們?cè)O(shè)計(jì)的頁面根本不符合常規(guī)，無法實(shí)現(xiàn)。這個(gè)時(shí)候你就需要耐心的給設(shè)計(jì)MM講原理、講原因，并且告訴她設(shè)計(jì)需要遵循哪些基本規(guī)范。對(duì)于產(chǎn)品經(jīng)理的思想，你要能把握到位，你得理解他比劃了半天到底是想要做什么。與后端工程師打交道的時(shí)候，你又得馬上化身編程達(dá)人，跟他們聊數(shù)據(jù)類型，聊面向?qū)ο螅脑O(shè)計(jì)模式。

你需要能隨時(shí)切換角色，切換你的表達(dá)方式和談話內(nèi)容。所以，你得是一只高情商的程序員。

以上就是我對(duì)前端工程師的理解，前端的門檻低，但要成為一名專業(yè)的前端工程師，需要掌握的東西太多了。除了前端技術(shù)外，我認(rèn)為前端更重要的是綜合能力，包括我上面談到的思維細(xì)膩、有品味、有思想、情商高等等。畢竟你要通過代碼與用戶產(chǎn)生接觸，給用戶帶來愉悅感。從某種程度上來說，你得是一個(gè)好戀人。

最后：

“相信有很多想學(xué)前端的小伙伴，今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5等都有整理，送給每一位前端小伙伴，53763，1707這里是小白聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴?！?/p>

祝大家早日學(xué)有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。
責(zé)任編輯：wv