百度母嬰技術團隊—基于Reactjs實現webapp
由于最近的reactjs實在太火，而且距離第一版已經快2年的時間了，已經相對穩定和成熟了，基于這兩個前提下，團隊對 reactjs及其他開源技術進行了相關調研，發現落地是可行的，我們有4名前端同學，從調研到上線，大概花了1個半月的時間，期間有踩一些坑，后面會 說，整個開發總體來說是非常順利的，下面進入正題~~
產品簡介
線上應用：mami.baidu.com
我們做的是一個移動端的單頁webapp，可以在這個h5頁面完成商品選擇->支付->訂單跟蹤整個閉環
技術選型
Reactjs
React.js是非死book在2013年開源的一個JS框架，在目前的前端開發的主流模式MVC和MVVM中，React主要專注于View層的開發，即視圖部分。
使用React開發的好處有以下幾點：
- React倡導組件化的開發模式，這樣的開發模式和客戶端開發(iOS和Android)的模式很類似。這樣就可以實現組件最大限度的復用；
- React只負責視圖部分的開發，很容易和其他已有的框架進行融合，例如Backbone和Angular，可以比較輕松的融入之前的項目中；
- React通過virtual-dom和dom-diff的技術，避免了頻繁操作DOM帶來的性能損耗，開發的應用很流暢；
- React通過virtual-dom實現了同構JS，這樣一來前后端可以使用一套模板，節省了傳統開發模式中要在前后端兩套模板的時間；
- React自從開源以來，獲得了前端社區的廣泛關注和好評，先前比較主流的庫都針對React實現了相應的版本，在開發過程中有非常多的組件可以使用，避免了重復造輪子的困擾；
基于以上幾個優點，在本次項目中我們選擇了React.js作為前端開發的框架。
項目中實際是使用下來reactjs有2點留下了深刻的印象:
-
規范：遵守W3C規范，基于web component的組件化開發模式，可讀性和可維護性都和傳統開發不可同日而語(這個很重要，因為市面上的很多框架都是自行一套的接口風格，群雄割據的 時代已經快要結束，現在的框架如果不遵守w3c規范，自己意淫一套，開發者初次上手體驗會很差)
-
性能：操作虛擬Dom的速度React具有絕對的優勢相對于傳統web開發
Redux
redux是一個優秀的前端框架，用于管理web應用中的整個數據流。
react只是MVC中的V層，在一個大型webapp中，以一種合理的形式來組織、維護不同來源的數據非常重要，我們希望在整個應用正確動態更新演變的同時，能夠有清晰的代碼結構、方便不同開發者分工協作、較低的維護成本。
redux是flux多種實現的一個升級版，具有以下幾個特征：
-
整個應用的狀態(state)存儲為一個對象. 單一數據源使得client端可以直接使用server端構建的單一對象，方便對當前狀態的獲取，同時使得調試簡單。
-
極強的數據流約束。redux數據流的變化只能由action觸發，由reducer產生新的state，并且state只讀，代碼結構一致、清晰，并且不同的層不會有重復代碼。
-
完善的state拆分整合機制。 將state分為不同數據塊，每一塊分別維護自己的action以及reducer，這使得邏輯清晰，并且分工協作便捷。
-
強大的開發調試工具。webpack的hotload以及redux-devtools，使得調試方便，開發效率大大提高。
-
服務端渲染。與客戶端相比，服務端生成一個state對象并返回給頁面，就可在server和client實現同構的渲染。
-
無復雜對象，action與reducer分別為純JavaScript對象和函數，觀念清晰，無復雜對象的學習、維護成本。
-
功能完善，文檔清晰。 強大的中間件機制以及豐富的開源中間件庫，使得redux功能更加完善，如何發異步請求、異步數據流如何處理都有規定以及清晰的文檔。
-
react-redux使得redux與react結合更順暢。
以上幾個特征在母嬰項目中也得到了很好的體現，redux是做單頁web應用很好的選擇。
nodejs
我們基于團隊內的一個nodejs的mvc框架Lark.js，實現前后端分離，這個框架已經開源，
Lark.js 是一個面向大并發大流量互聯網服務的工業級 Node.js 框架[ 1 ]。它是從一個 10億級以上 pv 的線上node.js服務抽象出來的一個通用框架，這里需要注意的是，lark.js 并不是為快速開發設計的框架。lark.js 在設計上采用了路由，分層架構等拆分很細的設計，并且沒有像 django 或 ror 一樣自己實現一整套完整系統。這些不是lark.js 的重點關注目標。lark.js 的目標是支撐大流量大并發的業務，性能、多人開發模式、架構和可維護性是關注重點。
larkjs作為一個可支撐大流量并發業務的nodejs框架，在性能、多人開發模式、架構以及可維護性方面值得推薦。目前larkjs已在百度多個產品線落地使用，大家有興趣的話，可以點擊查看，下面這兩個圖我們整個項目的目錄結構和分層架構:
React-router
react-router作為webapp的路由模塊，提供了豐富的功能，調用非常簡單，react-router對pushstate支持很好，視圖切換可以直接p-ajax
編譯部署
基于gulp和webpack，實現了一套編譯工具，主要有兩個命令，npm run dev和npm run deploy
- dev：監聽所有文件變化，基于babel將es6編譯成es5，基于webpack區分出lib.js(lib.js是底層代碼,這個文件幾乎是不變的)和app.js(這個是業務代碼每次上線都會根據需求變化)，編譯less，并重啟nodejs服務
- deploy：主要是合并壓縮js、css，并將這些靜態資源文件md5打包，方便瀏覽器緩存
問題和踩坑
- state需要在做項目之前設計好，保證一份業務數據在state tree中出現一次
- smart組件太少導致state需要逐級下傳。
- onClick事件在大部分安卓手機上不可點
總結
百度媽咪特賣項目在技術選型上選取了前端領域最熱門的框架組合，項目成功落地后，對使用這一技術實現的優缺點總結如下：
優點：
1. 通過服務端以及前端的技術選型，實現了前端后同構。 同一套react組件分別在前后端render，避免了白頁loading態的出現。
2. 基于reactjs實現，除組件化、虛擬DOM在復用以及性能上帶來的一般好處外，reactjs思想使得開發者之間更好的分工與合作，在配合上非常順暢。
3. react+redux，規范的接口以及極強的約束，使得整個代碼結構清晰，不同開發者的代碼高度一致。
4. 技術生態。越來越多的開發調試工具以及JavaScript框架正在依附著react生長，這一技術選型對以后的產品升級以及客戶端的開發上線打下了良好的基礎。
5.如果你想基于react-native開發native項目，也需要學習reactjs
缺點：
1.學習成本略高。如果想基于reactjs開發項目，還得學習redux、react-router、es6等一系列比較前沿的技術。
2. 體積略大。這套技術實現，框架庫代碼壓縮后大于200K,gzip后實際傳輸大小為60K+，更適合大型的webapp。
來自：https://github.com/my-fe/wiki/issues/1