Suche senden
Hochladen
Mobile webapp&v5 html5_min
•
6 gefällt mir
•
1,006 views
Jackson Tian
Folgen
Technologie
Business
Melden
Teilen
Melden
Teilen
1 von 45
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
Dexter Yang
Mongoskin - Guilin
Mongoskin - Guilin
Jackson Tian
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Jackson Tian
NodeJS快速服务端开发 朝沐金风 Shanghai
NodeJS快速服务端开发 朝沐金风 Shanghai
Jackson Tian
Anesha test taking[1]
Anesha test taking[1]
smithalf
Newmedia newsletter
Newmedia newsletter
3MNewMedia
Mobile UI design and Developer
Mobile UI design and Developer
jay li
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC
Empfohlen
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
Dexter Yang
Mongoskin - Guilin
Mongoskin - Guilin
Jackson Tian
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Jackson Tian
NodeJS快速服务端开发 朝沐金风 Shanghai
NodeJS快速服务端开发 朝沐金风 Shanghai
Jackson Tian
Anesha test taking[1]
Anesha test taking[1]
smithalf
Newmedia newsletter
Newmedia newsletter
3MNewMedia
Mobile UI design and Developer
Mobile UI design and Developer
jay li
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
Jackson Tian
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Gelis Wu
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
江華 奚
Axure RP Prototyping Tool
Axure RP Prototyping Tool
Souyi Yang
CABRI® 3D V2 - 革命性的數學工具(中文操作手冊)
CABRI® 3D V2 - 革命性的數學工具(中文操作手冊)
Cheer Chain Enterprise Co., Ltd.
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
turtleknight
使用Qt+和open gl®+创建跨平台可视化ui
使用Qt+和open gl®+创建跨平台可视化ui
lsdsjy
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
20120524 App開發流程與小工具分享@UI Cafe
20120524 App開發流程與小工具分享@UI Cafe
Justin Lee
Spring 2.x 中文
Spring 2.x 中文
Guo Albert
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發
Weizhong Yang
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinese
multiple1902
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
Supersonic Subatomic Quarkus accelerate cloud native development
Supersonic Subatomic Quarkus accelerate cloud native development
Ryan ZhangCheng
Responsive Web UI Design
Responsive Web UI Design
jay li
20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf
Justin Lee
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Jackson Tian
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
Jackson Tian
Weitere ähnliche Inhalte
Ähnlich wie Mobile webapp&v5 html5_min
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
Jackson Tian
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Gelis Wu
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
江華 奚
Axure RP Prototyping Tool
Axure RP Prototyping Tool
Souyi Yang
CABRI® 3D V2 - 革命性的數學工具(中文操作手冊)
CABRI® 3D V2 - 革命性的數學工具(中文操作手冊)
Cheer Chain Enterprise Co., Ltd.
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
turtleknight
使用Qt+和open gl®+创建跨平台可视化ui
使用Qt+和open gl®+创建跨平台可视化ui
lsdsjy
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
20120524 App開發流程與小工具分享@UI Cafe
20120524 App開發流程與小工具分享@UI Cafe
Justin Lee
Spring 2.x 中文
Spring 2.x 中文
Guo Albert
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發
Weizhong Yang
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinese
multiple1902
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
Supersonic Subatomic Quarkus accelerate cloud native development
Supersonic Subatomic Quarkus accelerate cloud native development
Ryan ZhangCheng
Responsive Web UI Design
Responsive Web UI Design
jay li
20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf
Justin Lee
Ähnlich wie Mobile webapp&v5 html5_min
(20)
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
Axure RP Prototyping Tool
Axure RP Prototyping Tool
CABRI® 3D V2 - 革命性的數學工具(中文操作手冊)
CABRI® 3D V2 - 革命性的數學工具(中文操作手冊)
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
使用Qt+和open gl®+创建跨平台可视化ui
使用Qt+和open gl®+创建跨平台可视化ui
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
20120524 App開發流程與小工具分享@UI Cafe
20120524 App開發流程與小工具分享@UI Cafe
Spring 2.x 中文
Spring 2.x 中文
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發
淘宝移动端Web开发实践
淘宝移动端Web开发实践
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinese
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Supersonic Subatomic Quarkus accelerate cloud native development
Supersonic Subatomic Quarkus accelerate cloud native development
Responsive Web UI Design
Responsive Web UI Design
20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf
Mehr von Jackson Tian
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Jackson Tian
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
Jackson Tian
(C)NodeJS
(C)NodeJS
Jackson Tian
Nodejs异步原理和缺陷 - 赵成
Nodejs异步原理和缺陷 - 赵成
Jackson Tian
EventProxy introduction - JacksonTian
EventProxy introduction - JacksonTian
Jackson Tian
Why Nodejs Guilin Shanghai
Why Nodejs Guilin Shanghai
Jackson Tian
Ruby vs Node ShiningRay Shanghai
Ruby vs Node ShiningRay Shanghai
Jackson Tian
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Jackson Tian
Mehr von Jackson Tian
(8)
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
(C)NodeJS
(C)NodeJS
Nodejs异步原理和缺陷 - 赵成
Nodejs异步原理和缺陷 - 赵成
EventProxy introduction - JacksonTian
EventProxy introduction - JacksonTian
Why Nodejs Guilin Shanghai
Why Nodejs Guilin Shanghai
Ruby vs Node ShiningRay Shanghai
Ruby vs Node ShiningRay Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
Mobile webapp&v5 html5_min
1.
别样的Mobile Web框架 MOBILE WEB
APP框架(V5)设计 1/45
2.
About me @朴灵
#Front-end Engineer# #Mobile Web App# #NodeJS# 喜欢井然有序的自洽代码 2/45
3.
Agenda Mobile Web
App的问题与挑战 Mobile Web App框架(v5)设计 组件分解 生命周期 组件通信 MVC应用 实践优化 对比jQuery Mobile Mobile Web App的兼容/适配问题 3/45
4.
单页面化(Single Page) 更好的体验,更小的带宽占用
HTML(布局/更新/回收/URL导航) 业务逻辑组织 4/45
5.
编程模型 前端MVC Programming
in Large 性能优化 5/45
6.
设备支持与限制 Tablet模式与Phone模式 设备差异问题
浏览器实现差异问题 6/45
7.
Mobile Web App设计与V5框架
Native App 向左 Web App往右 7/45
8.
8/45
9.
Landscape
App Viewports View Columns Cards Views 9/45
10.
App
设置最适合的viewport大小 10/45
11.
App <meta name="viewport" content="width=device-width;
initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 11/45
12.
App/主屏图标和启动屏
12/45
13.
Viewport
13/45
14.
Viewport
14/45
15.
可层叠的Viewport
15/45
16.
View Column
16/45
17.
View Column <div class="alpha">
// Card </div> <div class="beta"> // Card </div> <div class="gamma"> // Card </div> 17/45
18.
View Column Card Page(hidden)
Page Page(hidden) Page(hidden) (Initialize) 18/45
19.
Card <section id=“index" class=“card">
<header> // TODO </header> <article> // TODO </article> <footer> // TODO </footer> </section> 19/45
20.
View
Header View Content View Footer View 20/45
21.
小结
App Viewports V5 Framework View Columns Cards Made by You Views 21/45
22.
V5组成
App Viewport Viewport View View View Column Column Column Card Card Card Card View View View View View 22/45
23.
Card/生命周期
Initialize Destroy Shrink Card Reappear Card View Column 23/45
24.
Card Module
Cards Data Templates Scripts Languages Styles 24/45
25.
Card Module V5.registerCard("note", function()
{ return { initialize : function () {}, shrink: function () {}, reappear: function () {}, destroy: function () {} }; }); 25/45
26.
Card通信/消息
V5 Framework 26/45
27.
Card通信/消息 //侦听消息 card.onMessage("removeItem", function
(itemId){ }); //发送消息 card.postMessage(“cardId”, “eventName”, “args”); 27/45
28.
Card Module/MVC
Section View Template L10N Resources Card Model Data from server Controller Open Card Open Viewport 28/45
29.
Model Layer V5.Model =
{}; 29/45
30.
工厂式View var view =
V5.View(card.node); view.$(“selector”); view.delegateEvents(); view.bind(“event”, function(){}); 30/45
31.
主动式Contoller card.openCard(“cardId/id”, true); card.openViewport(“cardId/id”);
31/45
32.
V5架构
• Card App • • • Card Card …… • registerCard API • openCard • View • getTemplate • ……. • Underscore V5 • • • Zeptojs EventProxy iScroll 32/45
33.
大规模编程问题 约束 轻量 无侵
组合 碎片 式 级 入 式 式 Module NameSpace Sandbox 33/45
34.
优化原则 分解
组合 独立 V5 Framework 集成 发散 收敛 34/45
35.
优化/编译 在解决Programming in
Large时,项目文件 通过Module分割成为了碎片 Mobile上的HTTP更昂贵 合并Templates 合并/压缩JavaScript 合并/压缩CSS 图片DataURI化 尽量用CSS3实现icon 离线程序 Nodejs在项目中扮演编译脚本的作用 35/45
36.
V5 Vs. jQuery
Mobile V5 jQuery Mobile Card Module (收敛式设计) JavaScript无约束 手动式渲染(预留自定义 属性定义式渲染(少许自 UI机制) 定义均需修改核心代码) 生命周期管理 暂无 Localization 暂无 碎片式(组件)开发 原始Page式开发 视图消息机制 暂无(Pad场景下将会耦合) 36/45
37.
Web App问题 有谁懂从一个兼容各种浏览器(IE)的前端工
程师变成兼容Webkit的前端的寂寞 目前平台:iOS / Android 表现最佳平台为iOS,UI操作上几乎可以与 Native媲美 暂时理解为未来的趋势,最好的Mobile Web App 必定会是在iOS上产生的 37/45
38.
如何兼容各种Mobile浏览器 v5框架设计理念
消除掉工程师缺点的影响,而不是浏览器缺点 的影响 让工程师fix bug易,fix工程师的bug难 不做不擅长的事 让$处理DOM 让_处理数据操作 Ajax自个去通信,去同步 让iScroll控制触屏 让EventProxy 去处理回调 38/45
39.
坑爹的bug们 iOS上position:fixed问题 Android渲染性能问题
横屏的Viewport(Media queries) 屏幕适配问题 横竖屏orient change New Date(str)问题 离线模式下跨域Ajax问题 … 39/45
40.
究竟怎样兼容 在V5框架的设计下,只有一个答案
那里不会,fix那里 40/45
41.
坑爹啊,不带这么偷懒的 到底怎么fix? 推荐支付宝颂赞的Mobile
Web开发技巧 http://qiqicartoon.com/?p=739 http://qiqicartoon.com/?p=877 http://qiqicartoon.com/?p=919 41/45
42.
42/45
43.
V5后续进展 项目地址:
https://github.com/V5Framework/V5 UI库尚不成熟 但是我们也有V5UI https://github.com/V5Framework/V5UI 文档不够充分 我真的有努力在写文档哟 跟PhoneGap一起搞起 https://github.com/V5Framework/v5phonegap 静态编译脚本 编译静态文件 离线文件管理 43/45
44.
V5 Apps
44/45
45.
V5项目期望 轻量的Mobile Web
App Solution 期待您的参与和验证 45/45
Jetzt herunterladen