前端框架發展史

 

做者：奚金鑫

 

早期仍是以JSP、PHP、ASP等爲主的頁面開發年代，那個時候的主要場景是

1. 用戶在頁面上進行一個操做，好比Button的點擊或者Form表單的提交

2. 瀏覽器發送請求到後端

3. 後端通過DB查詢拿到數據，再將數據綁定到JSP、PHP、ASP

4. 最後生產HTMl，返回給瀏覽器

5. 瀏覽器進行全屏渲染

注意，這裏講到了全屏渲染，全屏這個詞註定了用戶體驗的不佳，開發人員能夠作的優化的事情是很是少的。

另外，前端邏輯放在後端JSP裏，這種先後端混淆的開發方式首先下降了開發效率，尤爲當頁面變複雜後，以及帶來了後期的一系列維護性、擴展性等問題。

帶着前期的這些問題，咱們來到了中期AJAX的時代。

這個時候場景從第三步開始變成了

3. 後端通過DB查詢拿到數據

4. 根據數據，生成對應的JSON/XML這種先後端達成一致的數據格式，返回給瀏覽器

5. 瀏覽器對JSON/XML進行解析，綁定到對應的組件上，再進行組件渲染

 

你們能夠看到，這個階段全屏渲染換成了組件渲染，用戶體驗能夠說是提高了。

而業務邏輯也慢慢得從後端移向了前端，這種先後端代碼分離的方式提高了必定的維護性、可擴展性。

但與此同時，咱們的應用也慢慢地變成了JavaScript的富應用，而打造一個富應用實際上是不簡單的，咱們須要

1. 基礎類庫來對請求、DOM、事件、特效等的封裝

2. 組件庫來達到組件複用

3. 框架來進行數據的解析及綁定

4. 解決不一樣瀏覽器的兼容性問題，以及相同瀏覽器不一樣版本的兼容性問題

 

這個階段的早期都是各家公司本身造輪子的時代，能夠說當時打造一個富應用是很是痛苦的。直到後來出現了一批優秀的類庫，好比jQuery、Prototype，以及好的一些開發理念，好比jQuery UI的組件化、YUI的模塊化、EXT JS的MVC框架，藉助這些優秀類庫及開發理念，大大減輕了咱們打造富應用的痛苦。

這個階段的優勢，剛剛也說了，就是在用戶體驗以及開發效率等方面的提高。

而缺點就是，隨着業務邏輯慢慢變複雜，應用變爲複雜的富應用，當前的類庫或開發理念顯得力不從心，像jQuery UI Widget Factory將一個頁面分紅幾塊開發，這種組件化開發的理念雖然是好的，可是塊與快之間的數據傳遞、同步仍是沒有解決，致使開發人員仍是須要經過reference傳遞、callback、listener綁定等繁瑣方式來進行數據傳遞或同步。而ExtJS雖然MVC理念也很是好，可是初期被人詬病的就是它的性能、穩定性問題，以及3.0以後的license問題。

 

總之這個階段雖然理念有了，但仍是處於萌芽階段，還尚不成熟。

主要分爲四大塊

1. Angular、React、Ember爲首的優秀前端框架

2. Bootstrap、Semantic UI爲首的優秀組件庫

3. npm、webpack模塊化開發

4. Gulp、Grunt等構建工具來進行項目構建

Google使用了AngularJS在Google Trends、Google Analytics上，Facebook、Airbnb等使用了React相關的技術，而Apple、Amazon等也使用了Ember相關的技術。

能夠說，這些前端框架已經在生產線上通過反覆驗證過了，因此你們徹底能夠放心大膽的使用。

另外一方面，如今優秀的前端框架選擇也很是多，各自有各自的優勢。

像Angular經過雙向綁定的方式，使開發人員不用關心View和Model之間的數據同步，簡化了代碼。

 

 

 

 而React能夠說是另闢蹊徑，經過組件化的開發方式，虛擬Dom的理念，以及結合Redux單向數據流，更高效的開發咱們的前端應用

這麼多優秀的、成熟的前端框架到底怎麼選擇呢？

首先從框架自己來講 (上圖評分僅供參考)

1. 學習難度

如官網的文檔、示例是否多

2. 框架特性

瀏覽器兼容性、先後端同構、移動端的支持等等

3. 社區

github的Star數、github上解決issue數以及解決速度、官方的維護者是誰等等

其次從項目團隊來講，也須要從人力、項目大小、時間、指望等來考慮。好比前端團隊裏若是不少是從後端轉爲前端的，可能Augular更加合適，若是大多都是專業的JS開發人員，那麼React可能更加合適。

 

前端框架有了，還得配合成熟的測試框架才能保證產品質量。

說到單元測試、集成測試，後端已經歷史悠久，TDD、BDD等測試理念都是從後端發揚光大的。而如今前端也能夠很方便地來編寫測試。

如上圖，能夠選擇Karma做爲Test Runner，Mocha/Chai做爲測試類庫（相似後端Junit），Sinon做爲Mock類庫（相似後端Mockito），結合不一樣的Karma Launchers來測瀏覽器的兼容性問題，而且配合CI Job，實時地監控代碼問題，從而下降Regresssion，提高編碼信心、代碼質量。

 

 

 

咱們能夠看到如今的前端流程實際上是複雜的。

 

在搭建的時候，咱們可能須要

1. 根據不一樣前端框架搭建不一樣的項目結構，好比MVC的得model/view/actions的結構，react+redux的得components/actions/reducers結構

2. 根據不一樣的前端、測試框架配置不一樣的配置文件

3. 若是是先後端同構的，還須要搭建前端服務器

 

而在開發的時候，咱們須要

1. 各類預處理器來處理中間語言，好比CoffeeScript、TypeScript或者Sass、Less

2. JS、CSS代碼實時檢查

3. 模塊化開發

4. 熱加載、實時加載

 

最後在構建的時候，咱們須要

1. 編譯JS/CSS等中間語言

2. 運行單元測試

3. 資源壓縮、合併

4. 資源懶加載

 

你們能夠看到，從搭建到開發再到構建，仍是作了不少事情的，一個流暢的工做流程必不可少。

主要分爲四大塊

1. BoilerPlate或者Yeoman命令行的方式快速搭建項目結構

2. Npm、webpack進行模塊化開發

3. 以Sublime插件/Atom插件/webSotrm，進行中間語言的預處理、以及代碼Lint

4. Gurnt/Gulp/npm Scripts進行項目構建

同時藉助好的開發工具能夠幫助咱們進行性能優化。Chrome的開發者工具就是款很好的開發工具，咱們可使用Source能夠進行代碼調試，經過Network分析頁面上的資源請求狀況，甚至能夠跑一個Profile來定位長耗時方法、內存泄露等問題。

 

至此，三大要素已經所有講完了。

下面再來談談React風格在咱們普元產品The Platform裏的實踐。

首先是咱們The Platform裏前端的整體架構圖

 

 

1. 框架這邊

咱們使用了React + Redux + React Router做爲前端框架。經過React組件化的開發方式，一個頁面能夠同時拆成幾塊給不一樣的團隊甚至是異地團隊，從而加快開發效率。而Redux單向數據流的方式也下降了複雜頁面的開發難度。

使用Karma+Mocha+Chai+Sinon做爲測試框架，保證代碼質量。

2. 工做流程

FE Template做爲咱們的BoilerPlate來快速搭建前端項目

NPM webpack進行模塊化開發

React/Redux開發工具以及Webpack的熱加載來提高咱們的開發體驗

Webpack進行項目構建，進行資源文件壓縮、合併、懶加載等

3. 用戶體驗

優化設計，減小沒必要要的菜單。

利用React自己的Virtual DOM提高頁面性能，Webpack的懶加載減小資源文件下載，加快加載速度。

以及近期對字體作的異步加載。