Your SlideShare is downloading. ×
MobileWebAppFramework_V5_design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

MobileWebAppFramework_V5_design

1,604
views

Published on

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

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

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,604
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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/PagePage(hidden) Page Page(hidden) Page(hidden) (Initialize)
  • 12. Landscape App Viewports View Columns Pages Views
  • 13. Page Module/生命周期 InitializeDestroy 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优化 限定作用事件委托应对 区间 组件式widgetDOM更新问题 (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
  • 34. V5项目期望 成为一套轻量级的Mobile Web App Solution 通过约束式编程,削减掉没有优秀工程师 带来的影响 项目地址:  https://github.com/V5Framework/V5 期待您的参与和验证