百度母嬰技術(shù)團(tuán)隊(duì)—基于Reactjs實(shí)現(xiàn)webapp #1 Open my-fe opened this Issue 2 days ago · 16 comments

14 participants

my-fe commented 2 days ago

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

產(chǎn)品簡(jiǎn)介

線上應(yīng)用：mami.baidu.com

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

技術(shù)選型

Reactjs

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

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

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

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

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

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

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

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

項(xiàng)目中實(shí)際是使用下來reactjs有2點(diǎn)留下了深刻的印象:

• 規(guī)范：遵守W3C規(guī)范，基于web component的組件化開發(fā)模式，可讀性和可維護(hù)性都和傳統(tǒng)開發(fā)不可同日而語(這個(gè)很重要，因?yàn)槭忻嫔系暮芏嗫蚣芏际亲孕幸惶椎慕涌陲L(fēng)格，群雄割據(jù)的時(shí)代已經(jīng)快要結(jié)束，現(xiàn)在的框架如果不遵守w3c規(guī)范，自己意淫一套，開發(fā)者初次上手體驗(yàn)會(huì)很差)

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

Redux

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

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

redux是flux多種實(shí)現(xiàn)的一個(gè)升級(jí)版，具有以下幾個(gè)特征：

整個(gè)應(yīng)用的狀態(tài)(state)存儲(chǔ)為一個(gè)對(duì)象. 單一數(shù)據(jù)源使得client端可以直接使用server端構(gòu)建的單一對(duì)象，方便對(duì)當(dāng)前狀態(tài)的獲取，同時(shí)使得調(diào)試簡(jiǎn)單。

極強(qiáng)的數(shù)據(jù)流約束。redux數(shù)據(jù)流的變化只能由action觸發(fā)，由reducer產(chǎn)生新的state，并且state只讀，代碼結(jié)構(gòu)一致、清晰，并且不同的層不會(huì)有重復(fù)代碼。

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

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

服務(wù)端渲染。與客戶端相比，服務(wù)端生成一個(gè)state對(duì)象并返回給頁面，就可在server和client實(shí)現(xiàn)同構(gòu)的渲染。

無復(fù)雜對(duì)象，action與reducer分別為純JavaScript對(duì)象和函數(shù)，觀念清晰，無復(fù)雜對(duì)象的學(xué)習(xí)、維護(hù)成本。

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

react-redux使得redux與react結(jié)合更順暢。

以上幾個(gè)特征在母嬰項(xiàng)目中也得到了很好的體現(xiàn)，redux是做單頁web應(yīng)用很好的選擇。

nodejs

我們基于團(tuán)隊(duì)內(nèi)的一個(gè)nodejs的mvc框架Lark.js，實(shí)現(xiàn)前后端分離，這個(gè)框架已經(jīng)開源，

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

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

React-router

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

編譯部署

基于gulp和webpack，實(shí)現(xiàn)了一套編譯工具，主要有兩個(gè)命令，npm run dev和npm run deploy

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

問題和踩坑

• state需要在做項(xiàng)目之前設(shè)計(jì)好，保證一份業(yè)務(wù)數(shù)據(jù)在state tree中出現(xiàn)一次
• smart組件太少導(dǎo)致state需要逐級(jí)下傳。
• onClick事件在大部分安卓手機(jī)上不可點(diǎn)

總結(jié)

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。