百度母婴技术团队—基于Reactjs实现webapp #1
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):
基于以上幾個(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 易开发创始人潘俊勇:这些年我遇到的那些坑
- 下一篇: 美国科技三巨头的财报为何集体爆表?原因在