• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile webapp&v5 html5_min
 

Mobile webapp&v5 html5_min

on

  • 1,854 views

 

Statistics

Views

Total Views
1,854
Views on SlideShare
1,854
Embed Views
0

Actions

Likes
6
Downloads
59
Comments
2

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile webapp&v5 html5_min Mobile webapp&v5 html5_min Presentation Transcript

    • 别样的Mobile Web框架MOBILE WEB APP框架(V5)设计 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
    • View Column CardPage(hidden) Page Page(hidden) Page(hidden) (Initialize) 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 V5 Framework View Columns Cards Made by You Views 21/45
    • V5组成 App Viewport Viewport View View View ColumnColumn Column Card Card Card Card View View View View View 22/45
    • Card/生命周期 InitializeDestroy Shrink Card Reappear Card View Column 23/45
    • Card Module Cards Data Templates Scripts Languages Styles 24/45
    • Card ModuleV5.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 Section View Template L10N Resources Card Model Data from server Controller Open Card Open Viewport 28/45
    • Model LayerV5.Model = {}; 29/45
    • 工厂式Viewvar view = V5.View(card.node); view.$(“selector”); view.delegateEvents(); view.bind(“event”, function(){}); 30/45
    • 主动式Contollercard.openCard(“cardId/id”, true);card.openViewport(“cardId/id”); 31/45
    • V5架构 • Card App • • • Card Card …… • registerCard API • openCard • View • getTemplate • ……. • Underscore V5 • • • Zeptojs EventProxy iScroll 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 jQuery Mobile Card Module (收敛式设计) JavaScript无约束 手动式渲染(预留自定义 属性定义式渲染(少许自 UI机制) 定义均需修改核心代码) 生命周期管理 暂无 Localization 暂无 碎片式(组件)开发 原始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