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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在這個(gè)時(shí)代，設(shè)計(jì)師和后臺已經(jīng)開始放棄前端了，不過我猜怕麻煩的心勝過了對技術(shù)的畏懼，因?yàn)槲也恢孤犚粋€(gè)人說過：讓我寫CSS/瀏覽器兼容，我頭就疼。

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

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

應(yīng)用設(shè)備：移動(dòng)端，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)的實(shí)施，補(bǔ)齊了前端最后一塊短板。前端可以肆無忌憚的彰顯自己的存在感：更炫酷的人機(jī)交互，更流暢的用戶體驗(yàn)。同時(shí)，4G網(wǎng)絡(luò)的普及，也讓前端也正式邁入了移動(dòng)端的開發(fā)。

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

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

在這個(gè)時(shí)期，前端也不甘心只做個(gè)頁面或者移動(dòng)網(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ā)也會(huì)PHP，但是偏PHP的那叫應(yīng)用開發(fā)?，F(xiàn)在，使用同樣的JS就能控制服務(wù)器，更不用提Node在SSR上的先發(fā)優(yōu)勢（PHP使用js擴(kuò)展也能做，不過我想只有應(yīng)用開發(fā)才會(huì)干這事）。前端控制了接入層之后，后端徹底淪為了前端的接口提供方。之前的跨域，gzip壓縮這種求爺爺告奶奶的事情，自己就可以完成了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

記憶確實(shí)遺忘了

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

如果是堅(jiān)持不下來可以找個(gè)朋友采用對賭方案，每次不寫就扣個(gè)幾百塊，我自身的親身體驗(yàn)，有奇效……另外，因?yàn)楦粢欢螘r(shí)間就要寫博客，也促使自己一直在留意和反思日常的工作，簡直一舉兩得。

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

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

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