摘要：移動端迅猛發(fā)展的前期，和這樣的終端開發(fā)才是這個社會的主流，前端開發(fā)受限于網(wǎng)絡(luò)速度和沒有統(tǒng)一的標(biāo)準(zhǔn)，還是不受重視。同時，網(wǎng)絡(luò)的普及，也讓前端也正式邁入了移動端的開發(fā)。在可預(yù)見的將來，前端受益于靈活的部署和安裝，在移動端開發(fā)中比例會逐漸加重。

剛好周末和朋友聊起“前端從受鄙視到變得重要”這個話題，感慨前端這四年來的發(fā)展，遂有本文。

毋庸諱言，在我剛工作的時候，前端是還是一個不受重視的崗位。切圖狗，寫網(wǎng)頁的這種侮辱性綽號綁在前端開發(fā)身上。我自己體驗到的一個很明顯的標(biāo)志是：招聘網(wǎng)站上，前端開發(fā)的工資是其他開發(fā)工資的90%甚至更低。

在知乎一個2011年的前端地位問題（《如何改善國內(nèi)前端開發(fā)行業(yè)的尷尬地位？》）中，包括賀師俊老師都承認(rèn)這種尷尬確實存在。但是，30年河?xùn)|30年河西，到了2018年，前端已經(jīng)成了熾手可熱的崗位。現(xiàn)在如果開一家科技公司或者組建自己的一個團(tuán)隊，要是還沒有自己的前端，那我只能說你這家公司還不上臺面。包括最近今日頭條和拼多多在瘋狂招人，前端也是最需要的崗位之一。

究竟是什么原因，導(dǎo)致前端在短短的幾年時間里，從一個受盡白眼的菜雞坑，一躍而成為一個重要的、被廣泛需求的開發(fā)崗位？這種被重視的情況能存在多久？紅利下又有什么樣的隱憂？前端開發(fā)應(yīng)該如何發(fā)展自己才能成為TOP5？本文將根據(jù)我自己的思考回答這些問題，也非常非常歡迎大家留言探討。

注：本文中的前端都是指H5開發(fā)，非大前端，不包含iOS和Android終端開發(fā)。

應(yīng)用設(shè)備：PC
技術(shù)棧：LAMP

這一時期也是前端最被鄙視的時期——坦白說，就沒有什么前端概念——在這一時期，前端是被一群人瓜分的：設(shè)計師通過DreamWare來做頁面，應(yīng)用開發(fā)和后臺開發(fā)通過JSP、PHP來做。路人甲乙丙丁，是個人就能來前端插一腳。業(yè)務(wù)邏輯都放在后臺，頁面上沒什么動效，也沒有高大上的交互。最慘的是，前端大量依賴后端去實現(xiàn)，要想混出個頭必須要會PHP或者JAVA，不然命根子在別人手上，簡直寸步難行。

這一階段的技術(shù)棧是LAMP(Linux+Apache+Mysql+PHP)?？催@些名詞就知道，那個時期的前端，真的和前端沒什么關(guān)系。被鄙視也是正常的。

這段時期對應(yīng)著我的大學(xué)時光，那時候，我就就是靠著JAVA+JSP+模板網(wǎng)站上隨便下個UI模板，混日子做網(wǎng)站，賺得了第一桶金。

這一階段其實可以分成兩部分來說，一部分是MVC時代，一部分是MVVM時代。

應(yīng)用設(shè)備：主要是PC，少量的移動端界面
技術(shù)棧：AJAX，JQuery, CMD/AMD，Grunt/Gulp

當(dāng)有了AJAX之后，前端終于能和后端做解耦了。同時，因為PC的普及和網(wǎng)絡(luò)性能的提升，人們也希望網(wǎng)頁能有更好的用戶體驗。MVC框架應(yīng)運而生，不過，受限于各種自我放飛的瀏覽器，前端能做的事情仍然少的可憐。

這個時候的技術(shù)棧是JQuery庫，那時候會JQuery就代表會前端，要是你還讀過JQuery源碼：“哇，兄弟你屌了，哪里高就啊？”

不過大部分的前端工作都是在做瀏覽器兼容，直到現(xiàn)在，我一想起IE還能瞬間舉出幾個IE6，7，8的坑。現(xiàn)在的新人可能還不能深刻的這些兼容性讓前端工程師有多么抓狂。舉個例子，直到2017年，我去參加JSConfig大會，還有個公司把只支持Chrome瀏覽器作為一項福利寫在用人告示上。

在這個時代，設(shè)計師和后臺已經(jīng)開始放棄前端了，不過我猜怕麻煩的心勝過了對技術(shù)的畏懼，因為我不止聽一個人說過：讓我寫CSS/瀏覽器兼容，我頭就疼。

MVC時代的后期，前端逐漸開始有了一點工程化的影子: 模塊化編程有CMD/AMD，構(gòu)建有Grunt/Gulp，編碼約定有Jslint/jshint。我們終于不是在一個JS文件里面寫寫寫了，你以為可以翻身農(nóng)奴把歌唱了？并不是。

移動端迅猛發(fā)展的前期，iOS和Android這樣的終端開發(fā)才是這個社會的主流，前端開發(fā)受限于網(wǎng)絡(luò)速度和沒有統(tǒng)一的Html標(biāo)準(zhǔn)，還是不受重視。

應(yīng)用設(shè)備：移動端，PC端
技術(shù)棧：Angularjs，React，Vue，ES6，HTML5，CSS3，Webpack, PostCss，F(xiàn)lexible, Viewport，ESlint

Chrome V8引擎的出現(xiàn)、H5和ES6標(biāo)準(zhǔn)的實施，補(bǔ)齊了前端最后一塊短板。前端可以肆無忌憚的彰顯自己的存在感：更炫酷的人機(jī)交互，更流暢的用戶體驗。同時，4G網(wǎng)絡(luò)的普及，也讓前端也正式邁入了移動端的開發(fā)。

如果說在MVC時代終于體會到前端也算博大精深（主要是前端的優(yōu)化和兼容，代表人物張鑫旭），那么在MVVM時代則真正體會到了前端的魅力。

不同的框架和新技術(shù)如同雨后春筍一樣瘋狂涌現(xiàn)。作為一個前端，尚不敢說自己掌握了所有的技術(shù)，更勿論其他開發(fā)了。前端和其他開發(fā)之間第一次有了鮮明的壁壘：其他開發(fā)當(dāng)然也可以來做前端，不過要想做的好，學(xué)習(xí)代價大到令人發(fā)指——而這往往是不能被接受的。

在這個時期，前端也不甘心只做個頁面或者移動網(wǎng)站，做了很多的類APP嘗試，諸如PWA，微信小程序。前端開始正式侵吞終端開發(fā)的生存空間。

應(yīng)用設(shè)備：服務(wù)器
技術(shù)棧：Express, Koa, Eggjs

單做前端，終究要受到服務(wù)器的限制。Node的出現(xiàn)令前端開發(fā)擁有了控制服務(wù)器的能力。正式宣布廣大前端開發(fā)向接入層邁進(jìn)，搶了應(yīng)用開發(fā)的飯碗。

當(dāng)然之前有些前端開發(fā)也會PHP，但是偏PHP的那叫應(yīng)用開發(fā)。現(xiàn)在，使用同樣的JS就能控制服務(wù)器，更不用提Node在SSR上的先發(fā)優(yōu)勢（PHP使用js擴(kuò)展也能做，不過我想只有應(yīng)用開發(fā)才會干這事）。前端控制了接入層之后，后端徹底淪為了前端的接口提供方。之前的跨域，gzip壓縮這種求爺爺告奶奶的事情，自己就可以完成了。

可以說，Node拓展了前端的地盤，這時候，前端也不再被稱之為前端，而是改稱全棧開發(fā)。

應(yīng)用設(shè)備：全部終端，服務(wù)器

移動手機(jī)的普及讓iOS和Andriod為首的終端開發(fā)享受到了紅利，而隨著5G網(wǎng)絡(luò)的推進(jìn)和[PWA][3]被支持，前端開發(fā)也將迎來最大的一波紅利。在可預(yù)見的將來，前端受益于靈活的部署和安裝，在移動端開發(fā)中比例會逐漸加重。

我甚至認(rèn)為，前端會成為終端開發(fā)的最終解決方案，包括但不限于手機(jī)，電視，車載中控等等。

項目 = 前端 + 大數(shù)據(jù)/AI

上面說到過，前端不僅現(xiàn)在火爆，而且還將在繼續(xù)火爆的路上走很久。但是在前端開發(fā)技術(shù)的提升上，我也會遇到了很多的問題，具體如下。

毋庸置疑，會使用某項技術(shù)當(dāng)然是最重要的。但是，如果在學(xué)習(xí)技術(shù)的時候，如果只停留在學(xué)會使用的層面，是遠(yuǎn)遠(yuǎn)不夠的。

只學(xué)習(xí)表面的使用，首先是很容易忘記，其次是遇到了問題不能迅速解決或者定位。整個人都會產(chǎn)生一種明明用過，但是實際上一問三不知的感覺。

就我自身而言，我最討厭的一種感覺是：

A: 聽說你用過XX？
B：嗯
A：那你能我講講它的XX邏輯嗎？為什么要這么寫，我沒看懂哎
B：(⊙o⊙)…

而且現(xiàn)在框架和組件太多，浮在表面的另一個壞處是對各種框架和組件都了解不深，在技術(shù)選型時會遇到迷茫的抉擇。

當(dāng)我們?nèi)ソ佑|一項新技術(shù)的時候，有時候會覺得文檔晦澀難懂，怎么看也很難看懂。排除小概率文檔確實不咋地的情況，大部分情況是我們?nèi)鄙倭诉@部分的知識體系基礎(chǔ)。

舉個很簡單的例子，去補(bǔ)充一個完成了一部分的拼圖，一定比拼一個完全空白的拼圖容易。

如果回顧一下前端這些年的技術(shù)棧，你會發(fā)現(xiàn)前端的技術(shù)更新是最快的（遠(yuǎn)快于其他各端開發(fā)）。如果難以接受新技術(shù)，就會大大降低自身的價值，我想這是作為一個有夢想的工程師都難以接受的。

注：前端技術(shù)更新快的原因：

零歷史負(fù)擔(dān)：代碼隨時可以更新，無需像終端那樣等審核，也無需像后臺那樣要支持多個業(yè)務(wù)不能隨便變。

硬件更新帶來的紅利：瀏覽器性能的提升，移動手機(jī)的普及，4G網(wǎng)絡(luò)的應(yīng)用，前端網(wǎng)頁有大量的需求

更廣的技術(shù)范圍：前端H5, 接入層Node。相比起來終端開發(fā)和后臺開發(fā)都只有自己的一畝三分地。

談問題只能發(fā)現(xiàn)不足，有策略才能不斷提高。論壇上也經(jīng)常也能看到如何有效的提高自己的問題，這時候就有人跳出來說“看源碼”。我完全不否認(rèn)看源碼的作用——實際上我覺得看源碼是質(zhì)變的一種方式——但是，提升不僅僅只有看源碼一條路，實際上當(dāng)基礎(chǔ)不牢的時候看源碼是完全看不懂的。所以要根據(jù)自身情況，在不同的階段選擇不同的策略。

這一塊我覺得是最重要的。在我們開始學(xué)習(xí)、工作之前，或者是學(xué)習(xí)、工作了一段時間之后，審視自己，確定自己的層次，給自己制定一個合適的提升策略才是關(guān)鍵。明確定位應(yīng)該不斷的被提起，通過對業(yè)界，對自己的反思，才能理清自己進(jìn)步和努力的方向。

當(dāng)理清了自身的定位時，如何前進(jìn)，向哪里前進(jìn)就成了另外一個問題。自己是很難形成技術(shù)品味的，要有更多的輸入，包括但不限于上文的閱讀源碼和博客，才能形成自己的技術(shù)品味，也從而知道自己該前進(jìn)的方向。

認(rèn)真對待自己遇到的每一個問題，從不輕易放過，嘗試結(jié)合原理從自己的理解去解釋問題。每解決一個問題，就是對原理的又一次深入理解。幾次三番之后，即使遇到自己沒有遇到過的問題，也可以舉一反三，事半功倍。

這個部分和第二步是不分先后的，二者交替進(jìn)行。

我之前經(jīng)常會遇到感覺自己已經(jīng)完全弄清楚了某件事情，但是過了一段時間，再去看的時候又忘記了。這有兩個原因：

之前理解的并不深入，如果自己深究，還是有不理解的地方

記憶確實遺忘了

解決這個的方法就是多做總結(jié)。總結(jié)的過程也是一個反思的過程，這時候更能清晰的梳理自己的思路，然后把自己的閃光點記錄下來。從而達(dá)到深入理解和備忘的兩個功效。

如果是堅持不下來可以找個朋友采用對賭方案，每次不寫就扣個幾百塊，我自身的親身體驗，有奇效……另外，因為隔一段時間就要寫博客，也促使自己一直在留意和反思日常的工作，簡直一舉兩得。

這一塊我也是單純有個想法。我遇到的大牛，不僅對自己的領(lǐng)域非常了解，對其他的領(lǐng)域也有所認(rèn)知。這是一種深層次的幫助——通過理解別的領(lǐng)域的方案，從而反哺自身。所以學(xué)習(xí)其他的語言，研究其他開發(fā)的理念，對前端的開發(fā)都是有幫助的。

以上這五點要是都能做到，不說成為大神，養(yǎng)家糊口、自信爆棚應(yīng)該還是可以期望的。

前端開發(fā)正當(dāng)其時，但是也要居安思危，提升自身的技術(shù)，既不作之前的切圖狗，也不作現(xiàn)在的使用組件仔。打牢基礎(chǔ)，擴(kuò)寬視野，才是正道。