Mobile webapp&v5 html5_min
6 likes•1,008 views
该文档介绍了移动网页应用框架v5的设计，包括组件分解、生命周期管理、组件通信和与jQuery Mobile的比较。它探讨了单页面应用的好处、设备支持的限制以及移动网页的兼容性问题，提供了一系列优化原则和编程模型建议。最终，文档强调了v5框架的轻量化和优化方向，邀请开发者参与并验证该项目。
Mobile webapp&v5 html5_min
- 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
- 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