前端發展閒聊

　1. 前情提要

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

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

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

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

　2. 前端發展線

　　2.1 蠻荒時期

應用裝置：PC
技術棧：LAMP

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

　　這一階段的技術棧是LAMP(Linux+Apache+Mysql+PHP)。看這些名詞就知道，那個時期的前端，真的和前端沒什麼關係。被鄙視也是正常的。

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

　　2.2 前端時期

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

　　2.2.1 MVC時代

應用裝置：主要是PC，少量的移動端介面
技術棧：AJAX，JQuery, CMD/AMD，Grunt/Gulp

　　當有了AJAX之後，前端終於能和後端做解耦了。同時，因為PC的普及和網路效能的提升，人們也希望網頁能有更好的使用者體驗。MVC框架應運而生，不過，受限於各種自我放飛的瀏覽器，前端能做的事情仍然少的可憐。

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

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

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

　　MVC時代的後期，前端逐漸開始有了一點工程化的影子: 模組化程式設計有CMD/AMD，構建有Grunt/Gulp，編碼約定有Jslint/jshint。我們終於不是在一個JS檔案裡面寫寫寫了，你以為可以翻身農奴把歌唱了？並不是。

　　移動端迅猛發展的前期，iOS和Android這樣的終端開發才是這個社會的主流，前端開發受限於網路速度和沒有統一的Html標準，還是不受重視。

　　2.2.1 MVVM時代

應用裝置：移動端，PC端
技術棧：Angularjs，React，Vue，ES6，HTML5，CSS3，Webpack, PostCss，Flexible, Viewport，ESlint

　　Chrome V8引擎的出現、H5和ES6標準的實施，補齊了前端最後一塊短板。前端可以肆無忌憚的彰顯自己的存在感：更炫酷的人機互動，更流暢的使用者體驗。同時，4G網路的普及，也讓前端也正式邁入了移動端的開發。

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

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

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

　　2.3 全棧時期

應用裝置：伺服器
技術棧：Express, Koa, Eggjs

　　單做前端，終究要受到伺服器的限制。Node的出現令前端開發擁有了控制伺服器的能力。正式宣佈廣大前端開發向接入層邁進，搶了應用開發的飯碗。

　　當然之前有些前端開發也會PHP，但是偏PHP的那叫應用開發。現在，使用同樣的JS就能控制伺服器，更不用提Node在SSR上的先發優勢（PHP使用js擴充套件也能做，不過我想只有應用開發才會幹這事）。前端控制了接入層之後，後端徹底淪為了前端的介面提供方。之前的跨域，gzip壓縮這種求爺爺告奶奶的事情，自己就可以完成了。

　　可以說，Node擴充了前端的地盤，這時候，前端也不再被稱之為前端，而是改稱全棧開發。

　　2.4 未來

應用裝置：全部終端，伺服器

　　移動手機的普及讓iOS和Andriod為首的終端開發享受到了紅利，而隨著5G網路的推進和[PWA][3]被支援，前端開發也將迎來最大的一波紅利。在可預見的將來，前端受益於靈活的部署和安裝，在移動端開發中比例會逐漸加重。

　　我甚至認為，前端會成為終端開發的最終解決方案，包括但不限於手機，電視，車載中控等等。

專案 = 前端 + 大資料/AI

　3. 個人發展思路

　　3.1 遇到的問題

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

　　3.1.1 元件太多，浮在表面

　　毋庸置疑，會使用某項技術當然是最重要的。但是，如果在學習技術的時候，如果只停留在學會使用的層面，是遠遠不夠的。

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

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

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

　　而且現在框架和元件太多，浮在表面的另一個壞處是對各種框架和元件都瞭解不深，在技術選型時會遇到迷茫的抉擇。

　　3.1.2 基礎不牢，難以接納新技術

　　當我們去接觸一項新技術的時候，有時候會覺得文件晦澀難懂，怎麼看也很難看懂。排除小概率文件確實不咋地的情況，大部分情況是我們缺少了這部分的知識體系基礎。

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

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

　　注：前端技術更新快的原因：

• 零歷史負擔：程式碼隨時可以更新，無需像終端那樣等稽核，也無需像後臺那樣要支援多個業務不能隨便變。
• 硬體更新帶來的紅利：瀏覽器效能的提升，移動手機的普及，4G網路的應用，前端網頁有大量的需求
• 更廣的技術範圍：前端H5, 接入層Node。相比起來終端開發和後臺開發都只有自己的一畝三分地。

　　3.2 採取的策略

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

　　3.2.1 明確自身定位

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

　　3.2.2 培養技術品味

　　當理清了自身的定位時，如何前進，向哪裡前進就成了另外一個問題。自己是很難形成技術品味的，要有更多的輸入，包括但不限於上文的閱讀原始碼和部落格，才能形成自己的技術品味，也從而知道自己該前進的方向。

　　3.2.3 鞏固基礎，解決問題

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

　　這個部分和第二步是不分先後的，二者交替進行。

　　3.2.4 多寫部落格，多做總結

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

• 之前理解的並不深入，如果自己深究，還是有不理解的地方
• 記憶確實遺忘了

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

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

　　3.2.5 以點帶面，跨界突破

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

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

　4. 總結

　　前端開發正當其時，但是也要居安思危，提升自身的技術，既不作之前的切圖狗，也不作現在的使用元件仔。打牢基礎，擴寬視野，才是正道。