HTML5移动开发概述

一.Native VS HTML5

1.native+html5=？
2.hybrid bridge
3.hybrid frameworks: phonegap/mui/wechat
4.browser compatibility
5.quick release/cross-platform/inter-operate/modularity <—> UX/Network speed
6.response layout on demand

 

二.HTML5 & CSS3

1.HTML5：

semantic tag

local storage

more form controls

observer.js

Modernizr

jQuery/Zepto

node.js/npm

requireJS

ajax

2.CSS3：

n-th selector

shadows

transparent

transition

transformation

Sass/Less/Compass

 

三.Frontend MVC

1.template engine

2.Separate Js-HTML-Css

3.Restful vs JSP

4.Single Web App

 

四.Start with good APIs

Native Mobile App/Desktop App<-API->Business Logic

 

五.Page Flow

H5入口->短信提醒或Push->唤起下载App

 

六.Responsive Web Design

文字流式(fluid)、控制弹性(flexible)、图片等比缩放(scale)

Bootstrap3、Intention.js

 

七.Images assets

1.CSS Sprites

2.1x/2x/3x，向上适配、向下适配、放大模式

 

八.Performance

1.html5 performance API
2.ySlow/pagespeed
3.Http gzip
4.Caching control (Etag/Expire)
5.hash-revision/timestamp-revision
6.minify/uglify
7.image quality
8.CDN
9.pre-load next contents

 

九.Build

1.Grunt/Gulp
2.Jasmine/Karma/Istanbul
3.fabric
4.Jenkins
5.Git

 

十.Security
1.CSRF
2.XSS
3.HTTPS
4.sql injection
5.Clickjacking
6.Cross-site JS request

 

十一.Testing
1.Jasmine
2.Robotframework
3.Compatibility
4.Performance

 

十二.Infrastructure
1.SAE/GAE/AWS/AliYun
2.maintenance/ page on standalone server
3.health check
4.Nginx serve static files
5.Load Balance
6.Disaster Recovery
7.Logging

 

十三.Deploy

1.Fabric

2.Hybrid Offline package

 

十四.Real User Monitoring

1.用户分析：新增用户、活跃用户、启动次数、版本分析、行业数据

2.留存分析：留存用户、用户新鲜度

3.渠道分析：时段详情、渠道列表

4.用户参与度：使用时长、使用频率、访问页面、使用间隔

5.功能使用：页面访问路径、自定义事件、事件转化率

6.终端属性：设置终端、网络及运营商、地域

7.错误分析

 

敏捷教练：http://www.jackyshen.com/