一步一步开发Html5 mobile apps

32
步步 步步步 一一 HTML5 步步步步 步步步 Adam Lu @adamlu

Transcript of 一步一步开发Html5 mobile apps

Page 1: 一步一步开发Html5 mobile apps

一步一步开发 HTML5 移动应用

鲁超伍 Adam Lu@adamlu

Page 2: 一步一步开发Html5 mobile apps

HTML5 还是 Native

Page 4: 一步一步开发Html5 mobile apps

移动应用的博弈• 特性丰富度• 性能• 开发者经验• 感官• 可发现性• 货币化

Page 5: 一步一步开发Html5 mobile apps

为什么要开发 HTML5 Web Apps

• 跨系统 / 平台 / 浏览器

• 易扩展

• 跨设备开发减少成本

Page 6: 一步一步开发Html5 mobile apps

支持 HTML5 的移动浏览器

Page 7: 一步一步开发Html5 mobile apps

基于 HTML5 应用之服务器端架构• 可以和传统的 Web 架构类似 ( 浏览器不关

心 )

• 可以考虑使用 REST 设计, JavaScript 加载和管理状态

Page 8: 一步一步开发Html5 mobile apps

基于 HTML5 应用之前端架构

HTML5

UI Elements

Template

Data

Application

Page 9: 一步一步开发Html5 mobile apps

BOILERPLATE开发第一步

Page 10: 一步一步开发Html5 mobile apps

Boilerplate 核心之 HTML

• Mobile viewport– <meta name="viewport" content="width=device-

width">• Home screen icon set• iOS web app– <meta name="apple-mobile-web-app-capable"

content="yes">• HTML5 新标签

Page 11: 一步一步开发Html5 mobile apps

Boilerplate 核心之 CSS

• Reset CSS– normalize.css/YUI Reset CSS/HTML5 Reset

• CSS Font

Page 12: 一步一步开发Html5 mobile apps

Boilerplate 核心之 JavaScript

• 选择基础类库– Zepto/YUI/jQuery/Underscore/

• 选择功能类库– Hammer.js/YUI/iScroll/

Page 13: 一步一步开发Html5 mobile apps

USER INTERACTION开发第二步

Page 14: 一步一步开发Html5 mobile apps

HTML5 移动开发框架• PhoneGap• Trigger.io• AppMobi• App Accelerator

Page 15: 一步一步开发Html5 mobile apps

客户端的 MVC

• Backbones• YUI App Framework• KnockoutJs

Page 16: 一步一步开发Html5 mobile apps

Backbone.js

Page 17: 一步一步开发Html5 mobile apps

Backbone with REST

• Sync 处理器对应 REST 的 CRUD 操作– Create = HTTP POST– Read = HTTP GET– Update = HTTP PUT– Delete = HTTP Delete

URL Verb Description/entities GET fetch entities/entities POST create entity/entities/id PUT modify entity/entities/id DELETE delete entity

Page 18: 一步一步开发Html5 mobile apps

YUI App Framework

• Model+View+Router

• Pjax = pushState + Ajax

Page 19: 一步一步开发Html5 mobile apps

客户端模板系统• Handlebar• Mustache

Page 20: 一步一步开发Html5 mobile apps

UI 框架• jQuery Mobile• Sencha Touch• Kendo UI

Page 21: 一步一步开发Html5 mobile apps

Kendo UI

http://demos.kendoui.com/mobile/overview/index.html

Page 22: 一步一步开发Html5 mobile apps

PERFORMANCE, USER EXPERIENCE开发第三步

Page 23: 一步一步开发Html5 mobile apps

性能• Manifest• LocalStorage• SessionStorage• CSS3 Animation• Cache

Page 24: 一步一步开发Html5 mobile apps

使用模块组织你的代码• AMD (异步模块定义)– RequireJS– SeaJS– YUI Module

Page 25: 一步一步开发Html5 mobile apps

YUI Module

RequireJs:

Page 26: 一步一步开发Html5 mobile apps

响应 Mobile

Page 27: 一步一步开发Html5 mobile apps

媒体查询• @media all and (min-width:500px) { … }

• @media screen and (min-width: 400px) and (max-width: 700px) { … }

Page 28: 一步一步开发Html5 mobile apps

MediaQueri.es

Page 29: 一步一步开发Html5 mobile apps

DEBUG开发第四步

Page 30: 一步一步开发Html5 mobile apps

移动调试• Chrome 开发者工具

• 远程调试– Edge Inspect– Weinre– iWebInspector

• 多设备 / 多浏览器测试

Page 31: 一步一步开发Html5 mobile apps

书籍推荐

Page 32: 一步一步开发Html5 mobile apps

THANKS!@adamlu