More Related Content
Similar to Mobile webapp&v5 html5_min
Similar to Mobile webapp&v5 html5_min (20)
More from Jackson Tian (8)
Mobile webapp&v5 html5_min
- 2. About me
@朴灵
#Front-end Engineer#
#Mobile Web App#
#NodeJS#
喜欢井然有序的自洽代码
2/45
- 3. Agenda
Mobile Web App的问题与挑战
Mobile Web App框架(v5)设计
组件分解
生命周期
组件通信
MVC应用
实践优化
对比jQuery Mobile
Mobile Web App的兼容/适配问题
3/45
- 9. Landscape
App
Viewports
View Columns
Cards
Views
9/45
- 10. App
设置最适合的viewport大小
10/45
- 20. View
Header View
Content View
Footer View
20/45
- 21. 小结
App
Viewports
V5 Framework
View Columns
Cards
Made by You
Views
21/45
- 22. V5组成
App
Viewport Viewport
View View
View Column
Column Column
Card Card Card Card
View View View View View
22/45
- 23. Card/生命周期
Initialize
Destroy Shrink
Card
Reappear
Card
View
Column
23/45
- 24. Card Module
Cards
Data Templates
Scripts
Languages Styles
24/45
- 28. Card Module/MVC
Section
View Template
L10N Resources
Card
Model Data from server
Controller Open Card
Open Viewport
28/45
- 30. 工厂式View
var view =
V5.View(card.node);
view.$(“selector”);
view.delegateEvents();
view.bind(“event”, function(){});
30/45
- 32. V5架构
• Card
App •
•
•
Card
Card
……
• registerCard
API
• openCard
• View
• getTemplate
• …….
• Underscore
V5 •
•
•
Zeptojs
EventProxy
iScroll
32/45
- 34. 优化原则
分解 组合
独立 V5
Framework 集成
发散 收敛
34/45
- 35. 优化/编译
在解决Programming in Large时,项目文件
通过Module分割成为了碎片
Mobile上的HTTP更昂贵
合并Templates
合并/压缩JavaScript
合并/压缩CSS
图片DataURI化
尽量用CSS3实现icon
离线程序
Nodejs在项目中扮演编译脚本的作用
35/45
- 36. V5 Vs. jQuery Mobile
V5 jQuery Mobile
Card Module (收敛式设计) JavaScript无约束
手动式渲染(预留自定义 属性定义式渲染(少许自
UI机制) 定义均需修改核心代码)
生命周期管理 暂无
Localization 暂无
碎片式(组件)开发 原始Page式开发
视图消息机制 暂无(Pad场景下将会耦合)
36/45
- 38. 如何兼容各种Mobile浏览器
v5框架设计理念
消除掉工程师缺点的影响,而不是浏览器缺点
的影响
让工程师fix bug易,fix工程师的bug难
不做不擅长的事
让$处理DOM
让_处理数据操作
Ajax自个去通信,去同步
让iScroll控制触屏
让EventProxy 去处理回调
38/45
- 43. V5后续进展
项目地址:
https://github.com/V5Framework/V5
UI库尚不成熟
但是我们也有V5UI
https://github.com/V5Framework/V5UI
文档不够充分
我真的有努力在写文档哟
跟PhoneGap一起搞起
https://github.com/V5Framework/v5phonegap
静态编译脚本
编译静态文件
离线文件管理
43/45