Upload
webrebuild
View
2.118
Download
0
Embed Size (px)
DESCRIPTION
陈子舜,腾讯开放平台研发副总监。04年开始学前端,做重构,玩博客。06年入腾讯,做前端,玩空间。11年搞开放,做前端,玩手机。历经的产品不多,搞过PJBlog,QQ空间,接触过农牧场,腾讯开放平台。在7年前端生涯,发现前端技术水很深。从用户体验,性能优化,运营能力,编码效率,作为前端开发,压力越大机会越多,有木有。
Citation preview
未来 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 是未来
我们就是未来!我们就是未来!