我第一次通過軟件賺錢是在2008年。
當(dāng)時(shí),我為當(dāng)?shù)氐囊患倚」緲?gòu)建了一個(gè) WordPress 網(wǎng)站,時(shí)薪是25美元。開發(fā)軟件是我的業(yè)余愛好,當(dāng)我發(fā)現(xiàn)愛好居然能夠賺錢時(shí),我興奮不已。最后,我用這筆外快購(gòu)買了自己的第一臺(tái)相機(jī)。
時(shí)間來到2018年。在灣區(qū),剛畢業(yè)的初級(jí)前端工程師基本年薪已經(jīng)達(dá)到了6位數(shù)。至于那些有幾年工作經(jīng)驗(yàn)的前端工程師,F(xiàn)ANG 公司(Facebook、Apple、Netflix、Google 等)開出的薪酬可達(dá)40萬(wàn)美元。初創(chuàng)企業(yè)或者西雅圖和紐約的科技公司給出的待遇也差不了多少。
那么,前端工程師工資如此之高的原因是什么?甚至有很多人眼紅、質(zhì)疑前端工程師,認(rèn)為他們不能稱為軟件工程師。以下是我學(xué)習(xí)和工作經(jīng)歷,從一個(gè)前端菜鳥成長(zhǎng)為一個(gè)10人前端團(tuán)隊(duì)的主管。
什么是“前端工程師”?
“前端”是指軟件的表現(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í)施。他們?cè)谠擃I(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)域。
最顯眼的工作
作為一名前端工程師,弊端很明顯。
按鈕無法點(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ā)人員,他們往往是最能把握用戶需求的人。
UI 實(shí)現(xiàn)并非易事
具有良好 UI 效果的產(chǎn)品能夠更容易獲得用戶的信任。信任度會(huì)直接轉(zhuǎn)化為收入,網(wǎng)站頁(yè)面的加載時(shí)間每增加一秒就會(huì)丟失10%的用戶。
前端工程師竭盡全力對(duì)加載時(shí)間進(jìn)行毫秒級(jí)的縮減,就像波音公司的工程師減輕飛機(jī)重量一樣。例如,Stripe Billing 的主頁(yè)在移動(dòng)3G網(wǎng)絡(luò)下的加載時(shí)間不到1秒。下載到你設(shè)備中的數(shù)據(jù)包比谷歌主頁(yè)的還小,它是出了名的輕量級(jí)網(wǎng)站。那么,它是如何在頁(yè)面中嵌入高分辨率視頻的呢?
當(dāng)你仔細(xì)觀察開發(fā)人員工具時(shí),你會(huì)看到“視頻”只是簡(jiǎn)單的 HTML,網(wǎng)站將它們精心組合在一起并使用 CSS 進(jìn)行動(dòng)畫處理。HTML 和 CSS 比視頻輕量級(jí)得多,因?yàn)樗鼈冎皇歉嬖V瀏覽器如何呈現(xiàn) UI 的文本指令。無論屏幕尺度分辨率如何,該技術(shù)都可以呈現(xiàn)很好的效果。即使放大界面,視頻依然很清晰。這項(xiàng)工程能夠提供很好的用戶體驗(yàn)。
性能只是優(yōu)秀 UI 效果的眾多方面之一。
用戶在移動(dòng)設(shè)備上逗留的時(shí)間最長(zhǎng),那么如何在移動(dòng)設(shè)備上提供更好的 UI 效果呢?前端工程師可以針對(duì)4種尺寸的 iPhone 和數(shù)百種尺寸的 Android 手機(jī)適配 UI,而無需為每種尺寸的設(shè)備構(gòu)建單獨(dú)的 UI。對(duì)于中國(guó)的14億用戶怎么辦呢?前端工程師可以構(gòu)建國(guó)際化框架,以便翻譯人員可以輕松將應(yīng)用程序翻譯成其他語(yǔ)言。想要具有包容性并遵守 ADA 可訪問性標(biāo)準(zhǔn)嗎?前端工程師可以讓用戶通過鍵盤和屏幕閱讀器訪問整個(gè)應(yīng)用程序。應(yīng)用程序的眾多受眾和環(huán)境使前端工程師的工作變得困難。然而學(xué)校并沒有教授這些技能,前端工程師不得不持續(xù)學(xué)習(xí),用最新的技術(shù)來應(yīng)對(duì)不斷變化的平臺(tái)。
前端人員不僅僅是工程師
一致性是優(yōu)秀 UI 的另一個(gè)重要方面。誰(shuí)在乎一個(gè)按鈕邊框是1像素,而另一個(gè)按鈕邊框是2像素?我經(jīng)常會(huì)和朋友們一起討論這個(gè)問題,不論他們是工程師與否。我的導(dǎo)師Charles d'Harcourt 說得最好——當(dāng)用戶發(fā)現(xiàn)界面元素沒有滿足他們的預(yù)期時(shí),他們就會(huì)失去對(duì)該產(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ì)直覺和用戶共鳴很難量化。對(duì)于我曾經(jīng)合作過的許多優(yōu)秀的前端工程師來說,這兩者已經(jīng)深入他們的靈魂。前端工程師接受的教育往往是跨學(xué)科的。他們喜歡顛覆已經(jīng)被精心設(shè)計(jì)的產(chǎn)品。他們還有充滿創(chuàng)造性和藝術(shù)性的愛好。有些學(xué)校,比如斯坦福大學(xué),會(huì)教授藝術(shù)與工程的融合。關(guān)于設(shè)計(jì)直覺和用戶共鳴的教授方法,我很樂意聽取大家的意見。
高效前端團(tuán)隊(duì)造價(jià)高昂
盡管我熱愛前端工作,但我并不認(rèn)為僅僅靠一個(gè)優(yōu)秀的 UI 就可以讓產(chǎn)品變得偉大。讓產(chǎn)品變得偉大的核心因素在于:真正解決用戶的問題。Craigslist 就是一個(gè)典型的例子,它采用極其簡(jiǎn)單的以文本為中心的 UI。
如果你想打造一支優(yōu)秀的團(tuán)隊(duì),那么首先得問問自己,你是否希望并且能夠根據(jù) UI 區(qū)分你的業(yè)務(wù)。
像所有最優(yōu)秀的其他工程師一樣,優(yōu)秀的前端工程師只對(duì)偉大的產(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ì)需要提供充滿競(jìng)爭(zhēng)力的薪酬。
盡管也有例外,比如那個(gè)熱衷和你一起做開源項(xiàng)目的高手可能期望薪酬只有 Facebook 的一半。當(dāng)然也有一些優(yōu)秀的前端工程師并不要求硅谷級(jí)別的待遇。但這畢竟是小概率事件,為前端工程師設(shè)置過低的薪酬存在風(fēng)險(xiǎn)。因?yàn)閱T工流動(dòng)成本很高,不能順利完成產(chǎn)品的風(fēng)險(xiǎn)將導(dǎo)致更多問題,其消耗的預(yù)算也更多,有些得不償失。