從前端到將來，前端發展閒聊

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

　　前端開發正當其時，可是也要居安思危，提高自身的技術，既不做以前的切圖狗，也不做如今的使用組件仔。打牢基礎，擴寬視野，纔是正道。