百度母嬰技術團隊—基于Reactjs實現webapp #1 Open my-fe opened this Issue 2 days ago · 16 comments

14 participants

my-fe commented 2 days ago

由于最近的reactjs實在太火，而且距離第一版已經快2年的時間了，已經相對穩(wěn)定和成熟了，基于這兩個前提下，團隊對reactjs及其他開源技術進行了相關調研，發(fā)現落地是可行的，我們有4名前端同學，從調研到上線，大概花了1個半月的時間，期間有踩一些坑，后面會說，整個開發(fā)總體來說是非常順利的，下面進入正題~~

產品簡介

線上應用：mami.baidu.com

我們做的是一個移動端的單頁webapp，可以在這個h5頁面完成商品選擇->支付->訂單跟蹤整個閉環(huán)

技術選型

Reactjs

React.js是Facebook在2013年開源的一個JS框架，在目前的前端開發(fā)的主流模式MVC和MVVM中，React主要專注于View層的開發(fā)，即視圖部分。

使用React開發(fā)的好處有以下幾點：

React倡導組件化的開發(fā)模式，這樣的開發(fā)模式和客戶端開發(fā)(iOS和Android)的模式很類似。這樣就可以實現組件最大限度的復用；

React只負責視圖部分的開發(fā)，很容易和其他已有的框架進行融合，例如Backbone和Angular，可以比較輕松的融入之前的項目中；

React通過virtual-dom和dom-diff的技術，避免了頻繁操作DOM帶來的性能損耗，開發(fā)的應用很流暢；

React通過virtual-dom實現了同構JS，這樣一來前后端可以使用一套模板，節(jié)省了傳統開發(fā)模式中要在前后端兩套模板的時間；

React自從開源以來，獲得了前端社區(qū)的廣泛關注和好評，先前比較主流的庫都針對React實現了相應的版本，在開發(fā)過程中有非常多的組件可以使用，避免了重復造輪子的困擾；

基于以上幾個優(yōu)點，在本次項目中我們選擇了React.js作為前端開發(fā)的框架。

項目中實際是使用下來reactjs有2點留下了深刻的印象:

• 規(guī)范：遵守W3C規(guī)范，基于web component的組件化開發(fā)模式，可讀性和可維護性都和傳統開發(fā)不可同日而語(這個很重要，因為市面上的很多框架都是自行一套的接口風格，群雄割據的時代已經快要結束，現在的框架如果不遵守w3c規(guī)范，自己意淫一套，開發(fā)者初次上手體驗會很差)

• 性能：操作虛擬Dom的速度React具有絕對的優(yōu)勢相對于傳統web開發(fā)

Redux

redux是一個優(yōu)秀的前端框架，用于管理web應用中的整個數據流。

react只是MVC中的V層，在一個大型webapp中，以一種合理的形式來組織、維護不同來源的數據非常重要，我們希望在整個應用正確動態(tài)更新演變的同時，能夠有清晰的代碼結構、方便不同開發(fā)者分工協作、較低的維護成本。

redux是flux多種實現的一個升級版，具有以下幾個特征：

整個應用的狀態(tài)(state)存儲為一個對象. 單一數據源使得client端可以直接使用server端構建的單一對象，方便對當前狀態(tài)的獲取，同時使得調試簡單。

極強的數據流約束。redux數據流的變化只能由action觸發(fā)，由reducer產生新的state，并且state只讀，代碼結構一致、清晰，并且不同的層不會有重復代碼。

完善的state拆分整合機制。 將state分為不同數據塊，每一塊分別維護自己的action以及reducer，這使得邏輯清晰，并且分工協作便捷。

強大的開發(fā)調試工具。webpack的hotload以及redux-devtools，使得調試方便，開發(fā)效率大大提高。

服務端渲染。與客戶端相比，服務端生成一個state對象并返回給頁面，就可在server和client實現同構的渲染。

無復雜對象，action與reducer分別為純JavaScript對象和函數，觀念清晰，無復雜對象的學習、維護成本。

功能完善，文檔清晰。 強大的中間件機制以及豐富的開源中間件庫，使得redux功能更加完善，如何發(fā)異步請求、異步數據流如何處理都有規(guī)定以及清晰的文檔。

react-redux使得redux與react結合更順暢。

以上幾個特征在母嬰項目中也得到了很好的體現，redux是做單頁web應用很好的選擇。

nodejs

我們基于團隊內的一個nodejs的mvc框架Lark.js，實現前后端分離，這個框架已經開源，

Lark.js 是一個面向大并發(fā)大流量互聯網服務的工業(yè)級 Node.js 框架[ 1 ]。它是從一個 10億級以上 pv 的線上node.js服務抽象出來的一個通用框架，這里需要注意的是，lark.js 并不是為快速開發(fā)設計的框架。lark.js 在設計上采用了路由，分層架構等拆分很細的設計，并且沒有像 django 或 ror 一樣自己實現一整套完整系統。這些不是lark.js 的重點關注目標。lark.js 的目標是支撐大流量大并發(fā)的業(yè)務，性能、多人開發(fā)模式、架構和可維護性是關注重點。

larkjs作為一個可支撐大流量并發(fā)業(yè)務的nodejs框架，在性能、多人開發(fā)模式、架構以及可維護性方面值得推薦。目前l(fā)arkjs已在百度多個產品線落地使用，大家有興趣的話，可以點擊查看，下面這兩個圖我們整個項目的目錄結構和分層架構:

React-router

react-router作為webapp的路由模塊，提供了豐富的功能，調用非常簡單，react-router對pushstate支持很好，視圖切換可以直接p-ajax

編譯部署

基于gulp和webpack，實現了一套編譯工具，主要有兩個命令，npm run dev和npm run deploy

• dev：監(jiān)聽所有文件變化，基于babel將es6編譯成es5，基于webpack區(qū)分出lib.js(lib.js是底層代碼,這個文件幾乎是不變的)和app.js(這個是業(yè)務代碼每次上線都會根據需求變化)，編譯less，并重啟nodejs服務
• deploy：主要是合并壓縮js、css，并將這些靜態(tài)資源文件md5打包，方便瀏覽器緩存

問題和踩坑

• state需要在做項目之前設計好，保證一份業(yè)務數據在state tree中出現一次
• smart組件太少導致state需要逐級下傳。
• onClick事件在大部分安卓手機上不可點

總結

百度媽咪特賣項目在技術選型上選取了前端領域最熱門的框架組合，項目成功落地后，對使用這一技術實現的優(yōu)缺點總結如下：
優(yōu)點：
1. 通過服務端以及前端的技術選型，實現了前端后同構。 同一套react組件分別在前后端render，避免了白頁loading態(tài)的出現。
2. 基于reactjs實現，除組件化、虛擬DOM在復用以及性能上帶來的一般好處外，reactjs思想使得開發(fā)者之間更好的分工與合作，在配合上非常順暢。
3. react+redux，規(guī)范的接口以及極強的約束，使得整個代碼結構清晰，不同開發(fā)者的代碼高度一致。
4. 技術生態(tài)。越來越多的開發(fā)調試工具以及JavaScript框架正在依附著react生長，這一技術選型對以后的產品升級以及客戶端的開發(fā)上線打下了良好的基礎。
5.如果你想基于react-native開發(fā)native項目，也需要學習reactjs

缺點：
1.學習成本略高。如果想基于reactjs開發(fā)項目，還得學習redux、react-router、es6等一系列比較前沿的技術。
2. 體積略大。這套技術實現，框架庫代碼壓縮后大于200K,gzip后實際傳輸大小為60K+，更適合大型的webapp。

總結

以上是生活随笔為你收集整理的百度母婴技术团队—基于Reactjs实现webapp #1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。