我所親見的前端技術變革

 

該文最早發表於個人微信公衆號：FangTalk。注：頭圖來自於google搜索，截取自51CTO

進入正文以前，先聲明，我並非前端工程師，對前端的理解也比較「膚淺」。只能站在一個帶隊者的角度，闡述個人團隊最近幾年所使用過的前端技術方案。知乎上 @狼大人 邀請我回答「好的前端主管是如何帶隊的」，遺留了好久，這裏也算是補上此次邀請的答案吧。

我眼中的原始時代

06年開始接觸JavaScript，當時處於新項目啓動可是需求待定，因此有了一段時間的閒散。白天上班無事可作，隨手翻了本JavaScript來看。不記得書名，可是一發不可收拾，連續讀完了兩本書：《JavaScript 權威指南》和《JavaScript高級編程》（前兩天在一個team member桌子上又見到了這本高級編程，發現厚度已是當年的2倍了，你說這技術變革的快不快:)），邊讀邊寫了不少從「hello world」 級別的代碼。

除了這個，我發現要寫個動態頁面，還要去搞懂DOM樹，而後一併研究了CSS還有HTML。

反正什麼都不懂，寫個menu點點改變效果對本身已經知足感十足。

得益於這段空閒時間，一個月後的項目啓動，顧爺「誇」我前端「牛逼」，而後就把項目前端最難的部分丟給我，「多級菜單」，對，就下面圖示的這種：

哈哈哈，純JS/CSS寫了一週搞定。由於這個任務，聚餐的時候lead喝醉還和你們吹牛逼「大家不要瞎逼逼，誰也沒大房厲害，能夠寫多級菜單」。。。

你知道這話放到如今，要多少個草泥馬從我眼前飄過？

這個歷史（別笑，也許真正的高手在當年已經創造出了BootStrap般神器，只是我等不知而已）。

原始的時代，那個時候，咱們的第一武器就是：

• 最原生的方法寫JavaScript；同時因爲剛剛編碼入門，鬼知道有什麼模塊思想，如何封裝等等。

• JavaScript配合CSS和IE6做戰

• 不用任何的框架

JQuery的崛起

JQuery的第一個版本應該是在2006年8月出來，第一個可用的版本在07年，可是在中國火的滿大街，應該到08年了吧？在個人印象裏，在某C某V的項目裏，開始大面積應用JQuery。

JQuery + JQuery UI + Plugin火的爛大街。當年最愛作的事情，就是收集好用的JQuery plugin，看到一個收藏到收藏夾一個，以致於到10年，點開那滿滿的收藏夾已經能夠滾幾個屏幕。你要知道，在當年，那但是寶，爲了能在家、在公司、在任何一臺電腦上均可以訪問個人寶貝收藏，嘗試了N多收藏夾自動同步還有管理的工具。

想來，整理我這堆JQuery plugin的收藏所花掉的時候，都要遠遠大於我寫代碼的時間了......

不折騰就不會死的年代，這個時期：

• JQuery火遍全中國；你們對它的認識處於「工具，工具方法，原生JS函數擴展」

• 程序猿分出了兩類：一類說「我是JQuery熟手可是不懂JavaScript」，一類說「若是你來面試說你會JQuery可是不懂JavaScript就滾」

• IE6終於有了點解藥

這個時期，火到Angular出現。

胖前端時代：踏步迎接Angular

我必定相信，在前端人的世界裏，絕對不是從JQuery直接邁進了以Angular爲表明的時代，其間可能經歷了JavaScript 框架A，改進JQuery某某弱點、JavaScript 框架B 改進前端編程某某弱點，等等。

或者，在高人的眼裏，Angular不能表明一個時代，而是其餘某某框架。

可是，在我還在推崇「前端編碼，JQuery大法好」的時候，某大神和我說，「喂，大家用過Angular嗎？」 爲了避免落後，花了一個下午玩了一把，而後在新的項目裏，就推行了。

而後從那以後的新項目都開始了MVVM/MVW的轉型，而那個表明就是Angular。也是從那個時期開始，身邊的人都在討論Angular。

圖片來源於Google圖片搜索 - Developer's Corner

跟着潮流，從「瘦前端」到「胖前端」轉型。也是從這個時期開始，在項目的設計思路中，咱們開始把基於H5的「頁面」也考慮成了「客戶端」，服務端的角色由提供數據並渲染變成了僅僅提供數據：

• Angular以及基於opensource的Angular擴展，是咱們的主要武器

• 有服務端各類成熟方案的鋪墊，JavaScript程序猿開始「崛起」，之前在服務端開發採用的工具、設計思想通通在前端開發的世界裏開始施展拳腳

• 感謝Node.js，以及由此帶來的各類工具和思想(bower, grunt, gulp, yeoman, etc, 還有重要的Promise模式)，JavaScript統一先後端。

• 項目的開發語言由JavaScript轉向CoffeeScript；CSS開始嚴重依賴BootStrap，樣式語言轉向LESS/SASS；部分項目用Jade替代了HTML

• IE6淡出了你們的視野

現狀和前瞻：趨於標準化

不知道是否是應該感謝Google還有Chrome，由於在個人記憶裏，Chrome推進了前端標準化的進程，隨着它的市場份額愈來愈大，前端工程師們的痛苦也愈來愈小。

固然，個人理解並不必定正確，我並無去驗證，去找尋一下歷史資料，究竟是哪些公司和社區力量，推進了HTML5，CSS3等標準化的進程。不論是誰，他們的貢獻都值得感謝、銘記和尊重！另外，微信帝國的擴張，多少也對前端開發的發展，作出了不可忽視的貢獻。

另外一個不可忽視的貢獻，就是ES6（如今叫ES2015，從名字就能意識到，這個表明2015年你們就能夠用了）。JavaScript作爲「瀏覽器裏的彙編語言」，多年來發展緩慢，因此纔有了TypeScript/Dart，纔有了CoffeeScript，可是無論出現多少新的變種，都沒法取代它統治瀏覽器端編程。ES6算是一個巨大的進展，內置了公有私有Class、模塊，等等等等，讓JavaScript向高級語言、更易工程化方向邁出了重要的一步！這裏也應該再次向開源社區致敬！

今天，咱們的新項目，技術選型已經開始擁抱新技術：

• 用ES6代替了CoffeeScript，由於咱們堅決的認爲，不出一年，ES6必定統治前端；

• 咱們用Babel作爲編譯工具

• 開始嘗試一些新的框架和開發模式，用React/Redux替換了Angular.js

• 模塊化和構建工具，開始採用Webpack，同時用gulp替換了Grunt

• 更重視前端的自動化測試和代碼質量的把空

不得不提的Node.js

不少人提到Node.js都會說，跑在服務器端的JavaScript。你們更多關注的是它的能力，而忽視了這種能力對生態系統的影響。

• npm包管理工具，推進了其餘語言對包管理的重視和工具的改善；用PHP那麼多年，直到最近一兩年纔有了可用的composer包管理工具，Python的pip發展這麼多年到如今還遠不能和npm相提並論；我的認爲，npm也是bower等工具的思想基礎

• Node.js完全解放了生產力，基於Node.js的自動化構建工具，測試工具層出不窮，這些工具不但對前端開發，同時也對服務端開發，客戶端開發產生了巨大的影響和推進

如今，稍微上規模的項目，不論是任何語言作爲你的主力開發語言，你很難看到裏面少了Node.js的影子，它無處不在！（我並無去找數據驗證，也不必，重要的是，若是你作前端，Node.js能夠帶給你200%的生產力；若是是作服務端，Node.js生態中的不少思想都值得你去借鑑，所謂「技多不壓身」！)

談談我是如何帶前端技術團隊的

在我團隊裏，每一個前端工程師都是個人老師，不少時候，評估一個頁面效果的開發，我都須要請教他們。可是這並不妨礙我和他們溝通，帶領你們完成項目的交付。

• 給你們足夠的空間

  不強制要求你們必定使用某一個框架或者技術方案，可是我會介入你們的選型和討論，對你們提出的候選列表，我會一個一個的去研究和比較，適當地提出個人建議和反饋。

  同時，我容許你們「折騰」，嘗試新的技術和方案。我惟一去作的，就是風險控制，保證項目交付的前提下，隨便你們折騰。「年輕人，留給他們折騰的時間很少，等他們都變成了老人，沒人再願意折騰了；而折騰帶給他們的，是不可或缺的經驗。」

• 注重團隊結構

  兩個原則：第一，矮子裏面也要拔個將軍，創造一切條件，讓這個將軍得到將軍的能力和尊重；第二，告訴每一個將軍，選拔出本身的後備將軍，由於我堅持認爲「只有有人能夠代替你的時候，你纔能有更多的機會」！

• 瞭解你的團隊

  對你團隊人員的瞭解程度，決定了你如何安排項目計劃、任務分配和風險控制。同時，對每個lead也作一樣的要求，作到「合適的任務放置合適的人員」。

寫在最後，可能每一個人對前端的發展變化的理解都不同，本文僅以個人視角，回顧了我所理解的變化。這麼多年帶了不少團隊，交付了不少的項目，但同時我也有自知之明，也許我只是井底之蛙，看到了我能看到的世界，可是沒有關係，重要的是，每一個人都須要找到本身對這個世界的認識，找到擁抱這個變化的世界的方法，獨一無二的方法。

來自：http://zhuanlan.zhihu.com/fangtalk/20359442

擴展閱讀

15年雙11手淘前端技術巡演 - 前言
Web前端開發大系概覽 （前端開發技術棧）
2015超實用的前端開發技術與工具指南 
前端工程 - 基礎篇 
體驗設計師該學習的一點前端技術

 

http://www.open-open.com/news/view/b2d693