美团点评技术沙龙13-酒旅贬测产谤颈诲架构体系及演进
?
2 likes?1,092 views
伴随酒旅移动端业务的快速增长，更灵活稳定的技术架构成了支撑业务扩张的重要基石。Hybrid 架构凭借了快速迭代和试错的能力以及流畅的体验和优秀的安全能力，成为我们技术深入的重点。本次分享主要介绍酒旅在过去一段时间中，围绕着Hybrid架构体系做的建设和一些基础设施演进。
![Config File Management Sys.
{
"data": [
{
"name": "xxx",
"version": "1.0.0",
"src": "https://cdn1.url.zip",
"useOfflineZip": true,
"zipVersion": 000,
"offlinePreUrl": "https://kyfw.12306.cn/"
},
{
"name": "yyy",
"version": "1.0.0",
"src": "https://cdn2.url.zip",
"useOfflineZip": true,
"zipVersion": 111,
"offlinePreUrl": "http://mc.meituan.net/hotel/"
}
]
}](https://image.slidesharecdn.com/random-161022081840/85/13-Hybrid-23-320.jpg)
美团点评技术沙龙13-酒旅贬测产谤颈诲架构体系及演进
- 1. 酒旅 Hybrid 架构体系及演进 马荃 @ 新美大酒旅前端 20161017
- 2. 酒旅 住宿 大交通 境内外度假 多端 同质工具化 快速迭代 弱网 业务 产物 基于LBS 消息推送 酒店 机票 火车票 船票 旅游 度假 特点 安全性及其他… … …
- 3. ? H5 的快速迭代试错的业务能力 vs. Native 稳定的发版周期：节奏快慢 如何取舍？ ? H5 的跨平台 vs. Native 单一系统支持：开发资源（人力成本）如何控 制？ ? H5 的低性能 和 Native 的极致体验：如何兼顾？ 如何做一个好的移动端架构满足业务的发展期和成长期？
- 4. Native H5 说明 ?效（??成本） √ H5 页面开发不需要单独开发 iOS 和 Android ??（引流） √ H5 可以跨平台投放、内嵌至各种APP 快速迭代 √ H5 灵活发版，上线无需审核 跨平台 √ H5 跨平台，运行环境不区分操作系统 更新 √ H5 可以静默更新不需要应用商店推送更省流量 性能 √ Native 性能体验很棒，不局限在容器内，渲染更快 基于LBS（设备调?） √ Native 可以与通过 API 直接调用外置设备 安全 √ Native 是安全沙箱
- 5. ?性能被 Native 完爆 ?体验被 Native 完爆 虽然 H5 部署灵活、快速迭代、?案试错、引流冲量、跨平台、?效率、低成本、三观正，但是：
- 6. Hybrid 说明 ?效（??成本） √ H5 页面开发不需要单独开发 iOS 和 Android ??（引流） √ H5 可以跨平台投放、内嵌至各种APP 快速迭代 √ H5 灵活发版，上线无需审核 跨平台 √ H5 跨平台，运行环境不区分操作系统 更新 √ H5 可以静默更新不需要应用商店推送更省流量 性能 × 简单的融合?法解决 H5 的性能问题 基于LBS（设备调?） √ Native 可以与通过 API 直接调用外置设备 安全 √ Native 是安全沙箱
- 8. ?介绍酒旅的 Hybrid 架构在演进的过程中解决了哪些问题 ?对 Hybrid 架构的思考以及展望 ?Q&A：顺带招? 本次分享主要内容：
- 9. ?简单封装了 Native 的能?，但是性能还是 H5 原来的性能 ?新业务接?，各类业务技术栈和选型形态各异，对接后体验效果参差不? 酒旅 Hybrid 架构的前世
- 10. Hybrid 说明 ?效（??成本） √ H5 页面开发不需要单独开发 iOS 和 Android ??（引流） √ H5 可以跨平台投放、内嵌至各种APP 快速迭代 √ H5 灵活发版，上线无需审核 跨平台 √ H5 跨平台，运行环境不区分操作系统 更新 √ H5 可以静默更新不需要应用商店推送更省流量 性能 × 简单的融合?法解决 H5 的性能问题 基于LBS（设备调?） √ Native 可以与通过 API 直接调用外置设备 安全 √ Native 是安全沙箱
- 12. 酒店 机票 ??票 船票 ?票 Open WebView loadUrl（HTTP） Render + Paint … …
- 16. 我们解决的第一个问题：资源离线
- 17. Config File Management Sys. ${md5}.zip
- 18. 我们解决的第二个问题：工程化
- 19. . ├── README.md ├── build │ ├── 106e21e3269faa76b40f8288f1937999.zip │ ├── assets │ ├── mods │ ├── pages │ └── widgets ├── build.sh ├── gulp │ ├── build.js │ ├── eslint.js │ └── watch.js ├── gulpfile.js ├── offline.json ├── package.json ├── r.zip ├── repo-info.json └── src ├── assets ├── mods ├── pages └── widgets
- 20. . ├── README.md ├── build │ ├── 106e21e3269faa76b40f8288f1937999.zip │ ├── assets │ ├── mods │ ├── pages │ └── widgets ├── build.sh ├── gulp │ ├── build.js │ ├── eslint.js │ └── watch.js ├── gulpfile.js ├── offline.json ├── package.json ├── r.zip ├── repo-info.json └── src ├── assets ├── mods ├── pages └── widgets $ gulp server $ gulp build $ gulp zip
- 21. 工程化的资源离线方案：离线包
- 23. Config File Management Sys. { "data": [ { "name": "xxx", "version": "1.0.0", "src": "https://cdn1.url.zip", "useOfflineZip": true, "zipVersion": 000, "offlinePreUrl": "https://kyfw.12306.cn/" }, { "name": "yyy", "version": "1.0.0", "src": "https://cdn2.url.zip", "useOfflineZip": true, "zipVersion": 111, "offlinePreUrl": "http://mc.meituan.net/hotel/" } ] }
- 24. local assets > build > local.zip > https://cdn1.url.zip Config File Management Sys. Interceptor
- 25. Interceptor http://mc.meituan.net/hotel/common/jquery/dist/jquery.min.js mc.meituan.net /hotel/common/jquery/dist/jquery.min.js INTERCEPT Correct. - local error. - new request
- 26. 酒店 机票 ??票 船票 ?票 Open WebView loadUrl（HTTP） Render + Paint … …
- 27. 0 0.225 0.45 0.675 0.9 1.125 前置筛选页 车次列表页 车次详情页 加载耗时（s） 离线前加载耗时（s） 离线后加载耗时（s） 0 3.5 7 10.5 14 17.5 前置筛选页 车次列表页 车次详情页 加载耗时（s） 离线前加载耗时（s） 离线后加载耗时（s） WIFI环境下资源加载耗时 3G环境下资源加载耗时
- 29. ?应?缓存（HTML5 Application Cache）（被新的 Web 标准废弃） ?Cache（Native）（第?次加载体验如何保障） 资源问题其它解决?案：
- 30. ?前端界?展?的兼容性出问题了，修改了?个 CSS ?件，?了2?代码 ?配合接?修改?个逻辑，改了10?代码 ?PM 说：要发版 场景1：我修复了?个Bug，要上线 But，我的离线包有 1Mb 的大小
- 31. local assets > build > local.zip > https://cdn1.url.zip Do something more intelligent Interceptor Config File Management Sys.
- 32. The idea is simple, the scene is complex local assets > build > local.zip > https://cdn1.url.zip White list, low cost access Incremental Calc Auto push Config File Management Sys.
- 37. 酒店 机票 ??票 船票 ?票 Open WebView loadUrl（HTTP） Render + Paint … …
- 38. ?前端摆脱对 webview 的依赖（废话…） ?串?改为并? ?预载 Open Webview
- 39. 酒店 机票 ??票 船票 ?票 Open WebView loadUrl（HTTP） Render + Paint … …
- 41. ?桥协议 （桥协议是客户端这个宿主为前端提供的拓展 API） 如何解决类似基于 LBS 场景的原? API 调?？
- 43. Demo
- 45. ?业务闭环 ?H5引流 → Native下单 ?服务闭环 ?机场信息 → 短信通知 → Native查看?程 ?预定酒店 → ?动导航 桥协议还能怎么?？
- 46. ?更加?动化、?程化的离线包接?体验，降低接?成本；数据收益可视化 ；可以离线活动??；提升推包到达率。 ?更加完善的桥协议，KNB 共建，打通从引流到交易到服务的链路闭环， 体验为? ?HTTP 请求的移动性能 ：SPDY（已废弃）、HTTP2 对 Hybrid 的规划
- 47. ?vue + Weex：Write once, run everywhere ?reactNative：Learn once, write anywhere ?reactMix 思考：Hybrid 会被终结吗？
- 48. Q & A