某OTA-前端開(kāi)發(fā)技術(shù)體系

　　原生開(kāi)發(fā)的優(yōu)/缺點(diǎn)

　　優(yōu)點(diǎn)：

　　用戶體驗(yàn)極佳，渲染速度快于H5，動(dòng)畫(huà)效果絢麗等等

　　直接可調(diào)用原生功能（通訊錄、攝像頭等等）

　　可離線使用

　　調(diào)試透明

　　缺點(diǎn)：

　　開(kāi)發(fā)成本高

　　兼容設(shè)備有限

　　商店內(nèi)容限制

　　用戶更新不能控制

　　混合開(kāi)發(fā)的優(yōu)/缺點(diǎn)

　　優(yōu)點(diǎn)：

　　從人員和時(shí)間成本上，學(xué)習(xí)成本低，開(kāi)發(fā)效率高于原生開(kāi)發(fā)

　　兼容多個(gè)平臺(tái)，ios/android/M站/微信/小程序

　　控制用戶更新，無(wú)需等待發(fā)包

　　無(wú)商店內(nèi)容限制

　　可離線使用

　　缺點(diǎn)：

　　用戶體驗(yàn)不如純?cè)鷳?yīng)用，沒(méi)有絢麗的效果，渲染/響應(yīng)速度慢，動(dòng)畫(huà)支持不好等等

　　整體打包文件比較大

　　調(diào)試稍繁瑣

　　需要定義私有協(xié)議調(diào)用原生功能（通訊錄、攝像頭等等）

　　基于以上幾點(diǎn)，我們制定了，

　　首頁(yè)+搜索列表是原生界面，活動(dòng)專(zhuān)題頁(yè)+產(chǎn)品詳情+預(yù)訂流程頁(yè)+支付均為H5混合頁(yè)面的技術(shù)體系

　　源碼托管及工作流

　　基于github flow，適合每周二/四上線，上線完成Master合并到future分支。

　　指引閱讀：http://www.ruanyifeng.com/blog/2015/12/git-workflow.html

　　本地服務(wù)跑起來(lái)

　　node / nginx / iis 起一個(gè)資源站點(diǎn)服務(wù)，再起一個(gè)站點(diǎn)服務(wù)用于托管頁(yè)面（如果資源沒(méi)有單獨(dú)域名就更方便了）

　　數(shù)據(jù)模擬+數(shù)據(jù)綁定

　　如果后臺(tái)有數(shù)據(jù)了，直接調(diào)用即可。

　　如果沒(méi)有可以用http://www.easy-mock.com

　　前端時(shí)間多前端綁定，后端人多后端綁定。去年用的ng1，現(xiàn)在在重構(gòu)到vue2，切換無(wú)壓力~

　　測(cè)試環(huán)境

　　git 提交代碼到 gitlab服務(wù)器，gitlab發(fā)出hook鉤子給 服務(wù)器jenkins，Jenkins接收信息，觸發(fā) 前端構(gòu)建

　　hosts綁定 服務(wù)器IP，打開(kāi)瀏覽器即可

　　開(kāi)發(fā)調(diào)試

　　M站： hosts綁定本機(jī)，chrome模擬機(jī)，sourceMap調(diào)試

　　app：charles/fiddler，手機(jī)指向電腦IP代理，開(kāi)發(fā)走debug包，調(diào)試模式，打開(kāi)safari 或者 chrome://inspect ，sourceMap調(diào)試

相關(guān)電子資料下載

• Web前端開(kāi)發(fā)需要學(xué)的有什么？ 73
• 前端開(kāi)發(fā)之函數(shù)式編程實(shí)踐 162
• Web前端開(kāi)發(fā)必常用的9個(gè)開(kāi)源框架 1960
• 重新構(gòu)想前端開(kāi)發(fā)！Kotlin推出新功能 1399
• 新手建站方法介紹：無(wú)需購(gòu)買(mǎi)服務(wù)器快速部署靜態(tài)網(wǎng)頁(yè) 382
• 七個(gè)可提高前端開(kāi)發(fā)效率的工具及插件 1662
• 3·8女神節(jié)，走近這幾位又美又颯的程序媛 1343
• 開(kāi)關(guān)電源的前端開(kāi)發(fā)防浪涌電路該怎樣設(shè)計(jì)方案 1544
• 6個(gè)高效的前端開(kāi)發(fā)工具 3619
• 盤(pán)點(diǎn)總結(jié)微前端開(kāi)發(fā)常見(jiàn)問(wèn)題和誤區(qū) 2048