Native App、Hybrid App和Web APP移动开发，谁主未来

• 开发速度快• 推⼲⼴广成本低• 发版优势• 定制性⾼高• 开放

• 性能⾼高• 开销可控• 动画流畅

• 系统API

Native

Web开发成本高、速度慢更新成本很大

开发成本低

http://www.developereconomics.com/downloads/can-html5-compete-native/

多少Native app可以⽤用web技术实现

37%

HTML5 Phonegap

49%

Appcelerator

63%

30,339 Apps

Why not HTML5Why not HTML5Why not HTML5

http://www.developereconomics.com/downloads/can-html5-compete-native/

APIs 37%

与Native交互29%

性能46%

Why not

HTML5

87.5%转场、动画问题

调研百度移动站点

•元素固定位置•图⽚片或tab slider•弹出层•加载更多•⽆无限下拉

37%HTML5

400+ Android App （国内，⾮非游戏、⼯工具）

滑图浏览

软键盘控制

离线能⼒力

可滑动的容器

多级菜单

卡头效果

可滑动的tab

刮奖

短信能⼒力在线IM

摇⼀一摇

元素固定位置

弹出层

⽆无限滚屏

下拉刷新分享

88%最终

能⼒力

离线能⼒力输⼊入调起键盘

设备状态、系统控制多媒体处理⽂文件系统跨应⽤用调⽤用

容器

可滑动的容器可滑动的Tab

卡头效果下拉刷新⽆无限滚屏

组件

分享弹出层划图浏览

IM

多级菜单刮奖摇⼀一摇

400+ Android App （国内，⾮非游戏、⼯工具）

http://www.tmtpost.com/159615.html https://careers.microsoft.com/jobdetails.aspx?ss=&pg=0&so=&rw=2&jid=160633&jlang=EN&pp=SS

• 内容呈现• 时效性功能• 需快速迭代部分• 开放给第三⽅方• 运⾏行容器

• 基础API• 系统核⼼心能⼒力• 复杂或重要交互

Native

Web

• Native代码针对关键问题，代码规模⼩小，可控

• 转场、动画、重点组件由Native完成

• 释放web的灵活性到Native中

• 单个webview变⼩小，局部性能可控

加速⼿手段• DOM：极⼤大缩减DOM体积，复⽤用webview减少重绘

• Javascript： 避免⼤大量DOM Event监听

• 动画：Android View 代替 CSS3

• ⺴⽹网络：资源离线；webview预加载、预渲染

• 复杂控件：嵌⼊入Native控件

• 内核：T5浏览器

FPS

从 30~40 到

55~60

性能(⾸首要⺫⽬目标)

原⽣生动画与控件缩减DOM

可离线T5内核

灵活性(带来⽆无限可能)

随时更新动态扩展低耦合⽆无限定制

能⼒力

设备API

系统能⼒力封装webview控制⼒力云能⼒力

Web

⼀一份代码随处运⾏行

Web for all

Hybrid

主要内容

n  移动时代 Hybrid Web 困境

n  问题到此为止，AK（AlloyKit） 产生与架构

n  WebView 内核初始化提速n  基于 URL 路由的前端静态资源离线机制n  动态 cgi 数据拉取优化方案n  Web 规范，UI Kit Pron  Web 能力增强，JS Api

n  多端融合思考

Hybrid硬件性能提升 Web 迭代能力 客户端高级能力

v  渲染性能

v  加载性能

移动时代 Hybrid Web 困境

n  打开慢、打不开 n  移动网络不稳定，加载时间⻓长

n  一直在菊花、到处是菊花 n  cgi 加载耗时、成功率

n  性能差、卡 n  局部滚动、图片展示

n  体验差，有些功能 Web 做不了 n  无法使用系统级 api，组件，多选图片

n  调试不方便 n  pc 调试

AK

关于 AK

AK Alloy+Kit

AlloyTeam

多端合金

Web

Mobile

ClientServer

开发套件

解决方案

高性能 Hybrid Web 开发框架

Webview

体验

AK 用户与数据

200+ App5 BG 9 D

100+ JSApi 19+亿/天

10+亿/天

AK 架构体系

打开慢、打不开、菊花？

n  耗时分析

n  Webview 内核初始化耗时 n  前端 Web 资源加载耗时 n  动态 cgi 加载耗时

缩短白屏，消灭菊花

n  Webview 内核初始化提速

n  pc：180ms，ios：50ms n  android：4s

手Q android 4.7.2

缩短白屏，消灭菊花

n  Web 前端加载耗时？ n  性能优化 n  还能做什么

n  缓存，第一次怎么办？ n  H5 离线？ 《进击的Hybrid App，量身定做缓存机制》

AK 的离线机制

n  特征

n  zip offline n  基于 URL 路由替换

n  多种离线更新方式

n  可随客户端打包

n  传输优化

n  zip 压缩传输、增量 n  可断点、重试

n  前端透明 n  接入方便 n  灵活选择离线文件

n  机制灵活可控 n  废弃、过期

n  安全校验 n  md5 防篡改

AK 的离线机制

AK 的离线机制

n  完善的离线包更新机制

n  资源打包到客户端 n  Web App 启动 n  手Q 登录 & 启动 n  实时 push

n  实时 Push

n  全员 n  耗资源 n  使用率 n  分号段 n  分时

AK 的离线机制

n  更优的资源下载策略

n  检查更新 http cgi -> sso socket n  成功率 98.5% -> 99.94%

n  下载引擎优化 n  断点续传 n  分块下载 n  重试逻辑

AK 的离线机制

n  更优的资源更新策略 - 增量更新

n  基于压缩包增量文件列表

MD5 比对

Webapp-v3_1 覆盖

AK 的离线机制

n  更优的资源更新策略 - 增量更新

n  基于二进制差量算法 bsdiff Chromium Courgette

Webapp-v3_1

bspatch

bsdiff

AK 的离线机制

n  影响 bsdiff 效果的因素

n  zip 包压缩模式：标准压缩、仅打包 n  zip 包文件修改时间，打包顺序（减少额外信息） n  zip 包文件内容

n  js 进行 uglify 压缩，变量名可能引起大幅变更

增量包大小减少 80%+

AK 的离线机制

n  离线文件安全

n  verify.json (文件 md5列表) n  verify.signature MD5 + 非对称加密

AK 的离线机制

n  更优的资源调度 - 控制中心 AK CCenter n  过期机制 n  预下载 n  批量更新 n  断点续传 n  重试逻辑

离线化的价值

手Q吃喝玩乐首页数据来源：habo.oa.com

离线包机制

手Q群成员列表页面数据来源：habo.oa.com

动态数据拉取优化方案

n  静态资源 100ms ~ 1s

n  动态数据，cgi 数据，定位信息等， 4s ~ 6s

n  AJAX & 直出？

n  内容 & 客户端环境 n  离线机制

动态数据拉取优化方案

n  模拟客户端弱网络、无网络下体验

n  localStoage & 手Q JS Api （20M）

n  数据缓存层解决方案

n  优先使用 localStorage 数据

命名空间、有效期、版本、容错、默认数据、重要性、重写 Clear

动态数据拉取优化方案

n  提升缓存命中率

n  cgi url + param，key/value 存储？ n  default data，适应性问题？ n  关系 + 数据元素

30-40 命中率？

提升数据缓存命中率

优化前：只有重复打开的页面才能命中缓存，首次打开详情页本地无缓存

优化后：首次打开详情页也能命中缓存，一般有 30% 的用户会进入详情页

思路：命中率、允许数据冗余、数据一致性 命中率：90%+

动态数据优化价值

手Q群成员列表页面

动态数据拉取优化方案

n  基于 SSO Request 的数据协议优化

n  ajax http n  防止恶意提交

n   ip、限频、脏词n   验证码

n  手Q 通讯通道 SSOn  基于 socketn  更稳定、更高效n  更安全

n  开发支持

回顾

打开慢、打不开、菊花？

n 内核启动优化

n  Webview 热启动

n 静态资源

n  离线化

n  动态数据

n  基于 localStorage 缓存 n  利用数据关系提升命中率 n  利用 SSO Request 提升效率 & 安全性

AK

体验差 - JS Api 增强

n  补⻬齐系统能力

n  获取多张图片、呼起聊天窗、小红点消息通知...

n  h5 api 兼容

n  地址位置 android、本地音视频播放

n  更高效原生组件 & ios lua 客户端插件

n  图片查看器、城市选择器、列表选择器

n  Webview 能力扩展

n   data 20M（localStorage）n   Webview 导航、控制n   SSO Request

开发调试

多端融合

n  多端团队

n  跨端技术堆栈

n  团队协作

n  版本化思维

n  前端文件版本化n  数据接口版本化n  版本控制策略