1. 别样的Mobile Web框架
MOBILE WEB APP框架(V5)设计
1/45

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

4. 单页面化(Single Page)
 更好的体验，更小的带宽占用
 HTML(布局/更新/回收/URL导航)
 业务逻辑组织
4/45

5. 编程模型
 前端MVC
 Programming in Large
 性能优化
5/45

6. 设备支持与限制
 Tablet模式与Phone模式
 设备差异问题
 浏览器实现差异问题
6/45

7. Mobile Web App设计与V5框架
Native App 向左
Web App往右
7/45

8. 8/45

9. Landscape
App
Viewports
View Columns
Cards
Views
9/45

10. App
设置最适合的viewport大小
10/45

11. App
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />
11/45

12. App/主屏图标和启动屏
12/45

13. Viewport
13/45

14. Viewport
14/45

15. 可层叠的Viewport
15/45

16. View Column
16/45

17. View Column
<div class="alpha">
// Card
</div>
<div class="beta">
// Card
</div>
<div class="gamma">
// Card
</div>
17/45

18. View Column
Card
Page(hidden) Page Page(hidden) Page(hidden)
(Initialize)
18/45

19. Card
<section id=“index" class=“card">
<header>
// TODO
</header>
<article>
// TODO
</article>
<footer>
// TODO
</footer>
</section>
19/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

25. Card Module
V5.registerCard("note", function() {
return {
initialize : function () {},
shrink: function () {},
reappear: function () {},
destroy: function () {}
};
});
25/45

26. Card通信/消息
V5 Framework
26/45

27. Card通信/消息
//侦听消息
card.onMessage("removeItem",
function (itemId){
});
//发送消息
card.postMessage(“cardId”,
“eventName”, “args”);
27/45

28. Card Module/MVC
Section
View Template
L10N Resources
Card
Model Data from server
Controller Open Card
Open Viewport
28/45

29. Model Layer
V5.Model = {};
29/45

30. 工厂式View
var view =
V5.View(card.node);
view.$(“selector”);
view.delegateEvents();
view.bind(“event”, function(){});
30/45

31. 主动式Contoller
card.openCard(“cardId/id”, true);
card.openViewport(“cardId/id”);
31/45

32. V5架构
• Card
App •
•
•
Card
Card
……
• registerCard
API
• openCard
• View
• getTemplate
• …….
• Underscore
V5 •
•
•
Zeptojs
EventProxy
iScroll
32/45

33. 大规模编程问题
约束 轻量 无侵 组合 碎片
式 级 入 式 式
Module
NameSpace
Sandbox
33/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

37. Web App问题
 有谁懂从一个兼容各种浏览器(IE)的前端工
程师变成兼容Webkit的前端的寂寞
 目前平台：iOS / Android
 表现最佳平台为iOS，UI操作上几乎可以与
Native媲美
 暂时理解为未来的趋势，最好的Mobile Web App
必定会是在iOS上产生的
37/45

38. 如何兼容各种Mobile浏览器
 v5框架设计理念
 消除掉工程师缺点的影响，而不是浏览器缺点
的影响
 让工程师fix bug易，fix工程师的bug难
 不做不擅长的事
 让$处理DOM
 让_处理数据操作
 Ajax自个去通信，去同步
 让iScroll控制触屏
 让EventProxy 去处理回调
38/45

39. 坑爹的bug们
 iOS上position:fixed问题
 Android渲染性能问题
 横屏的Viewport(Media queries)
 屏幕适配问题
 横竖屏orient change
 New Date(str)问题
 离线模式下跨域Ajax问题
 …
39/45

40. 究竟怎样兼容
 在V5框架的设计下，只有一个答案
 那里不会，fix那里
40/45

41. 坑爹啊，不带这么偷懒的
 到底怎么fix？
 推荐支付宝颂赞的Mobile Web开发技巧
 http://qiqicartoon.com/?p=739
 http://qiqicartoon.com/?p=877
 http://qiqicartoon.com/?p=919
41/45

42. 42/45

43. V5后续进展
 项目地址：
 https://github.com/V5Framework/V5
 UI库尚不成熟
 但是我们也有V5UI
https://github.com/V5Framework/V5UI
 文档不够充分
 我真的有努力在写文档哟
 跟PhoneGap一起搞起
 https://github.com/V5Framework/v5phonegap
 静态编译脚本
 编译静态文件
 离线文件管理
43/45

44. V5 Apps
44/45

45. V5项目期望
 轻量的Mobile Web App Solution
 期待您的参与和验证
45/45