陈子舜-html5 based web app

未来 Web App 初探未来 Web App 初探利用 HTML5打造 Web APP

PuterJam @ tencent 2011

PuterJam @ tencent 2011

7 年前 很多人这么称呼我们

7 年前 很多人这么称呼我们

• 页面仔

• 僵尸仔

• 页面仔

• 僵尸仔页面重构页面重构

前端开发前端开发

• 毕业梦想

• 成为一个“程序员”

• 毕业梦想

• 成为一个“程序员”

Web ApplicationWeb Application

早期的 Web APP

• 仅仅是去掉了地址栏的浏览器快捷方式• 仅仅是去掉了地址栏的浏览器快捷方式

• HTA无法跨平台

• HTA不适合传播

• 安全性差

• 和桌面结合差

• 不具备可维护性

• 开发效率底

• ......

• HTA无法跨平台

• HTA不适合传播

• 安全性差

• 和桌面结合差

• 不具备可维护性

• 开发效率底

• ......

早期 Web APP的问题

理想中的 Web APP

• 云端和桌面的无缝结合

• 极致的 UI表现

• 跨平台兼容

• 云端和桌面的无缝结合

• 极致的 UI表现

• 跨平台兼容

云端和桌面的无缝结合

• 方便的快捷方式

• 不仅仅是 <input type="file"/>

• 离线应用

• 方便的快捷方式

• 不仅仅是 <input type="file"/>

• 离线应用

更方便的快捷方式

不仅仅是 <input type="file"/>

• 本地和 Web之间文件拖拽

• 本地文件流操作

• 更多本地硬件支持

• 麦克风 / 摄像头

• GPS/AGPS

• 方向 / 重力感应器

• 多点触摸

• 本地和 Web之间文件拖拽

• 本地文件流操作

• 更多本地硬件支持

• 麦克风 / 摄像头

• GPS/AGPS

• 方向 / 重力感应器

• 多点触摸

是时候提供离线服务了

• 应用在线安装

• Application Cache

• 用户数据存储

• Web Storage

• 应用在线安装

• Application Cache

• 用户数据存储

• Web Storage

• 7 年前的重构是一门技术

• 现在的重构是一门艺术

• 7 年前的重构是一门技术

• 现在的重构是一门艺术

极致的 UI表现

• 更高效的页面布局

• 更少量的图片数量

• 更完美的动画表现

• 更高效的页面布局

• 更少量的图片数量

• 更完美的动画表现

• 完美的布局解决方案

• Css3 Flexible box

• 完美的布局解决方案

• Css3 Flexible box

<div style="display: box;box-orient: horizontal;">  <div id="left"> ... </div>  <div id="mid" style="box-flex: 1"> ... </div>  <div id="right"> ... </div></div>

dialogdialog

box-packbox-pack

box-alignbox-align

追求 0 图片请求的极致

radiusradius

gradientgradient shadowshadow

strokestroke

Data URIData URI

maskmask

transformtransform

appearanceappearance

reflectreflect

transitiontransition

AnimationAnimation

从页面仔到动画设计师蜕变从页面仔到动画设计师蜕变

好处？

• 提升产品口碑

• 提升产品体验

• 提升产品可用性

• 提升产品口碑

• 提升产品体验

• 提升产品可用性

挑战？

• 不断关注和坚持

• 差异化是不可避免的战争

• HTML5 ~= html + CSS3 + Javascript

• 不断关注和坚持

• 差异化是不可避免的战争

• HTML5 ~= html + CSS3 + Javascript

机会？

• web 是未来• web 是未来

我们就是未来！我们就是未来！