一步一步开发HTML5 Mobile Apps

Transcript

1. 一步一步开发 HTML5 移动应用 鲁超伍 Adam Lu @adamlu
2. HTML5 还是 Native
3. Fastbook
4. 移动应用的博弈 • 特性丰富度 • 性能 • 开发者经验 • • 感官 • 可发现性 • 货币化
5. 为什么要开发 HTML5 Web Apps • 跨系统 / 平台 / 浏览器 • 易扩展 • 跨设备开发减少成本
6. 支持 HTML5 的移动浏览器
7. 基于 HTML5 应用之服务器端架构 • 可以和传统的 Web 架构类似 ( 浏览器不关心 ) • 可以考虑使用 REST 设计， JavaScript 加载和 管理状态 管理状态
8. 基于 HTML5 应用之前端架构 Data Application HTML5 UI Elements Template
9. BOILERPLATE 开发第一步
10. Boilerplate 核心之 HTML • Mobile viewport – <meta name="viewport" content="width=device- width"> • Home screen icon set • Home screen icon set • iOS web app – <meta name="apple-mobile-web-app-capable" content="yes"> • HTML5 新标签
11. Boilerplate 核心之 CSS • Reset CSS – normalize.css/YUI Reset CSS/HTML5 Reset • CSS Font
12. Boilerplate 核心之 JavaScript • 选择基础类库 – Zepto/YUI/jQuery/Underscore/ • 选择功能类库 – Hammer.js/YUI/iScroll/ – Hammer.js/YUI/iScroll/
13. USER INTERACTION 开发第二步
14. HTML5 移动开发框架 • PhoneGap • Trigger.io • AppMobi • App Accelerator • App Accelerator
15. 客户端的 MVC • Backbones • YUI App Framework • KnockoutJs
16. Backbone.js
17. Backbone with REST • Sync 处理器对应 REST 的 CRUD 操作 – Create = HTTP POST – Read = HTTP GET – Update = HTTP PUT – 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
18. YUI App Framework • Model+View+Router • Pjax = pushState + Ajax
19. 客户端模板系统 • Handlebar • Mustache
20. UI 框架 • jQuery Mobile • Sencha Touch • Kendo UI
21. Kendo UI http://demos.kendoui.com/mobile/overview/index.html
22. PERFORMANCE, USER EXPERIENCE 开发第三步
23. 性能 • Manifest • LocalStorage • SessionStorage • CSS3 Animation • CSS3 Animation • Cache
24. 使用模块组织你的代码 • AMD （异步模块定义） – RequireJS – SeaJS – YUI Module – YUI Module
25. RequireJs: YUI Module
26. 响应 Mobile
27. 媒体查询 • @media all and (min-width:500px) { … } • @media screen and (min-width: 400px) and (max-width: 700px) { … } (max-width: 700px) { … }
28. MediaQueri.es
29. DEBUG 开发第四步
30. 移动调试 • Chrome 开发者工具 • 远程调试 – Edge Inspect – Edge Inspect – Weinre – iWebInspector • 多设备 / 多浏览器测试
31. 书籍推荐
32. THANKS! @adamlu