Download - MobileWebAppFramework_V5_design
![Page 1: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/1.jpg)
MOBILE WEB APP框架(V5)设计
别样的Mobile Web框架
![Page 2: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/2.jpg)
About me
@朴灵
非资深前端工程师一枚
就职于SAP Labs China
从事Mobile Web App开发
NodeJS痴迷者
![Page 3: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/3.jpg)
Agenda
Mobile Web App的问题与挑战
Mobile Web App框架(v5)设计
组件分解
生命周期
前端MVC变形
组件通信
对比jQuery Mobile
V5的实践
Mobile Web App的兼容/适配问题
![Page 4: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/4.jpg)
单页面化(Single Page)
更好的体验,更小的带宽占用
HTML(布局/更新/回收/URL导航)
业务逻辑组织
![Page 5: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/5.jpg)
编程模型
前端MVC
Programming in Large
性能优化
![Page 6: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/6.jpg)
设备支持与限制
Tablet模式与Phone模式
设备差异问题
浏览器实现差异问题
![Page 7: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/7.jpg)
Mobile Web App设计与V5框架
Native App 向左
Web App往右
![Page 8: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/8.jpg)
真正的单HTML App
![Page 9: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/9.jpg)
视图到哪里去了?
![Page 10: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/10.jpg)
视图文件
![Page 11: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/11.jpg)
Viewport/Page Viewport
Page(hidden) Page(Initialize)
Page(hidden) Page(hidden)
![Page 12: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/12.jpg)
Landscape
App
Viewports
View Columns
Pages
Views
![Page 13: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/13.jpg)
View Column
Page
Page
Initialize
Shrink
Reappear
Destroy
Page Module/生命周期
![Page 14: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/14.jpg)
Page Module/MVC
Page
View
Section
Template
L10N Resources
Model Data from server
Controller Open View
Open Viewport
![Page 15: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/15.jpg)
前端MVC之M变形
Model
弃用Backbone.Model & Backbone.Collection
当封装是多余的时候,不封装是一种优化
Ajax同步后端数据
Underscore直接消费后端数据
Model依然存在
![Page 16: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/16.jpg)
前端MVC之V变形
View DOM是个状态机
对Backbone.View做简单工厂封装
尽量采用事件委托 提升绑定性能
易于卸载
强烈反对过分封装HTML 设计过度
牺牲写HTML的乐趣
丢失HTML的灵活性
![Page 17: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/17.jpg)
工厂式View
![Page 18: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/18.jpg)
前端MVC之C变形
Controller/Router
弃用Backbone.Router / Controller
URL hash的缺陷
信息量传递较少
URL前进/后退增加程序复杂度
Full Screen下无用武之地
我们的目标是App,Not page.
仅用于恢复视图
主动访问视图,触发视图生命周期
![Page 19: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/19.jpg)
主动式Contoller
![Page 20: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/20.jpg)
Page通信/消息
V5 Framework
![Page 21: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/21.jpg)
App Vs. jQuery Mobile
App(v5)
Page Module (收敛式设计)
手动式渲染(预留自定义UI机制)
生命周期管理
Localization
碎片式(组件)开发
视图消息机制
jQuery Mobile
JavaScript无约束
属性定义式渲染(少许自定义均需修改核心代码)
暂无
暂无
原始Page式开发
暂无(Pad场景下将会耦合)
![Page 22: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/22.jpg)
Module
NameSpace
Sandbox
大规模编程问题
约束式
轻量级
无侵入
组合式
碎片式
![Page 23: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/23.jpg)
资深jQuery黑说$问题
• DOM操作的复杂性
•跨浏览器的兼容问题
$解决了
•把$当锤子,当万能药(jQuery Plugin)
•灵活有余,收敛不足(得向YUI3学习啊)
•插件API丑陋
•除了DOM与Ajax,余者不足以傲
$遗留的问题
![Page 24: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/24.jpg)
DOM优化
事件委托应对DOM更新问题
缓存DOM查找结果
限定查找范围
(view.$, find)
限定作用区间
(Module)组件式widget
![Page 25: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/25.jpg)
业务逻辑/复杂回调
复杂业务场景下回调引起的代码紊乱
回调函数嵌套问题
EventProxy.js
Assign
AssignAlways
After
N+1问题。N个bind+1个assign。
Module分割+ 上层规划(流程图)
![Page 26: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/26.jpg)
代码质量
JSLint
JSDoc
Qunit
CSSLint
![Page 27: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/27.jpg)
优化/编译
在解决Programming in Large时,项目文件通过Module分割成为了碎片 Mobile上的HTTP更昂贵 合并Templates
合并/压缩JavaScript
合并/压缩CSS
图片DataURI化
尽量用CSS3实现icon
离线程序
Nodejs在项目中扮演编译脚本的作用
![Page 28: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/28.jpg)
优化原则
模块式开发,合并式优化
不以最优为目的的开发,都是耍流氓
不伤及可维护性,可读性
分拆/独立/发散 组合/集成/收敛
![Page 29: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/29.jpg)
Web App问题
有谁懂从一个兼容各种浏览器(IE)的前端工程师变成兼容Webkit的前端的寂寞
目前平台:iOS / Android
表现最佳平台为iOS,UI操作上几乎可以与Native媲美
暂时理解为未来的趋势,最好的Mobile Web App必定会是在iOS上产生的
![Page 30: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/30.jpg)
如何兼容各种Mobile浏览器
v5框架设计理念
消除掉工程师缺点的影响,而不是浏览器缺点的影响
让工程师fix bug易,fix工程师的bug难
不做不擅长的事
让$处理DOM
让_处理数据操作
Ajax自个去通信,去同步
让iScroll控制触屏
让EventProxy去处理回调
![Page 31: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/31.jpg)
坑爹的bug们
iOS上position:fixed问题
Android渲染性能问题
横屏的Viewport(Media queries)
屏幕适配问题
横竖屏orient change
New Date(str)问题
离线模式下跨域Ajax问题
…
![Page 32: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/32.jpg)
究竟怎样兼容
在App(v5)框架的设计下,只有一个答案
那里不会,fix那里
![Page 33: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/33.jpg)
坑爹啊,不带这么偷懒的
到底怎么fix?
推荐支付宝颂赞的Mobile Web开发技巧
http://qiqicartoon.com/?p=739
http://qiqicartoon.com/?p=877
http://qiqicartoon.com/?p=919
![Page 34: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/34.jpg)
![Page 35: MobileWebAppFramework_V5_design](https://reader034.vdocuments.pub/reader034/viewer/2022042713/545aed49af79592b448b6028/html5/thumbnails/35.jpg)
V5项目期望
成为一套轻量级的Mobile Web App Solution
通过约束式编程,削减掉没有优秀工程师带来的影响
项目地址: https://github.com/V5Framework/V5
期待您的参与和验证