百度Web App开发技术介绍_黎科峰

Plugins
CSS
bindings
权限 管理
JS扩展
rendering
loader
File
Storage
Device API
JS Engine (V8)
2D/3D 图形库
多媒体库
设备访问能力
Telephony • Phone • SMS • MMS • Contacts
Multimedia • Camera • Video • Audio • WebRTC
百度Web App开发技术介绍
黎科峰 百度移动· 云计算事业部
Agenda
移劢Web App介绍
• HTML5 & 移劢Web App
• 移劢Web App开发框架和平台
• Native App vs. 移劢Web App
百度移劢•云Web App平台介绍
• Web App平台整体架构
• Web App平台内核引擎介绍 • Web App平台框架介绍
安全机制
• 利用 Sandbox保 证Web App的安全 隔离 • 完善的权限
插件和扩 展机制
• 允许用户使 用其他语言 来扩展 Web App • 复用已有的 library
控制
Web App平台引擎架构
WebView
Webkit 网络 加速 模块
Web App 管理
标签扩 展
DOM
page Web GL
Sensors • Accelerometer • Geolocation • Vibrator • Gyro
Connection • GSM • Wi-Fi • USB • Bluetooth
开发框架
百度Web开发框架 百度移劢Web App开发框架介绍
百度开源Web开发框架
JavaScript工具箱，轻 量无侵入
HTML5 HTML5 CSS3 JavaScript
HTML5 新特性
离线应用
• 代码和数据可以缓存在本地，支持离线运行 • 支持多种音视频格式，可以在网页中直接播放音视频 • 2D/3D（webGL）图形渲染，可以在网页中绘制图形 • 在网页中获取精确的地理位置 • 网页中直接访问系统设备，比如摄像头，通讯录等
模型
MVC
Modules Management 自劢加载依赖的模块
容器
IOC
Unified Data Persistent Web开发人员能够便 捷地将数据存储在本 地和云端
控件库
UI
跨 平 台 的 一 致 性 与 完 善 的 终 端 适 配
支 持 开 发 者 远 程 设 备 调 试
We will offer more…
支持离线工作 设备访问能力 Native App的开发设计模式同样可以用在Web App上 云端升级 云端协同工作
Web App发展趋势
jQuery Mobile
基于jQuery库
丌仅仅是交互效果，而是一个完整的包含css的开发框架，可定制 各种风格的UI元素
使用HTML5标注，提供UI widgets、page-view等界面元素
WebFont
Video
Audio
Graphics
CSS Styling Layout
Location
JavaScript Events
Semantic HTML Sockets SSL
具有移劢应用平台所需的所有元素
HTML5 在移动设备上的支持
400 350 300 250 200 150
Opera Mobile 12
Q&A
移动Web App介绍
HTML5 & 移劢Web App 移劢Web App开发框架和平台 移劢Web App vs. Native App
HTML5
HTML5是HTML4、XHTML1和HTML DOM Level 2的新标准，解决了之前 规范中的很多问题，同时还改进了(X)HTML，使之更加适应Web应用开 发。 - WHATWG Wiki
开发框架介绍
百度移动•云Web App平台架构
搜索
云环 境
云存 储
消息 服务
关系 服务
缓存 服务
云转 码
云执 行
百度移动Web App框架
SDK
百度移动Web App内核引擎
百度易平台
Android
iOS
etc
百度移动•云Web App平台优势
Look & Feel
本地能力扩展 云端能力 完善的开发环境 同时保留原有Web优点 • 编程简单 • 终端适配 • 无需下载 • 安全
富客户端Web应用的框架
Tangram
ER (Enterprise RIA)
集成事件管理的企业级 UI控件库
ECUI (Enterprise Class UI)
垂直页面级别的用户行为 统计框架
Marmotu
百度 移动Web App 开发框架
Web Services 为开发者在Web App 的生命周期内外，提 供后台唤醒、消息 PUSH等多方面支持
触控输入
网络增强 消息推送 多线程 跨域访问
• 支持客户端跨域请求
HTML5 就是移动应用平台
Device Access Camera Network HTTP AJAX Contacts SMS Orientation Gyro
File Systems Databases App Caches
Workers & Parallel Processing Cross-App Massaging
YFra Baidu biblioteks
No 快速 C/C++/Java 门槛高，开发周期长 必须需要
Yes，需local storage支持
No，本地cache 略慢 HTML/JavaScript 入门快，开发周期短 不用安装 或特殊的安装方式 （PhoneGap） 较好
隐私安全性
较差
百度移动•云Web App开发平台
百度移劢•云Web App开发平台架构 平台引擎介绍
音视频
绘图能力 地理信息 设备访问 文件系统访问 高级排版 动画特效
• 网页中访问文件系统对象，读取文件属性、内容
• 支持更多网页排版功能，囿角、颜色渐变、阴影等等 • 支持多种的元素变换和移劢，支持创建各种劢画效果 • 增加多点触控事件支持，在触屏设备上支持更多的操作 • 网页应用可以访问底层网络信息，包括socket、网络连接信息等 • 服务端消息推送，桌面消息推送 • 支持脚本并行执行，提高脚本执行效率
Mojito
• Node.js （配合YQL, YUI） • 致力于开源技术不标准 两大组成部分 • Mojito: 基于Node.js的开发框架
Yahoo! Manhattan
• Manhattan: 云端运行环境 跨平台多环境支持 • 支持本地部署，或云端部署 • 可根据有无JavaScript自劢切换交 互 • 可包装成为移劢设备的本地应用 • 模糊 Client & Server 的界限
Look & Feel
智能展现，使Web具有App的交互体验
基于页面分析的智能渲染，Smart Tags 内置Web控件，App交互Widgets
全面支持HTML5标准 & more
基于用户行为的机器学习
App式的交互体验
预加载后续页面上的相关内容
APP式的交互体验
能力, 突破浏览器的限制
离线能力 Web App间交互能力 Web App和Native App交互能力 外设能力 计算能力
移动 Web Apps
Financial Times YouTube 百度移劢应用 《黎明帝国》
Native vs. Web Apps
Native App 可移植性 硬件能力发挥 No Yes Web App Yes 默认不能 需要浏览器扩展
数据存储
是否必须联网运行 运行速度 软件开发 是否需要安装
应用由多个page-view构成，同一时刻只显示某一个page-
view，它们统一由页面控制子系统管理
Sencha (cont.)
PhoneGap
PhoneGap是一套非常流行的移劢Web App开发框架，包括如下特性：
开源、免费
跨平台框架，支持大多数主流移动平台
基于HTML5标准，支持HTML5、CSS3和JavaScript 只写一次，到处执行 支持云端编译 包含丰富的API
移动Web App平台
webOS 组织（公司） 是否开源 进度 JS开发框架 Runtime 主要模块 HP(Palm) 进行中 3.0.5 Released Enyo Webkit + Node.js LunaSysMgr, Luna Service Bus, Browser Server & Webkit, Core System Services B2G Mozilla 开源 2012- 06-01 Alpha release None Gecko Gaia, Gecko, Gonk Tizen Samsung 开源 Beta released Extended jQuery Mobile Webkit Application Layer, Tizen API Layer , Tizen Core Service, Kernel Layer
http://developer.baidu.com
Firefox Mobile 10 iOS 5 Meego
BlackBerry OS 7
Android 4.0 Bada 2.0 webOS 2.2
100 50 0
Android 2.3
Mango 百度浏览器
移动Web App
移劢Web app应该具有以下能力:
和Native App一样的体验
跨设备和跨平台能力
基于 WebKit
• 兼容 • 性能优化 • 扩展
全面支持 HTML5
• 离线应用 • 音视频 • webGL • Local Storage • Web Worker • Web Socket
本地访问 能力
• Camera • 电话 • 通讯录 • 文件系统
本地管理 能力
• 安装/卸载 • 生命周期 • 通知机制
移动Web App开发框架和平台
移动Web App开发框架
• • • • jQuery Mobile Sencha PhoneGap Yahoo Cocktail
移动Web App平台
• webOS • B2G • Tizen
Yahoo Cocktails
主要依赖开源技术 • HTML5+CSS+JavaScript
云端能力
云存储能力 云计算能力 云执行 Web App云端行为分析和统计能力 云端消息推送能力 云端部署能力 云转码能力
云-端结合
云平台
云存储 云执行 云推送
本地存储
本地执行
消息 Agent
客户端平台
云转码
移劢设备使用的互联网浏览代理
协劣移劢站点/App的建立
百度移动•云Web App平台引擎