野蠻生長的前端，從雜牌軍到正規軍

筆者從過後臺研發多年，對前端實在是沒有多少發言權，下面就斗膽以門外漢的角度聊聊近來對前端技術的一些看法，也自當整理一下思路，使前端技術如何更好的融入到整個產品研發架構中來。這裏的前端語言不只限於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，但對人員的技術能力儲備、團隊的思想層次有很高的要求。

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

擴展閱讀：

基於SpringCloud的Microservices架構實戰案例

介紹幾款經常使用的在線API管理工具

你不得不知的幾個互聯網ID生成器方案

Spring Boot + Elasticsearch 實現索引的平常維護

軟件生命週期與技術人的職業週期

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