MOBILE WEB APP框架(V5)设计

别样的Mobile Web框架

About me

@朴灵

非资深前端工程师一枚

就职于SAP Labs China

从事Mobile Web App开发

NodeJS痴迷者

Agenda

Mobile Web App的问题与挑战

Mobile Web App框架(v5)设计

组件分解

生命周期

前端MVC变形

组件通信

对比jQuery Mobile

V5的实践

Mobile Web App的兼容/适配问题

单页面化(Single Page)

更好的体验，更小的带宽占用

HTML(布局/更新/回收/URL导航)

业务逻辑组织

编程模型

前端MVC

Programming in Large

性能优化

设备支持与限制

Tablet模式与Phone模式

设备差异问题

浏览器实现差异问题

Mobile Web App设计与V5框架

Native App 向左

Web App往右

真正的单HTML App

视图到哪里去了？

视图文件

Viewport/Page Viewport

Page(hidden) Page(Initialize)

Page(hidden) Page(hidden)

Landscape

App

Viewports

View Columns

Pages

Views

View Column

Page

Page

Initialize

Shrink

Reappear

Destroy

Page Module/生命周期

Page Module/MVC

Page

View

Section

Template

L10N Resources

Model Data from server

Controller Open View

Open Viewport

前端MVC之M变形

Model

弃用Backbone.Model & Backbone.Collection

当封装是多余的时候，不封装是一种优化

Ajax同步后端数据

Underscore直接消费后端数据

Model依然存在

前端MVC之V变形

View DOM是个状态机

对Backbone.View做简单工厂封装

尽量采用事件委托 提升绑定性能

易于卸载

强烈反对过分封装HTML 设计过度

牺牲写HTML的乐趣

丢失HTML的灵活性

工厂式View

前端MVC之C变形

Controller/Router

弃用Backbone.Router / Controller

URL hash的缺陷

信息量传递较少

URL前进/后退增加程序复杂度

Full Screen下无用武之地

我们的目标是App，Not page.

仅用于恢复视图

主动访问视图，触发视图生命周期

主动式Contoller

Page通信/消息

V5 Framework

App Vs. jQuery Mobile

App(v5)

Page Module (收敛式设计)

手动式渲染(预留自定义UI机制)

生命周期管理

Localization

碎片式(组件)开发

视图消息机制

jQuery Mobile

JavaScript无约束

属性定义式渲染(少许自定义均需修改核心代码)

暂无

暂无

原始Page式开发

暂无(Pad场景下将会耦合)

Module

NameSpace

Sandbox

大规模编程问题

约束式

轻量级

无侵入

组合式

碎片式

资深jQuery黑说$问题

• DOM操作的复杂性

•跨浏览器的兼容问题

$解决了

•把$当锤子，当万能药(jQuery Plugin)

•灵活有余，收敛不足(得向YUI3学习啊)

•插件API丑陋

•除了DOM与Ajax，余者不足以傲

$遗留的问题

DOM优化

事件委托应对DOM更新问题

缓存DOM查找结果

限定查找范围

(view.$, find)

限定作用区间

(Module)组件式widget

业务逻辑/复杂回调

复杂业务场景下回调引起的代码紊乱

回调函数嵌套问题

EventProxy.js

Assign

AssignAlways

After

N+1问题。N个bind+1个assign。

Module分割+ 上层规划(流程图)

代码质量

JSLint

JSDoc

Qunit

CSSLint

优化/编译

在解决Programming in Large时，项目文件通过Module分割成为了碎片 Mobile上的HTTP更昂贵 合并Templates

合并/压缩JavaScript

合并/压缩CSS

图片DataURI化

尽量用CSS3实现icon

离线程序

Nodejs在项目中扮演编译脚本的作用

优化原则

模块式开发，合并式优化

不以最优为目的的开发，都是耍流氓

不伤及可维护性，可读性

分拆/独立/发散 组合/集成/收敛

Web App问题

有谁懂从一个兼容各种浏览器(IE)的前端工程师变成兼容Webkit的前端的寂寞

目前平台：iOS / Android

表现最佳平台为iOS，UI操作上几乎可以与Native媲美

暂时理解为未来的趋势，最好的Mobile Web App必定会是在iOS上产生的

如何兼容各种Mobile浏览器

v5框架设计理念

消除掉工程师缺点的影响，而不是浏览器缺点的影响

让工程师fix bug易，fix工程师的bug难

不做不擅长的事

让$处理DOM

让_处理数据操作

Ajax自个去通信，去同步

让iScroll控制触屏

让EventProxy去处理回调

坑爹的bug们

iOS上position:fixed问题

Android渲染性能问题

横屏的Viewport(Media queries)

屏幕适配问题

横竖屏orient change

New Date(str)问题

离线模式下跨域Ajax问题

…

究竟怎样兼容

在App(v5)框架的设计下，只有一个答案

那里不会，fix那里

坑爹啊，不带这么偷懒的

到底怎么fix？

推荐支付宝颂赞的Mobile Web开发技巧

http://qiqicartoon.com/?p=739

http://qiqicartoon.com/?p=877

http://qiqicartoon.com/?p=919

V5项目期望

成为一套轻量级的Mobile Web App Solution

通过约束式编程，削减掉没有优秀工程师带来的影响

项目地址： https://github.com/V5Framework/V5

期待您的参与和验证