前端開發未來三年規劃（從前端到未來前端發展閒聊）

2023-04-20 02:25:27 1

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. 總結

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

最後

以下是總結出來最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學習資料。

【領取方式】關注頭條 前端全棧架構丶第一時間獲取最新前端資訊學習手機用戶可私信關鍵詞 【前端】即可獲取全棧工程師路線和學習資料！,