[轉] React風格的企業前端技術

 

親愛的各位朋友們，你們下午好！

 

首先祝你們國慶節快樂！

 

很高興能夠在國慶前夕，能夠爲你們分享一下React風格的企業前端技術。

 

談到前端，可能之前你們的第一感受就是，前端嘛，無非就是作作頁面切圖，頂多加上CSS作作頁面樣式，或者JS作頁面的交互、動畫、特效等等。

其實，隨着近幾年前端的飛速發展，像組件化、模塊化理念的出現，MVC、MVVM等前端框架愈來愈成熟，以及愈來愈健全的開發、調試工具，前端能夠說已經不是之前的那個前端了，前端正在變得像後端同樣的複雜。

而另外一方面，隨着互聯網+的熱潮的到來，愈來愈多的傳統系統內部應用，正在轉型成爲互聯網化的應用。

 

而互聯網化應用的一個鮮明特色就是快速，那怎樣打造一個快速、React的前端應用呢，這就是咱們今天所要將的React風格的企業前端技術。

首先仍是稍微囉嗦一下談談前端的發展簡史。

 

早期仍是以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框架，藉助這些優秀類庫及開發理念，大大減輕了咱們打造富應用的痛苦。

另外06年初FireFox的Firebug插件的出現，終於可使咱們前端開發人員可以像後端同樣，能夠方便的調試前端代碼，告別了手寫alert這種繁瑣的調試方式。

 

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

而缺點就是，隨着業務邏輯慢慢變複雜，應用變爲複雜的富應用，當前的類庫或開發理念顯得力不從心，像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等構建工具來進行項目構建

 

 

能夠說正是因爲當代這些優秀的、成熟的技術，才能使咱們快速地打造很是棒的前端應用。

 

說了這麼多，那到底具體怎麼作呢，下面就來說講咱們認爲的構建React風格應用的三大要素。

首先成熟的框架是項目的支柱

爲何說成熟呢，由於你不是第一個吃螃蟹的人！

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，提高編碼信心、代碼質量。

上面給出的就是咱們在The  Platform裏面的一個前端測試用例，是經過BDD的given/when/then的測試方式

1. given一個Portal組件

2. when這個組件渲染到DOM以後

3. assert該組件的layout

經過該示例你們能夠看到，如今編寫前端測試能夠說是很是方便了。

 

選好了前端框架、測試框架，下面就得正式進入前端工做流程了。

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

 

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

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進行項目構建

 

最後一點，也是很是重要的一點，就是用戶體驗了。

能夠說，用戶體驗是成功產品的基石。一些優秀的、成功的產品，每每用戶體驗也是很是棒的。

要想提高用戶體驗，首先咱們先得從設計作起，上圖中的五大層次實際上是出自於Ajax之父James  Garrett所著的用戶體驗要素，而對於咱們開發人員來說，尤爲要注重於表現層、框架層、結構層，分別從配色、字體、導航、交互等方面進行設計。

 

其次只有經過不斷優化才能提高用戶體驗。咱們能夠從內容優化、關鍵渲染路徑優化、渲染性能優化三大方面進行性能優化。

 

同時藉助好的開發工具能夠幫助咱們進行性能優化。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的懶加載減小資源文件下載，加快加載速度。

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

 

 

最後的總結

 

 

 

轉載：EAII企業架構創新研究院。