我所親見的前端技術變革

該文最先發表于我的微信公眾號：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