一位Web前端工程師的自述

我第一次通過軟件賺錢是在2008年。

當(dāng)時(shí)，我為當(dāng)?shù)氐囊患倚」緲?gòu)建了一個(gè) WordPress 網(wǎng)站，時(shí)薪是25美元。開發(fā)軟件是我的業(yè)余愛好，當(dāng)我發(fā)現(xiàn)愛好居然能夠賺錢時(shí)，我興奮不已。最后，我用這筆外快購買了自己的第一臺(tái)相機(jī)。

時(shí)間來到2018年。在灣區(qū)，剛畢業(yè)的初級前端工程師基本年薪已經(jīng)達(dá)到了6位數(shù)。至于那些有幾年工作經(jīng)驗(yàn)的前端工程師，F(xiàn)ANG 公司（Facebook、Apple、Netflix、Google 等）開出的薪酬可達(dá)40萬美元。初創(chuàng)企業(yè)或者西雅圖和紐約的科技公司給出的待遇也差不了多少。

那么，前端工程師工資如此之高的原因是什么？甚至有很多人眼紅、質(zhì)疑前端工程師，認(rèn)為他們不能稱為軟件工程師。以下是我學(xué)習(xí)和工作經(jīng)歷，從一個(gè)前端菜鳥成長為一個(gè)10人前端團(tuán)隊(duì)的主管。

1

什么是“前端工程師”

“前端”是指軟件的表現(xiàn)層或者用戶界面（UI）。前端工程師主要使用 Web 技術(shù)實(shí)現(xiàn)UI。前端工程師與 Web 開發(fā)人員的主要區(qū)別在于，前者需要構(gòu)建交互式應(yīng)用程序，而后者主要構(gòu)建專注于內(nèi)容的網(wǎng)站。如果前端工程師從事 iOS 等其他平臺(tái)的開發(fā)工作，他們可能被稱為 UI 工程師或者 iOS 工程師。如果開發(fā)過程非常重視設(shè)計(jì)，他們也可能被稱為 UX 工程師。

從我自己的經(jīng)驗(yàn)來講，我堅(jiān)信最優(yōu)秀的前端工程師應(yīng)當(dāng)專注于 UI 的實(shí)施。他們在該領(lǐng)域磨練自己的技藝，并且不斷學(xué)習(xí)最新的 UI 技術(shù)。全棧工程師需要做前端工作，非常適合在小團(tuán)隊(duì)中從0到1構(gòu)建產(chǎn)品。全棧工程師無法兼具前端工程師、后端工程師、可靠性工程師和數(shù)據(jù)分析師。

如今軟件技術(shù)的每個(gè)細(xì)分領(lǐng)域都得到高度發(fā)展，追尋技術(shù)的廣度使得全棧工程師無法真正深入某個(gè)領(lǐng)域。

2

最顯眼的工作

作為一名前端工程師，弊端很明顯。

按鈕無法點(diǎn)擊？找前端。搜索結(jié)果不滿意？即使是源數(shù)據(jù)的問題，用戶也認(rèn)為是前端的錯(cuò)。用戶只會(huì)上報(bào)那些他們看到的錯(cuò)誤。前端工程師開發(fā)的東西就是被用戶所見的，因此一切都是前端的錯(cuò)。作為前端工程師，很難向用戶解釋清楚。用戶不關(guān)心問題是否與數(shù)據(jù)或者 API 服務(wù)有關(guān)，他們只知道在瀏覽器中搜索蘋果，那么搜索結(jié)果就應(yīng)該是蘋果的照片。

軟件工程師最主要的時(shí)間不是用來寫代碼，這可能會(huì)讓你非常吃驚。實(shí)際上，他們把更多的精力花在了溝通上。前端工程師是離用戶最近的開發(fā)人員，他們往往是最能把握用戶需求的人。

3

UI實(shí)現(xiàn)并非易事

具有良好 UI 效果的產(chǎn)品能夠更容易獲得用戶的信任。信任度會(huì)直接轉(zhuǎn)化為收入，網(wǎng)站頁面的加載時(shí)間每增加一秒就會(huì)丟失10%的用戶。

前端工程師竭盡全力對加載時(shí)間進(jìn)行毫秒級的縮減，就像波音公司的工程師減輕飛機(jī)重量一樣。例如，Stripe Billing 的主頁在移動(dòng)3G網(wǎng)絡(luò)下的加載時(shí)間不到1秒。下載到你設(shè)備中的數(shù)據(jù)包比谷歌主頁的還小，它是出了名的輕量級網(wǎng)站。那么，它是如何在頁面中嵌入高分辨率視頻的呢？

當(dāng)你仔細(xì)觀察開發(fā)人員工具時(shí)，你會(huì)看到“視頻”只是簡單的 HTML，網(wǎng)站將它們精心組合在一起并使用 CSS 進(jìn)行動(dòng)畫處理。HTML 和 CSS 比視頻輕量級得多，因?yàn)樗鼈冎皇歉嬖V瀏覽器如何呈現(xiàn) UI 的文本指令。無論屏幕尺度分辨率如何，該技術(shù)都可以呈現(xiàn)很好的效果。即使放大界面，視頻依然很清晰。這項(xiàng)工程能夠提供很好的用戶體驗(yàn)。

性能只是優(yōu)秀 UI 效果的眾多方面之一。

用戶在移動(dòng)設(shè)備上逗留的時(shí)間最長，那么如何在移動(dòng)設(shè)備上提供更好的 UI 效果呢？前端工程師可以針對4種尺寸的 iPhone 和數(shù)百種尺寸的 Android 手機(jī)適配 UI，而無需為每種尺寸的設(shè)備構(gòu)建單獨(dú)的 UI。對于中國的14億用戶怎么辦呢？前端工程師可以構(gòu)建國際化框架，以便翻譯人員可以輕松將應(yīng)用程序翻譯成其他語言。想要具有包容性并遵守 ADA 可訪問性標(biāo)準(zhǔn)嗎？前端工程師可以讓用戶通過鍵盤和屏幕閱讀器訪問整個(gè)應(yīng)用程序。應(yīng)用程序的眾多受眾和環(huán)境使前端工程師的工作變得困難。然而學(xué)校并沒有教授這些技能，前端工程師不得不持續(xù)學(xué)習(xí)，用最新的技術(shù)來應(yīng)對不斷變化的平臺(tái)。

4

前端人員不僅僅是工程師

一致性是優(yōu)秀 UI 的另一個(gè)重要方面。誰在乎一個(gè)按鈕邊框是1像素，而另一個(gè)按鈕邊框是2像素？我經(jīng)常會(huì)和朋友們一起討論這個(gè)問題，不論他們是工程師與否。我的導(dǎo)師Charles d‘Harcourt 說得最好——當(dāng)用戶發(fā)現(xiàn)界面元素沒有滿足他們的預(yù)期時(shí)，他們就會(huì)失去對該產(chǎn)品的信任。他在許多明星產(chǎn)品上一次又一次地強(qiáng)調(diào)這一點(diǎn)，比如WebObject、iTunes和Chrome。

前端工程師不僅僅是工程師，他們利用自己的設(shè)計(jì)直覺和用戶共鳴提升用戶界面的人性化。在我看來，這一點(diǎn)將使那些杰出的前端工程師從普通工程師中脫穎而出。而在日常工作中，前端工程師需要與產(chǎn)品經(jīng)理和設(shè)計(jì)師進(jìn)行良好協(xié)作，需要平衡需求和實(shí)施難度，以滿足用戶需求，并以最少的審核周期解決錯(cuò)誤和不一致問題。

設(shè)計(jì)直覺和用戶共鳴很難量化。對于我曾經(jīng)合作過的許多優(yōu)秀的前端工程師來說，這兩者已經(jīng)深入他們的靈魂。前端工程師接受的教育往往是跨學(xué)科的。他們喜歡顛覆已經(jīng)被精心設(shè)計(jì)的產(chǎn)品。他們還有充滿創(chuàng)造性和藝術(shù)性的愛好。有些學(xué)校，比如斯坦福大學(xué)，會(huì)教授藝術(shù)與工程的融合。關(guān)于設(shè)計(jì)直覺和用戶共鳴的教授方法，我很樂意聽取大家的意見。

5

高效前端團(tuán)隊(duì)造價(jià)高昂

盡管我熱愛前端工作，但我并不認(rèn)為僅僅靠一個(gè)優(yōu)秀的 UI 就可以讓產(chǎn)品變得偉大。讓產(chǎn)品變得偉大的核心因素在于：真正解決用戶的問題。Craigslist 就是一個(gè)典型的例子，它采用極其簡單的以文本為中心的 UI。

如果你想打造一支優(yōu)秀的團(tuán)隊(duì)，那么首先得問問自己，你是否希望并且能夠根據(jù) UI 區(qū)分你的業(yè)務(wù)。

像所有最優(yōu)秀的其他工程師一樣，優(yōu)秀的前端工程師只對偉大的產(chǎn)品或者擁有前端大牛的團(tuán)隊(duì)感興趣。那么，你是否擁有優(yōu)秀的 UI 產(chǎn)品，是否擁有前端大牛？Stripe 已經(jīng)擁有了優(yōu)秀的 UI，并且其前端團(tuán)隊(duì)非常強(qiáng)大，因此它才能吸引 FANG 公司以及各大名校的前端人才。

如果你雇用最優(yōu)秀的人才并為他們支付行業(yè)最高的薪酬，那么這些優(yōu)秀人才為你的業(yè)務(wù)帶來的收益可能會(huì)遠(yuǎn)遠(yuǎn)超過你在人才方面的支出?！狽etflix 首席人才官 Patty McCord，關(guān)于如何招聘

打造一個(gè)高效的前端團(tuán)隊(duì)需要提供充滿競爭力的薪酬。

盡管也有例外，比如那個(gè)熱衷和你一起做開源項(xiàng)目的高手可能期望薪酬只有 Facebook 的一半。當(dāng)然也有一些優(yōu)秀的前端工程師并不要求硅谷級別的待遇。但這畢竟是小概率事件，為前端工程師設(shè)置過低的薪酬存在風(fēng)險(xiǎn)。因?yàn)閱T工流動(dòng)成本很高，不能順利完成產(chǎn)品的風(fēng)險(xiǎn)將導(dǎo)致更多問題，其消耗的預(yù)算也更多，有些得不償失。