前端程序員的焦慮感從何而來？

隨著互聯(lián)網(wǎng)產(chǎn)品越來越多，用戶們必定也會(huì)不斷的索取更好的用戶體驗(yàn)，前端同學(xué)也會(huì)扮演著越來越重要的角色。責(zé)任越來越重，天花板就越來越高。

雖然前端的能力越來越強(qiáng)，技術(shù)棧要求也越來越高。但從工程角度出發(fā)，前端目前還處在一個(gè)較低的階級(jí)水平。

何謂前端工程

我剛畢業(yè)的時(shí)候，在一家創(chuàng)業(yè)公司做全棧，職稱是web開發(fā)工程師。當(dāng)時(shí)前后端未分離，而我內(nèi)心的工程，就是我手頭整個(gè)前后端工程代碼。

當(dāng)時(shí)對(duì)前端工程是沒有概念的，對(duì)我而言，前端就是js+css+html，它脫離了服務(wù)器就沒了意義。單把這些代碼拎出來，我也無法稱之為工程。

后來三大框架出現(xiàn)，前后端逐漸分離，開始出現(xiàn)“前端工程化”的概念。17年初時(shí)，曾面試過一家小創(chuàng)業(yè)公司，面試官問我前端工程化怎么做？當(dāng)時(shí)我回答：“前端工程化就是：代碼模塊化、功能組件化，打包、構(gòu)建、發(fā)布自動(dòng)化、流程化。”在后面的一年中，我的工程化概念，大致還是如此，可能還會(huì)加上一個(gè)開發(fā)規(guī)范。

在這個(gè)“工程化”概念下，我所認(rèn)為的“前端工程”，就是我眼前的“前端代碼”，它的最終目的是為用戶輸出前端頁面。我最關(guān)注的即是：如何更高效率、更高質(zhì)量的為用戶輸出體驗(yàn)更好、能力更多的頁面。 這些年前端coder圍繞著這點(diǎn)也做了很多：

高效率

ES6+
多端統(tǒng)一
接口管理與mocker
框架、工具庫、組件庫

高質(zhì)量

開發(fā)高質(zhì)量

git
code review
開發(fā)規(guī)范

線上質(zhì)量保證

監(jiān)控系統(tǒng)

應(yīng)急-快速回滾能力

更好的體驗(yàn)

多尺寸適配
小程序
高性能

能力更多

復(fù)雜交互
native能力
動(dòng)畫、游戲

當(dāng)然這其中也有一些交集，比如三大框架的出現(xiàn)既為高交互頁面提供了可能性，也提高了整體開發(fā)效率與質(zhì)量。比如圍繞高效率與高質(zhì)量會(huì)統(tǒng)一建設(shè)一個(gè)前端迭代管理系統(tǒng)，負(fù)責(zé)工程迭代、構(gòu)建、發(fā)布、回滾。

其實(shí)我也就隨便列列，有很多東西都沒涉及，但也能感受到這幾年前端領(lǐng)域的突飛猛進(jìn)。再站在現(xiàn)在這個(gè)時(shí)期，看前后端未分離的時(shí)期，那段后端兼職js、視覺兼職css的上古年代，確實(shí)不能稱前端代碼為“工程”，更不太好意思說前端程序員為“工程師”。這也難怪很多高校老師、后端同學(xué)不屑前端。

但立足現(xiàn)在，前端所涉及的范圍已經(jīng)遠(yuǎn)遠(yuǎn)超出了當(dāng)年，我們的“工程”復(fù)雜度與其能擁有的能力也超出當(dāng)年的想象。我們可以驕傲地說自己是一名前端工程師了。但我覺得，我們似乎離軟件工程師還差一點(diǎn)點(diǎn)。

前端工程師，首先是軟件工程師

在我們這里，業(yè)務(wù)需求所涉及的前端變更是需要做系統(tǒng)分析的，后端系統(tǒng)分析也是要參加的，這些涉及了上述所說種種。尤其是當(dāng)需求變更較大、波及較廣，甚至還同時(shí)涉及了多個(gè)系統(tǒng)間的遷移、升級(jí)、重構(gòu)，這其中的復(fù)雜度便會(huì)迅速上升。對(duì)于體量較大、用戶量較多的業(yè)務(wù)，這就是對(duì)工程師的一個(gè)考驗(yàn)了。

當(dāng)你不斷的經(jīng)歷這些挑戰(zhàn)，可能突然有一刻，會(huì)有種感覺：作為一名工程師，以前都只關(guān)注自己手頭的前端代碼，對(duì)于整個(gè)軟件系統(tǒng)工程的思考實(shí)在太少了。在這個(gè)軟件系統(tǒng)中，前端所涉及的工程扮演著哪些角色？哪些系統(tǒng)影響著它？它影響著哪些系統(tǒng)？它們的變更都會(huì)產(chǎn)生什么影響？

所以前端工程師，其作為一名軟件工程師，應(yīng)該從整個(gè)軟件系統(tǒng)工程去看。前端工程師不僅僅是完成自己的前端工程，而是完成了整個(gè)軟件系統(tǒng)中的一部分，它也不會(huì)脫離整個(gè)系統(tǒng)而獨(dú)立。而作為整個(gè)系統(tǒng)工程的一部分，前端工程要懂得去索取，懂得去影響，了解整體工程的能力與痛點(diǎn)，思考整體工程如何去提高。

這時(shí)候再來看這句話：前端工程師，先是軟件工程師。不知道大家能否多了一些體感。

前端地位低？

但如果我們從整個(gè)軟件工程來看，這時(shí)候我們就會(huì)意識(shí)到一個(gè)慘痛的事實(shí)：前端工程在整個(gè)系統(tǒng)工程中的地位太低了。在螞蟻，前端工程師往后走了一步，多了一層node層，在整體系統(tǒng)工程中擴(kuò)大了自身占比，還算好一些。而對(duì)于大多數(shù)只涉及web頁面工程的同學(xué)來說，望著這個(gè)巨大的軟件系統(tǒng)工程，即使有心，似乎也無力。

其實(shí)我覺得很多前端工程師是很厲害的。尤其是這幾年，越來越多的優(yōu)秀畢業(yè)生加入了前端。有時(shí)候我會(huì)覺得，前端的交互邏輯如此復(fù)雜，其對(duì)代碼水平的要求比后端大部分的業(yè)務(wù)場景高到不知道哪里去了。但純粹的代碼水平并無法決定前端工程的影響力。即使你能用0和1敲打出一個(gè)天花亂墜的頁面，那它也就是一個(gè)頁面。

前端工程在一個(gè)軟件系統(tǒng)中是處于最上游的（用戶入口）。因此，也就沒有其他系統(tǒng)需要調(diào)取前端系統(tǒng)的服務(wù)。在整個(gè)軟件系統(tǒng)中，前端對(duì)接的系統(tǒng)少，所影響的系統(tǒng)也少，工程地位低。不像后端，它既需要為前端提供能力，又需要問中后臺(tái)、數(shù)據(jù)層索取能力，也可能需要問其他業(yè)務(wù)后端索取能力，對(duì)接系統(tǒng)很多，工程地位自然也高。

由此又會(huì)導(dǎo)致，前端往往不是產(chǎn)品能否實(shí)現(xiàn)的決定性因素。在軟件系統(tǒng)中，需要上游系統(tǒng)調(diào)取下游系統(tǒng)服務(wù)。換言之，上游依托于下游。這自然而然的導(dǎo)致技術(shù)評(píng)估從下游開始。到前端評(píng)估時(shí)，已經(jīng)是最后一道坎了。而這一道坎，業(yè)務(wù)方往往是無論如何也得過的。如果坎比較高（交互視覺難以實(shí)現(xiàn)），最終也是通過降低交互復(fù)雜度與用戶體驗(yàn)，來保證產(chǎn)品功能先上。

有很多同學(xué)認(rèn)為前端對(duì)業(yè)務(wù)的參與度太低了。但我們自我感覺對(duì)業(yè)務(wù)參與度也挺高呀，我知道產(chǎn)品都有哪些頁面，都有哪些功能。但了解并不是參與，影響才是參與。前端的工程影響力以及業(yè)務(wù)影響力，導(dǎo)致了前端對(duì)業(yè)務(wù)的參與度本質(zhì)上是很低的。在這種情況下，說白了，很多前端只是流水線工人。視覺稿來了，實(shí)現(xiàn)它。實(shí)在實(shí)現(xiàn)不了，打回?fù)Q一份更簡單的視覺稿?？刹桓市淖鲆粋€(gè)流水線工人啊，似乎都能看到年紀(jì)大了以后被裁員的結(jié)局。那這又該怎么辦呢？

前端的焦慮

前端仿佛一直處在焦慮當(dāng)中。前兩年我們的主要矛盾是日益爆發(fā)的前端新技術(shù)同前端程序員學(xué)不動(dòng)之間的矛盾。而這一兩年前端技術(shù)棧趨于穩(wěn)定，輪子相對(duì)也少了。加上前端程序員也比較拼，學(xué)不動(dòng)的感覺也隨著無數(shù)個(gè)夜晚的學(xué)習(xí)而漸漸逝去。

這時(shí)候前端又開始了新的焦慮，前端的天花板是不是太低？工資是不是沒后端高？前端開發(fā)的壁壘在哪里？我認(rèn)為我們的主要矛盾已經(jīng)發(fā)生了變化，變成了前端日益增長的工程地位訴求同前端工程局限性之間的矛盾。

聰明或勤奮，再加上時(shí)間的積累，總是能解決“學(xué)不動(dòng)”的問題的。但前端工程地位訴求怕是自身再怎么努力也不一定能解決的。解決當(dāng)下前端焦慮的辦法只能是打破前端工程局限，增加前端工程影響力，拔高其工程地位。最終讓前端人員也能在軟件系統(tǒng)工程中當(dāng)家做主，平等的參與到軟件系統(tǒng)建設(shè)當(dāng)中。

只有前端崛起，前端工程師才能擺脫焦慮，而這不是一兩個(gè)人的戰(zhàn)斗，需要大家一起去努力實(shí)現(xiàn)。

前端工程師的進(jìn)階

能從現(xiàn)有工程中發(fā)現(xiàn)痛點(diǎn)，創(chuàng)造出一個(gè)系統(tǒng)或服務(wù)，提高效能、促進(jìn)業(yè)務(wù)出成果。典型的如Node層，利用node服務(wù)端能力，搭建一層為前端服務(wù)的BFF層。于是便在一個(gè)軟件系統(tǒng)工程中，硬生生造出一層系統(tǒng)，拓展了前端工程師的工程地盤。

遠(yuǎn)交近攻

在一個(gè)系統(tǒng)工程中，我們多做了一部分工作，自然就有人少做了一部分?，F(xiàn)在我們無中生有的，是人家不愿意做的“臟活累活”。如果我需要侵占下游的核心能力時(shí)，他們便不一定讓步了。這時(shí)候我們可以采取“遠(yuǎn)交近攻”。如果我們能直接對(duì)接下游的下游，同時(shí)又能擁有下游的能力。那我們下游還有什么存在的意義呢？現(xiàn)在流行的FaaS似乎就給我們提供了一個(gè)idea、亦或者就是個(gè)契機(jī)。

反客為主

前端雖然是上游系統(tǒng)，但可以通過提高自身工程能力，主動(dòng)地放大業(yè)務(wù)可能性。將可能性的瓶頸下拋，進(jìn)而促進(jìn)下游系統(tǒng)提高自身能力。化被動(dòng)為主動(dòng)，改接受為影響，進(jìn)而提高自身工程地位。典型的如小程序。小程序最初是由客戶端同學(xué)去實(shí)現(xiàn)，最開始其實(shí)也是致力于平臺(tái)生態(tài)問題。因其技術(shù)?；九c前端契合，極大了利好了前端開發(fā)者（而不是客戶端開發(fā)）。

前端開發(fā)同學(xué)瘋狂涌入后，一方面做了非常多基建工作，極大提高了小程序開發(fā)效率。另一方面，大量的小程序讓業(yè)務(wù)看到小程序的無限可能。進(jìn)而對(duì)小程序本身能力也多了很多訴求，如微信小程序支持了Npm包。社區(qū)里，前端程序員在小程序建設(shè)上不斷努力，如今說到小程序，大家似乎都在夸前端厲害。

相信隨著無數(shù)優(yōu)秀的前端同學(xué)不斷的奮斗，幾年以后的前端工程師必然又是另外一番成就。希望屆時(shí)，我們可以驕傲的稱自己為一名軟件工程師。我們依舊會(huì)不斷學(xué)習(xí)，但學(xué)習(xí)的背后不再是因?yàn)榻箲]，而是純粹對(duì)于工程與代碼的熱愛~

加油吧前端程序員們！

自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎么學(xué)，方法有沒有？

沒錯(cuò)，年初我花了一個(gè)多月的時(shí)間整理出來的學(xué)習(xí)資料，希望能幫助那些想學(xué)習(xí)前端，卻又不知道怎么開始學(xué)習(xí)的朋友。

這里推薦一下我的前端學(xué)習(xí)交流q-u-n：784783012，里面都是學(xué)習(xí)前端的從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計(jì)模式】到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴。2019最新技術(shù)，與企業(yè)需求同步。好友都在里面學(xué)習(xí)交流，每天都會(huì)有大牛定時(shí)講解前端技術(shù)!

點(diǎn)擊： 加入