MobileWebAppFramework_V5_design
2 likes1,127 views
该文档讨论了v5移动Web应用框架的设计，包括组件分解、生命周期管理和与jQuery Mobile的比较，旨在提供更好的用户体验和兼容性。文档还探讨了前端MVC模型的变化、性能优化策略以及移动Web应用在不同设备上的支持和限制。最终目标是为开发者提供一个轻量级的解决方案，以使移动Web应用开发更高效。
MobileWebAppFramework_V5_design
- 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 期待您的参与和验证