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

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

（前段日子写了一阵子Web App，随此文告一段落）