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 Apps

44/45

V5项目期望

轻量的Mobile Web App Solution

期待您的参与和验证

45/45