https://github.com/V5Framework/V5 Mobile Web App Framework. Lightweight.

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

2. About me
 @朴灵
 非资深前端工程师一枚
 就职于SAP Labs China
 从事Mobile Web App开发
 NodeJS痴迷者

3. Agenda
 Mobile Web App的问题与挑战
 Mobile Web App框架(v5)设计
 组件分解
 生命周期
 前端MVC变形
 组件通信
 对比jQuery Mobile
 V5的实践
 Mobile Web App的兼容/适配问题

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

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

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

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

8. 真正的单HTML App

9. 视图到哪里去了？

10. 视图文件

11. Viewport
Viewport/Page
Page(hidden) Page Page(hidden) Page(hidden)
(Initialize)

12. Landscape
App
Viewports
View Columns
Pages
Views

13. Page Module/生命周期
Initialize
Destroy Shrink
Page
Reappear
Page
View
Column

14. Page Module/MVC
Section
View Template
L10N Resources
Page
Model Data from server
Controller Open View
Open Viewport

15. 前端MVC之M变形
 Model
 弃用Backbone.Model & Backbone.Collection
 当封装是多余的时候，不封装是一种优化
 Ajax同步后端数据
 Underscore直接消费后端数据
 Model依然存在

16. 前端MVC之V变形
 View
 DOM是个状态机
 对Backbone.View做简单工厂封装
 尽量采用事件委托
 提升绑定性能
 易于卸载
 强烈反对过分封装HTML
 设计过度
 牺牲写HTML的乐趣
 丢失HTML的灵活性

17. 工厂式View

18. 前端MVC之C变形
 Controller/Router
 弃用Backbone.Router / Controller
 URL hash的缺陷
 信息量传递较少
 URL前进/后退增加程序复杂度
 Full Screen下无用武之地
 我们的目标是App，Not page.
 仅用于恢复视图
 主动访问视图，触发视图生命周期

19. 主动式Contoller

20. Page通信/消息
V5 Framework

21. App Vs. jQuery Mobile
App(v5) jQuery Mobile
Page Module (收敛式设计
JavaScript无约束
)
手动式渲染(预留自定义 属性定义式渲染(少许自
UI机制) 定义均需修改核心代码)
生命周期管理 暂无
Localization 暂无
碎片式(组件)开发 原始Page式开发
视图消息机制 暂无(Pad场景下将会耦合)

22. 大规模编程问题
Module
NameSpace
Sandbox
约束 轻量 无侵 组合 碎片
式 级 入 式 式

23. 资深jQuery黑说$问题
$解决了
• DOM操作的复杂性
• 跨浏览器的兼容问题
$遗留的问题
• 把$当锤子，当万能药(jQuery Plugin)
• 灵活有余，收敛不足(得向YUI3学习啊)
• 插件API丑陋
• 除了DOM与Ajax，余者不足以傲

24. DOM优化
限定作用
事件委托应对
区间 组件式widget
DOM更新问题
(Module)
限定查找
缓存DOM 范围
查找结果 (view.$,
find)

25. 业务逻辑/复杂回调
 复杂业务场景下回调引起的代码紊乱
 回调函数嵌套问题
 EventProxy.js
 Assign
 AssignAlways
 After
 N+1问题。N个bind+1个assign。
 Module分割 + 上层规划(流程图)

26. 代码质量
 JSLint
 JSDoc
 Qunit
 CSSLint

27. 优化/编译
 在解决Programming in Large时，项目文件
通过Module分割成为了碎片
 Mobile上的HTTP更昂贵
 合并Templates
 合并/压缩JavaScript
 合并/压缩CSS
 图片DataURI化
 尽量用CSS3实现icon
 离线程序
 Nodejs在项目中扮演编译脚本的作用

28. 优化原则
 模块式开发，合并式优化
 不以最优为目的的开发，都是耍流氓
 不伤及可维护性，可读性
分拆/独立/发散 组合/集成/收敛

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

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

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

32. 究竟怎样兼容
 在App(v5)框架的设计下，只有一个答案
 那里不会，fix那里

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

35. V5项目期望
 成为一套轻量级的Mobile Web App Solution
 通过约束式编程，削减掉没有优秀工程师
带来的影响
 项目地址：
 https://github.com/V5Framework/V5
 期待您的参与和验证