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