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