View
2.018
Download
1
Category
Preview:
DESCRIPTION
Citation preview
MOBILE WEB APP框架(V5)设计
别样的Mobile Web框架
1/45
About me
@朴灵
#Front-end Engineer#
#Mobile Web App#
#NodeJS#
喜欢井然有序的自洽代码
2/45
Agenda
Mobile Web App的问题与挑战
Mobile Web App框架(v5)设计
组件分解
生命周期
组件通信
MVC应用
实践优化
对比jQuery Mobile
Mobile Web App的兼容/适配问题
3/45
单页面化(Single Page)
更好的体验,更小的带宽占用
HTML(布局/更新/回收/URL导航)
业务逻辑组织
4/45
编程模型
前端MVC
Programming in Large
性能优化
5/45
设备支持与限制
Tablet模式与Phone模式
设备差异问题
浏览器实现差异问题
6/45
Mobile Web App设计与V5框架
Native App 向左
Web App往右
7/45
8/45
Landscape
App
Viewports
View Columns
Cards
Views
9/45
App
设置最适合的viewport大小
10/45
App
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
11/45
App/主屏图标和启动屏
12/45
Viewport
13/45
Viewport
14/45
可层叠的Viewport
15/45
View Column
16/45
View Column
<div class="alpha">
// Card
</div>
<div class="beta">
// Card
</div>
<div class="gamma">
// Card
</div>
17/45
Card View Column
Page(hidden) Page (Initialize)
Page(hidden) Page(hidden)
18/45
Card
<section id=“index" class=“card"> <header> // TODO </header> <article> // TODO </article> <footer> // TODO </footer> </section>
19/45
View
Header View
Content View
Footer View
20/45
小结
App
Viewports
View Columns
Cards
Views
V5 Framework
Made by You
21/45
V5组成
App
Viewport
View Column
Card
View
View Column
Card
View
Card
View View
Viewport
View Column
Card
View
22/45
Card/生命周期
View Column
Card
Card
Initialize
Shrink
Reappear
Destroy
23/45
Card Module
Scripts
Cards
Templates
Styles Languages
Data
24/45
Card Module
V5.registerCard("note", function() {
return {
initialize : function () {},
shrink: function () {}, reappear: function () {}, destroy: function () {}
};
});
25/45
Card通信/消息
V5 Framework
26/45
Card通信/消息
//侦听消息 card.onMessage("removeItem",
function (itemId){ }); //发送消息 card.postMessage(“cardId”,
“eventName”, “args”);
27/45
Card Module/MVC
Card
View
Section
Template
L10N Resources
Model Data from server
Controller Open Card
Open Viewport
28/45
Model Layer
V5.Model = {};
29/45
工厂式View
var view = V5.View(card.node);
view.$(“selector”); view.delegateEvents(); view.bind(“event”, function(){});
30/45
主动式Contoller
card.openCard(“cardId/id”, true);
card.openViewport(“cardId/id”);
31/45
App
API
V5
• Card
• Card
• Card
• ……
• registerCard
• openCard
• View
• getTemplate
• …….
• Underscore
• Zeptojs
• EventProxy
• iScroll
V5架构
32/45
大规模编程问题
Module
NameSpace
Sandbox
约束式
轻量级
无侵入
组合式
碎片式
33/45
优化原则
分解
独立
发散
组合
集成
收敛
V5 Framework
34/45
优化/编译
在解决Programming in Large时,项目文件通过Module分割成为了碎片 Mobile上的HTTP更昂贵 合并Templates
合并/压缩JavaScript
合并/压缩CSS
图片DataURI化
尽量用CSS3实现icon
离线程序
Nodejs在项目中扮演编译脚本的作用
35/45
V5 Vs. jQuery Mobile
V5
Card Module (收敛式设计)
手动式渲染(预留自定义UI机制)
生命周期管理
Localization
碎片式(组件)开发
视图消息机制
jQuery Mobile
JavaScript无约束
属性定义式渲染(少许自定义均需修改核心代码)
暂无
暂无
原始Page式开发
暂无(Pad场景下将会耦合)
36/45
Web App问题
有谁懂从一个兼容各种浏览器(IE)的前端工程师变成兼容Webkit的前端的寂寞
目前平台:iOS / Android
表现最佳平台为iOS,UI操作上几乎可以与Native媲美
暂时理解为未来的趋势,最好的Mobile Web App必定会是在iOS上产生的
37/45
如何兼容各种Mobile浏览器
v5框架设计理念
消除掉工程师缺点的影响,而不是浏览器缺点的影响
让工程师fix bug易,fix工程师的bug难
不做不擅长的事
让$处理DOM
让_处理数据操作
Ajax自个去通信,去同步
让iScroll控制触屏
让EventProxy 去处理回调
38/45
坑爹的bug们
iOS上position:fixed问题
Android渲染性能问题
横屏的Viewport(Media queries)
屏幕适配问题
横竖屏orient change
New Date(str)问题
离线模式下跨域Ajax问题
…
39/45
究竟怎样兼容
在V5框架的设计下,只有一个答案
那里不会,fix那里
40/45
坑爹啊,不带这么偷懒的
到底怎么fix?
推荐支付宝颂赞的Mobile Web开发技巧
http://qiqicartoon.com/?p=739
http://qiqicartoon.com/?p=877
http://qiqicartoon.com/?p=919
41/45
42/45
V5后续进展
项目地址: https://github.com/V5Framework/V5
UI库尚不成熟 但是我们也有V5UI
https://github.com/V5Framework/V5UI 文档不够充分
我真的有努力在写文档哟
跟PhoneGap一起搞起 https://github.com/V5Framework/v5phonegap
静态编译脚本 编译静态文件 离线文件管理
43/45
V5项目期望
轻量的Mobile Web App Solution
期待您的参与和验证
45/45
Recommended