Transcript 百度云：加速传统互联网的WebApp化进程

百度云：加速传统互联网的WebApp化进程
薛晶晶 百度移动云平台部云浏览组架构师
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
摘要
•
•
•
•
西米露平台与Smart Layout
传统互联网站点向移动互联网的迁移
Smart Layout加速WebApp化进程
Smart Layout技术揭秘
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
云端一体的新型WebApp平台：西米露
a)
b)
c)
d)
e)
f)
跨平台：HTML5+JS
本地能力扩展+云服务
随时可访问（离线运行）
随动反馈编程
云端一体
流行WebApp框架集成
WebApp Framework
Smart Layout
WebKit
PCS
WebApp Runtime
JS Engine
Kernel
Wormhole
Kernel
System
Client
Cloud
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Smart Layout
• 智能化内容分析与布局技术
– Smart代表智能化
– Layout代表展示布局
• Smart Layout目标
– 提升传统互联网页面在移动终端上的使用体验
– 使互联网上的资源能够更好得被开发者使用
• 为什么要做Smart Layout？
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
为什么要做Smart Layout？
•
传统互联网站点向移动互联网站点的迁移（数据来源：百度移动搜索）
搜索导流量
A
B
C
D
E
总计
•
无线化比例
Web站数量
26
105
371
963
2621
4086
2011
2012
比例增长率
92.60%
86.10%
70.40%
41.20%
17.30%
29.60%
100.00%
88.60%
74.30%
50.40%
29.20%
40.30%
8.00%
2.90%
5.50%
22.40%
68.80%
36.20%
无线化站点中WebApp（HTML5+JS）占比<10%
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
站点无线化迁移难度在哪里？
• 传统PC终端与移动终端的差异
– 屏幕尺寸、交互方式、网络状况、浏览器能力等
• 迁移技术难度
–
–
–
–
终端识别和适配
场景识别与转换
PC端与移动端的多端数据同步
WebApp站点开发复杂度高
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Smart Layout如何解决这个问题？
• 对外提供Site->App（云应用生成服务）
–
–
–
–
生成效果：组件化的WebApp和NativeApp
生成过程：权限验证->效果定制->移动域名绑定->发布
平台服务：可视化定制，访问统计，搜索优化
加速传统互联网的WebApp化进程
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Smart Layout：在百度内部的应用DEMO
• 手机访问
– m.baidu.com/news
– m.baidu.com/搜索
“乔布斯传”、“斗
破苍穹”
– 。。。
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Smart Layout：Site->App Demo
• 手机访问：
– http://0.smartlayout.duapp.com/
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Smart Layout：Site->App技术揭秘
•
•
•
•
•
整体架构
智能化的站长平台
场景识别与转换
终端识别
组件与适配
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Site->App技术揭秘：整体架构
AppUI
AppDB
Internet
SurfServer
SiteApp站长平台
PageDB
PageAnalyzer
适配挖掘
模板挖掘
Rules
页面类型挖掘
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Site->App技术揭秘：智能化的站长平台
• 多数的站长都不是开发者
–
–
–
–
权限认证
可视化定制
移动域名绑定
发布
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Site->App技术揭秘：场景识别与转换
• 页面类型识别
– 解决场景识别问题
• 有页面级模式的类型
– 进行全页面结构化数据抽取
– 解决资源来规模页面的浏览问题
• 无页面级模式的类型
– 泛结构化数据抽取
– 解决索引类页面和长尾页面的浏览问题
• 大规模页面计算
– 时效性：快速生效
– 完备性：优化大多数页面
– 是百度无法被复制的技术优势
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Site->App技术揭秘：终端识别
• 终端数据库挖掘
– 开源终端库数据
– 手机类网站挖掘
• 终端识别
– 终端与浏览器识别
– UA与Header信息
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Site->App技术揭秘：组件与适配
• 组件分层设计
– 基础UI组件
– Combo组件与Layout组件
– 云服务组件
• 组件与后端数据的绑定
– 后端的结构化数据和前端组件的映射关系
– 后端数据的更新可以自动同步到用户端
• 终端适配
– 对不同终端做到组件级别的适配
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
Site->App案例启示
•
•
•
•
站长不等于开发者
页面级别模式和分块级别模式
数据与展现的分离
结合百度搜索的优势
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
谢谢
薛晶晶
Email：[email protected]
微博ID：@薛六日
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！
www.top100summit.com