筆者從事後臺研發多年，對前端實在是沒有多少發言權，下面就斗膽以門外漢的角度聊聊近來對前端技術的一些見解，也自當整理一下思路，使前端技術如何更好的融入到整個產品研發架構中來。這裡的前端語言不僅限於js，還是css,html等等。

來看一看2016年，github統計出來的不同語言的專案排行榜吧，是不是有一種投身前端大潮的衝動？！

2016 JavaScript Rising Stars：https://risingstars2016.js.org/en/

筆者是從JQuery時代過來的，但JQuery也玩的不怎麼樣，遇到問題一般也就是從網路中查詢下資源，解決問題即可，並沒有深入進行系統性的掌握起來。隨著我對前端技術資源查詢的深入，就像發現了浩瀚的宇宙里居然有那麼的星球，整理出一張圖，便於系統化的理解掌握：

原生時代

1995年，在Netscape在其瀏覽器上設計實現，開天闢地，之後便有了大踏步的進步，一個從0到1的過程，開始廣泛的WEB應用。但凡搞WEB開發的，多少都會點Js語法達到功能需求，談不上什麼框架，更談不了什麼工程化，堆砌程式碼實現功能而已。

框架之爭

隨著工作量的加大，一些比較IT界比較懶的同志開始坐不住了，於是出現了各種框架、腳手架、元件庫，開發效率開始大幅度的提升。JQuery出現的比較早，緊接著框架便如雨後春筍般的成長，截止到目前依舊有數不清的框架、庫，為了解決不同的問題，為了不同的目標被編寫出來。早期還算是門戶之爭，後期更像是團購、O2O、P2P一樣，百團大戰乃至千團大戰，你能接觸到的也基本是一些頭部框架/庫，更多的是悄悄的湮滅不見。

框架與框架之間也是不同的，各種思想也被傾注其中，比如經典的MVC，到後來的MVVM，MVP等等。張三可能比較喜歡Vue，李四就比較擅長Angular，王五搞後臺的就比較喜歡Bootstrap，還有React，Backbone，zepto，compass，sass，less等等不一而足，有可能你都沒有聽過。但就是這些開發庫、開發框架構建成了當下前端開發的一片天，軟體交付的質量、頻率也得到了長足的發展。

你可能比較保守，最不濟也會用JQuery而不會用原生的來搞產品開發。那些個好學上進的同志，可能會一把些前沿的技術放到專案裡面去試錯成長。具體該掌握哪些東西，相信身處前端開發崗位的同學應該有自己的度量。

目前大多數團隊應該處於這個階段，這個階段的開發模式基本是：找個框架或庫，直接copy到專案裡，前端人員編寫好樣式、基本js程式碼，扔給後端開發，後端再把業務邏輯套進靜態頁面裡，最後隨著後端服務直接釋出。好一點的還有規範做指導，一般的話就是隨便寫就行了，畢竟前端人員兩三個，能把功能實現就好了。

這種做法前、後端職責分工不明確，有些執行效能、安全問題沒有很好的解決，比如

• js/css檔案的大小，在頁面載入時顯的優為重要

• js/css中開發過程中的註釋，但不能暴露在外面

• js/css的版本釋出中的快取問題

• js/css檔案合併，提高載入效率

• js/css程式碼的邏輯混淆(畢竟是暴露在瀏覽器端，總不能把自己的程式碼邏輯一覽無餘吧)，

迫切需要構建、優化工具誕生來協助我們解決這些問題。BTW，這裡有一個繞不開的NodeJS要特殊說明下：

NodeJS

此間不得不提到一個劃時代進步的框架、思想、工具：NodeJS、NPM。上面提到的包括後面即將提到的很多框架、元件庫，語法都類似於NodeJS，安裝維護也基於NPM來完成，可見其戰略地位是多麼的重要。

NodeJS的出現，可以算是前端里程碑式的一個事件，它讓前端攻城獅們擺脫了瀏覽器的束縛，踏上了一個更加寬廣的舞臺。前端的可能性，從此更加具有想象空間。

花了點時間，順便熟悉了下NodeJS，簡單總結了張腦圖

由於其事件驅動、非阻塞io、單執行緒，在應對高併發的場景下表現比較出色，但同樣也有其不擅長的場景，比如大資料處理、複雜邏輯處理等，所以有時候還需要與其它成熟的語言比如JAVA配合開發，完成功能【經常聽說前端開發掌握了NodeJS就可以變成全棧開發，不知道這個全棧指的是什麼？】

雖然NodeJS是寫js，但我不認為前端員能夠很好的掌握，相反後端的同志會更容易掌握，畢竟這是前、後端兩種思想的碰撞。

NPM的出現使前端開發的包管理變的異常的簡單便捷，也使前端開發者方便地分享和重用程式碼、更方便地更新自己分享的程式碼。

NodeJS先說到這裡，我們回到正題。

構建優化

大家比較公認的兩大前端構建、優化工具非GRUNT和gulp.js莫屬了。自此前端開發才算進入到一點工程化的道路上來，引入任意一個工具到專案來，基本上可以完成對程式碼的簡化、壓縮、校驗、混淆、合併等等，來滿足實際開發、執行過程中的安全、效率問題，當然開發效率上也有更大的提升。

結合CI/CD工具，如Jenkins、Travis，前端研發流程一樣可以如後端迭代開發流程一樣，實現持續整合、持續交付、持續部署。

採用工程化構建流程之後，前後端職責分工便更加明確，前端更專注於資料展現，後端僅提供資料查詢、資料處理，相互不受影響，各自也能在關注在各自領域內的問題，比如動靜分離，靜態化處理等。

模組化、元件化

走上工程化的道路後，當然希望以更一步，模組化、元件化開發，降低耦合，提高複用。此間也出現了一大批框架、元件庫，比如commonjs、requirejs、seajs、less、sass、stylus、webpack等等，CMD與AMD的思路碰撞等等，到達這一步光靠框架、構建工具已經不足滿足，道與術的完美結合才能更好的實現模組化、元件化的研發之種。(css的演化不如js來的那麼凶猛)。

 Java是一個非常成功的工業化語言就是在於其工程化程度很高，能夠大規模的應用而依舊有據可依。按檢索到的資料中一些貌似大牛的總結：前端技術如何能走到流程構建、優化、模組化開發已經處於國內前端開發團隊的先列，絕大部分依舊是停留在框架選型階段，工程化程度與後端不匹配。

寫到這，內心有一股衝突：前端開發必須往前一步，不留僅停留在框架階段，至少走到構建、優化這一層。如果能像一些大廠一樣走進模組化、元件化階段那是更好，比如BATJ、TMMD，但對人員的技術能力儲備、團隊的思想層次有很高的要求。

但目標定的高，我們才能走的更遠，你說呢？

擴充套件閱讀：

長按2秒，識別二維碼，關注我。