代码改变世界

开发Web App的一些工具和经验总结

2012-10-07 08:39 onm 阅读(...) 评论(...) 编辑 收藏

Mobile Boilerplate A best practice baseline for your mobile web app。一个Web App基本的样板、模板。提供了HTML,CSS,JS等方面的基本代码支持和常用方法。对于HTML方面,提供了基本的HTML5的代码结构,Mobile Viewport的设定,Google Analytics统计代码,iOS web app的辅助代码,加入了Modernizr js库,详细的检测当前浏览器环境对HTML5的支持情况。JS方面加入了一些常用的方法。CSS方面整合了Normalize.css,实现了对样式的reset,使各浏览器的css行为更加一致,还有一些常用的class以及预留了基于响应式的Media query的代码。

Backbone.js 提供了Model,Collection,Router,View等实现了Web App的MVC模式。MVC可以很好的降低Rich Client App的复杂度。基于Backbone.js的Mobile Web App有一个比较不错的案例是LinkedIn Mobile。Backbone.js代码基于Underscore.js等。Backbone.js和jQueryMobile的组合有一定的价值,前文介绍过jQueryMobile,但是Backbone.js和jQueryMobile的组合会存在冲突问题,可以参考这里的一种解决方案进行处理。

RequireJS is a JavaScript file and module loader。可以实现代码模块化,兼容CommonJS规范,实现模块的动态载入,改善代码质量。使用RequireJS可以将js代码分成一个个模块解耦开来,更好的组织项目,让你的代码更清晰,更容易维护,更容易复用。配合r.js还可以将模块最后打包优化,以此来减少http请求数量,加速Web App的加载速度。

经验 

对于Android项目避免使用iScroll.js,Android上面表现很糟。

去掉jquery mobile的阴影效果,可以提升Android上性能表现。

使用LocalStorage缓存web api接口返回的数据。

精简dom结构,减少css3效果使用。

充分测试,特别是对要支持Android低版本的Web App,测试HTML5标签可用性和CSS3的性能表现。

非纯粹的Web App可以使用PhoneGap做一些设备接口的扩展。

 

看会微博 采用Phonegap,HTML5,Backbone,JqueryMobile和RequireJS等技术开发,由新浪移动云提供支持的新浪微博跨平台手机应用。

Web App版本:http://tinybo.sinaapp.com/

源代码地址:https://github.com/qhm123/tinybo

tinybo 看会微博

(前段日子写了一阵子Web App,随此文告一段落)