WebApp开发技术介绍
Agenda
移劢WebApp介绍
?HTML5&移劢WebApp
?移劢WebApp开发框架和平台
?NativeAppvs.移劢WebApp
百度移劢?云WebApp平台介绍
?WebApp平台整体架构
?WebApp平台内核引擎介绍
?WebApp平台框架介绍
Q&A
HTML5&移劢WebApp
移劢WebApp开发框架和平台
移劢WebAppvs.NativeApp
移动WebApp介绍
HTML5
HTML5CSS3JavaScript
HTML5是HTML4、XHTML1和HTMLDOMLevel2的新标准，解决了之前
规范中的很多问题，同时还改进了(X)HTML，使之更加适应Web应用开
发。
-WHATWGWiki
HTML5
?代码和数据可以缓存在本地，支持离线运行离线应用
?支持多种音视频格式，可以在网页中直接播放音视频音视频
?2D/3D（webGL）图形渲染，可以在网页中绘制图形绘图能力
?在网页中获取精确的地理位置地理信息
?网页中直接访问系统设备，比如摄像头，通讯录等设备访问
?网页中访问文件系统对象，读取文件属性、内容文件系统访问
?支持更多网页排版功能，囿角、颜色渐变、阴影等等高级排版
?支持多种的元素变换和移劢，支持创建各种劢画效果动画特效
?增加多点触控事件支持，在触屏设备上支持更多的操作触控输入
?网页应用可以访问底层网络信息，包括socket、网络连接信息等网络增强
?服务端消息推送，桌面消息推送消息推送
?支持脚本并行执行，提高脚本执行效率多线程
?支持客户端跨域请求跨域访问
HTML5新特性
具有移劢应用平台所需的所有元素
DeviceAccess
Camera
Location
Contacts
SMS
Orientation
Gyro
Network
HTTP
AJAX
Events
Sockets
SSL
WebFontVideoAudioGraphics
CSSStylingLayout
JavaScript
SemanticHTML
FileSystems
Databases
AppCaches
Workers&
Parallel
Processing
Cross-App
Massaging
HTML5就是移动应用平台
0
50
100
150
200
250
300
350
400
OperaMobile12
FirefoxMobile10
iOS5
Meego
BlackBerryOS7
Android4.0
Bada2.0
webOS2.2
Android2.3
Mango
百度浏览器
HTML5在移动设备上的支持
移劢Webapp应该具有以下能力:
和NativeApp一样的体验
跨设备和跨平台能力
支持离线工作
设备访问能力
NativeApp的开发设计模式同样可以用在WebApp上
云端升级
云端协同工作
移动WebApp
WebApp发展趋势
jQueryMobile
基于jQuery库
丌仅仅是交互效果，而是一个完整的包含css的开发框架，可定制
各种风格的UI元素
使用HTML5标注，提供UIwidgets、page-view等界面元素
应用由多个page-view构成，同一时刻只显示某一个page-
view，它们统一由页面控制子系统管理
Sencha(cont.)
PhoneGap是一套非常流行的移劢WebApp开发框架，包括如下特性：
PhoneGap
开源、免费
跨平台框架，支持大多数主流移动平台
基于HTML5标准，支持HTML5、CSS3和JavaScript
只写一次，到处执行
支持云端编译
包含丰富的API
?jQueryMobile
?Sencha
?PhoneGap
?YahooCocktail
移动WebApp开发框架
?webOS
?B2G
?Tizen
移动WebApp平台
移动WebApp开发框架和平台
?HTML5+CSS+JavaScript
?Node.js（配合YQL,YUI）
?致力于开源技术不标准
主要依赖开源技术
?Mojito:基于Node.js的开发框架
?Manhattan:云端运行环境
两大组成部分
?支持本地部署，或云端部署
?可根据有无JavaScript自劢切换交
互
?可包装成为移劢设备的本地应用
?模糊Client&Server的界限
跨平台多环境支持
YahooCocktails
Yahoo!Manhattan
Mojito
webOSB2GTizen
组织（公司）HP(Palm)MozillaSamsung
是否开源进行中开源开源
进度3.0.5Released2012-06-01
Alpharelease
Betareleased
JS开发框架EnyoNoneExtendedjQuery
Mobile
RuntimeWebkit+Node.jsGeckoWebkit
主要模块LunaSysMgr,
LunaServiceBus,
BrowserServer&
Webkit,
CoreSystem
Services
Gaia,
Gecko,
Gonk
ApplicationLayer,
TizenAPILayer,
TizenCoreService,
KernelLayer
移动WebApp平台
FinancialTimes
YouTube
《黎明帝国》
百度移劢应用
移动WebApps
Nativevs.WebApps
NativeAppWebApp
可移植性NoYes
硬件能力发挥Yes默认不能
需要浏览器扩展
数据存储YesYes，需localstorage支持
是否必须联网运行NoNo，本地cache
运行速度快速略慢
软件开发C/C++/Java
门槛高，开发周期长
HTML/JavaScript
入门快，开发周期短
是否需要安装必须需要不用安装
或特殊的安装方式
（PhoneGap）
隐私安全性较差较好
WebApp开发平台
WebApp开发平台架构
平台引擎介绍
开发框架介绍
WebApp平台架构
云存
储
关系
服务搜索
云执
行
WebApp框架
WebApp内核引擎
平台AndroidiOSetc
云转
码
SDK
消息
服务
缓存
服务
云环
境
Look&Feel
本地能力扩展
云端能力
完善的开发环境
?编程简单
?终端适配
?无需下载
?安全
同时保留原有Web优点
WebApp平台优势
智能展现，使Web具有App的交互体验
基于页面分析的智能渲染，SmartTags
内置Web控件，App交互Widgets
全面支持HTML5标准&more
基于用户行为的机器学习
Look&Feel
App式的交互体验
预加载后续页面上的相关内容
APP式的交互体验
离线能力
WebApp间交互能力
WebApp和NativeApp交互能力
外设能力
计算能力
能力,突破浏览器的限制
云存储能力
云计算能力
云执行
WebApp云端行为分析和统计能力
云端消息推送能力
云端部署能力
云转码能力
云端能力
客户端平台
云平台
云存储云执行
本地存储本地执行
云推送
消息
Agent
云-端结合
移劢设备使用的互联网浏览代理
协劣移劢站点/App的建立
云转码
百度移动?云WebApp平台引擎
基于
WebKit
?兼容
?性能优化
?扩展
全面支持
HTML5
?离线应用
?音视频
?webGL
?Local
Storage
?Web
Worker
?Web
Socket
本地访问
能力
?Camera
?电话
?通讯录
?文件系统
本地管理
能力
?安装/卸载
?生命周期
?通知机制
安全机制
?利用
Sandbox保
证Web
App的安全
隔离
?完善的权限
控制
插件和扩
展机制
?允许用户使
用其他语言
来扩展
WebApp
?复用已有的
library
WebView
JSEngine
(V8)
Webkit
Device
API
Plugins
StorageFile
WebGL
标签扩
展
JS扩展
rendering
DOM
loader
CSS
page
bindings
2D/3D
图形库多媒体库
WebApp
管理
网络
加速
模块
WebApp平台引擎架构
权限
管理
设备访问能力
Telephony
?Phone
?SMS
?MMS
?Contacts
Multimedia
?Camera
?Video
?Audio
?WebRTC
Sensors
?Accelerometer
?Geolocation
?Vibrator
?Gyro
Connection
?GSM
?Wi-Fi
?USB
?Bluetooth
Web开发框架
WebApp开发框架介绍
开发框架
百度开源Web开发框架
Tangram
ER
(EnterpriseRIA)
Marmotu
ECUI
(EnterpriseClassUI)
富客户端Web应用的框架
垂直页面级别的用户行为
统计框架
JavaScript工具箱，轻
量无侵入
集成事件管理的企业级
UI控件库
为开发者在WebApp
的生命周期内外，提
供后台唤醒、消息
PUSH等多方面支持
WebServices
ModulesManagement
UnifiedDataPersistent
MVC
模型
IOC
容器
UI
控件库
支
持
开
发
者
远
程
设
备
调
试
自劢加载依赖的模块
Web开发人员能够便
捷地将数据存储在本
地和云端
跨
平
台
的
一
致
性
与
完
善
的
终
端
适
配
移动WebApp开发框架
Wewilloffermore…
|
|
