web app 开发使用哪个框架最好？

[Shared]

最近要做个支持 Android 和 iOS 的 web app，搜了一下发现选择挺多，有 jQuery Mobile, Sencha Touch, Titanium, Dojo Mobile 等等，眼花了。

想问下大家主要用的是哪个框架，有实际开发经验的欢迎分享下使用感受。

[yyfearth]

@learnshare 这2类框架不是一回事，Bootstrap和Fundation是CSS style为主，提供UI组件。
jQMobile和Sencha是JS 为主，主要用来写GUI的逻辑。
当然两者也有重叠的部分，前2个是用来做layout，后2个原来做交互界面逻辑

[learnshare]

@yyfearth so 我加了前提，以 UI 为主。具体选什么，还要看应用需要什么

[dialox]

还是用原生的吧。类sencha的方案都有性能、代码安全等问题。

[yyfearth]

@Shared Zepto 就是一个 jQuery 的轻量级替代品，几乎完全一样的 API，但是专门为 Mobile 或者 HTML5 浏览器设计和优化；因为觉得 jQuery 太大，而且由于兼容性的考虑而太慢，Zepto 就是为了这个出现的。你可以把它仅仅当作是一个为移动浏览器准备的 jQuery
虽然 API 一样，但是还是很多细节不同，比如缺少以及添加了 API，以及一些 API 的执行结果不同。比如 $(xxx).width()

@alex321 没必要一定有中文文档，本来技术方面的英文就不是特别的难，要了解和学习最新的东西，阅读英文是一个很有用和必要的能力。一个东西出了翻译了，那肯定都以及出来很久了。
另外我觉得 layout 还是 Bootstrap 成熟，而且用的人多，也耐看

[yyfearth]

@moxuanyuan 性能关键看优化，用一般写web app的方法直接用在在mobile上面，所有这些框架都慢。
要特别注意资源的使用和释放，注意reflow之类的。

[newtonisaac]

Anjular js

[vven]

要跨平台感觉还是自己动手写控件比较好，因为很多框架在IOS上跑得很好但是android始终不给力，我也没找到android上好用的成品框架，目前还是手写中
搭车问，大家对控件比较多的页面怎么处理的呢？比如tab+carousel+list等等，发现现在很多框架都采用单页+js动态加载，控制什么是挺方便的，不知道如果应用页面太多会不会造成性能问题

[fooCoder]

@zythum Titanium和phonegap是不同的。前者是把js代码转换成原生代码执行，后者只是提供了native的一些api

[fooCoder]

sencha的话就是能够很快的把东西实现出来，但是会对代码失去可控性，而现在mobile web app最大的问题就是性能，对性能不断调优是一个必然过程。

[runawaygo]

1. WebApp+PhoneGap(2.0之后移交到Apache改名叫Cordova)

a. Sencha touch首屈一指，我们团队开始的产品1.0-2.0就是选来选取最后落在了ST上。ST提供了直接打包成原生应用的能力，也就是说你不需要Cordova，当然有些接口可能你还是要用Cordova，因为ST提供的接口不完全。当然Sencha的开发模型就RIA来说看起来很2B不能接受，但我发现我后来自己用backbone+zepto，最后得出的结论跟ST差不多。其实这就是成熟化的组件开发模式，以前用wpf或者silverlight的RIA其实也是这个思路，当然代码量肯定略大。

b. jqMobile，怎么说呢，前者1.1以前的版本有好几个性能问题，比如说一开始不用translate3d导致性能慢，不进行点击优化导致响应慢，还有坑爹的属性重新生成html的功能导致页面前渲染缓慢，还要手动的缓存页面，列表加速不行（ST也是到了2.1之后才做了元素复用优化），没有carousel控件(这个控件我写过两边，快速滑动，加速，切换加速，是否切换判定，其实还是挺复杂的)，所以都是用iScroll以及他们家的SwipeView和CardView做一些补充。总体来说，虽然你写起来跟jquery很像而且简单，但是会遇到各种性能问题，不知道现在如何了。

c. dojo mobile，这个我用的少，我们在用ST之前有人用DojoMobile开发了一个其他产品，还行，但是跟ST比起来还是有点差距，控件和界面，并且DOJO的MVC体系不如ST的组件形态的MVC来的快。（App开发和桌面开发不同，App开发界面相对简单堆控件，桌面开发就有更多的交互和细节的问题要处理）

上述的问题是，性能的优化会达到一个极限值，我们要做一些图形处理，在canvas上面已经优化到极致了，ios4s以上都是很流畅，但是在android上面就。。。。。。悲剧了。

2. Runtime Titanium
Titanium并不是把js编译成iOS或者android源码，而是在系统中跑一个v8或者spidermonkey，并且做一些jsbinding的工作讲原生层面的东西暴露成js接口，跟nodejs原理类似。当然很多游戏引擎，如unity3d可以用c#，js写，cocos2d-x可以用lua和js写脚本，机制差不多。TI将iOS同Android界面在一定程度上面做了一致性处理，可想而知，各个平台的特殊优势就难以发挥了。还好性能方面不必原生的差太多，那么成本上面也小了很多。

3. 其他
还有些技术是直接将ruby或者c#转化成ios代码的，大部分问题是只支持iOS。所以跟你写objc差不了多少。ThoughtWorks有个理念是逻辑层用js，界面层各自实现什么的。我只能说客户端的工作大部分是UI交互，所以意义也不是很大。

最后说一下我们公司的项目。
一开始是ST+Cordova。
后来TI一路各种坑趟平，完全使用coffeescript替代javascript。后来太寂寞开始该Ti源代码。
图形层也改成Cocos2d-x，效率奇高。
都是跨平台的技术。有兴趣的可以下载 银天下 这个app玩一下。

介绍一下我们团队吧，我以前微软，后来自己出来创业2次（都因为各种原因跪了），现在在全国最大的贵金属券商-银天下做架构师。
我们团队10+个人，负责公司所有移动端的技术研发以及后端的部分业务，清一色Mac全栈工程师，用coffeescript，ios，android，c++，rails，go等等。WebApp方面我们MobileWebApp我们用backbone+zepto.js，桌面的WebApp我们用angularjs，端到端测试做的也非常全面。大部分后端我们用nodejs，部分使用rails或者java（机器学习方面的东西）。所有好玩有用，新奇的技术我们都会尝试或者使用：）

我们在2014年重点发展移动业务，所以将大力招聘（其实一直在招聘但是因为我们面试比较严格，技术很重要，但是因为我们很多时候要pair programming，所以性格也一样重要）。预计扩充到20-25人。

擦，不知不觉就成了招聘贴了，好吧，继续无节操，希望有兴趣的朋友联系我，如果你是全栈工程师那就最好，如果你希望成为全栈工程师也不错哦。

PS：我们这边的全栈工程师是，自己做交互设计，自己PS，自己写客户端，自己写服务器端，因为有些以前创业，你们懂得。还有个好处就是我们是一家金融企业，IT金融你们懂得。

[runawaygo]

@zythum 用jquery的话还是要加一个fastclick框架来快速响应点击，去除因为双击等待判断延迟的300ms

[vven]

@runawaygo 刚才发没人搭理，正好请教这个问题
对控件比较多的页面怎么处理的呢？比如tab+carousel+list等等，发现现在很多框架都采用单页+js动态加载，控制什么是挺方便的，不知道如果应用页面太多会不会造成性能问题

[runawaygo]

@vven WebApp性能问题是就是render和paint两步特别慢，所以首先要减少的是元素显示的数量，然后是元素的层级。还有就是动画用translate3d，避免使用某些css3高级技巧，点击优化什么的。

举2个例子：

1. carousel如果有10个item，那么实际上只有三个元素的display参数不会是none，就是当前显示的item以及prevItem和nextItem。

2. list如果有100个数据，一个屏幕最多能显示8个，那么这个list里面可能只是用9个htmlnode节点去做渲染，最好每一个数据的现实格式是固定的（尤其是固定高度，当然宽度一个般都是固定的）

当然上述两个情况Sencha Touch都帮你做好了。

[Shared]

@runawaygo 我不追新，喜欢使用成熟的技术，选定后就想吃透，所以希望能借鉴大家的经验，选出一套靠谱的方案。非常感谢你做的分析和分享开发过程中的各种经验。另外，我也找到一篇 webapp 开发实践的文章 http://t.cn/zRzZvVA
我大概有点头绪了，再次感谢诸位的回帖

[aisk]

Ionic感觉不错，基于 angular，UI做的很像 ios 原生，可以跑在 phonegap 一类的平台上。

[vven]

@runawaygo 那么多个页面跳转你们是怎么处理的呢？我觉得这方面最初设计的时候应该是比较重要的，因为还涉及到浏览history，转场动画等等
我感觉移动平台资源有限，不像web开发一样可以一个页面一个html，否则重复加载html也很消耗性能，我发现几个web app的框架都是单个html里面用js动态去加载或替换不同模板，达到页面切换的效果

[flynngao]

angular min

[runawaygo]

@vven 跳转是通过一个统一的navigationController来控制的，基本上就是一个CardView或者tabview。history记录根据当前页面名称啊，每个页面都有一个名称啊。

[smallghost]

@runawaygo 大神 TI 是什么？

[jalen]

@Shared 我最近也在看web app框架 不知道LZ最后选择的什么？