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

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

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

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

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

　　可離線使用

　　調(diào)試透明

　　缺點(diǎn)：

　　開發(fā)成本高

　　兼容設(shè)備有限

　　商店內(nèi)容限制

　　用戶更新不能控制

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

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

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

　　兼容多個平臺，ios/android/M站/微信/小程序

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

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

　　可離線使用

　　缺點(diǎn)：

　　用戶體驗(yàn)不如純原生應(yīng)用，沒有絢麗的效果，渲染/響應(yīng)速度慢，動畫支持不好等等

　　整體打包文件比較大

　　調(diào)試稍繁瑣

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

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

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

　　源碼托管及工作流

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

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

　　本地服務(wù)跑起來

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

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

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

　　如果沒有可以用http://www.easy-mock.com

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

　　測試環(huán)境

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

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

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

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

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

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

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