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

47 条回复 • 2015-07-14 12:28:13 +08:00

1

sdjl

2014-01-23 15:09:43 +08:00

个人觉得 Sencha Touch很不错，但是学习成本很高

2

Shared

OP

2014-01-23 15:18:23 +08:00 via iPhone

@sdjl 能说说 Sencha Touch 的优势么？我是倾向于用 jQuery Mobile 的毕竟熟悉，不过确实见到推荐 Sencha Touch 的人更多

3

lemonlwz

2014-01-23 15:24:45 +08:00

Sencha Touch 如果不做复杂应用的话可以.一旦内容复杂节点过多,android会卡到想吐...

4

Shared

OP

2014-01-23 15:26:54 +08:00

@lemonlwz 是性能不行么？

又发现一个 Zepto，彻底晕了。。。

5

moxuanyuan

2014-01-23 15:35:56 +08:00

关键是性能，我也想知

6

FanError

2014-01-23 15:39:43 +08:00

我比较倾向于用豆瓣和百度的，这两家开源了个自己的移动webapp框架，楼主可以看看

7

crny520

2014-01-23 15:42:20 +08:00

@FanError 框架名称呢？

8

Shared

OP

2014-01-23 15:56:09 +08:00

@crny520 我查了，百度的叫 clouda，豆瓣的没查着

9

zythum

2014-01-23 16:03:25 +08:00

1

@Shared clouda 是node框架把。后端的....

Zepto JQuery 2.0 不带UI的， DIY的空间大。

Zepto 虽然说和 JQuery API一直。但是还是有差别的。用Zepto的好处是代码小，如果不用考虑这些可以使用 JQuery 2.0

Sencha Touch 带UI的， DIY的空间小
JQuery Mobile 可以理解是带UI的 JQuery2.0

10

zythum

2014-01-23 16:07:49 +08:00

再说一些
Titanium 不是js框架。是把web app封装成 native app的。提供一些native的接口。类似的有phoneGap

11

Shared

OP

2014-01-23 16:10:48 +08:00

@zythum 就目前定的计划来说，想找个能支持内容刷新、视图切换、侧边栏、模拟 pull 操作这些功能的框架

12

zythum

2014-01-23 16:18:29 +08:00

你的需求。最方便的是用Sencha
然后是Dojo Mobile 或者 jQuery Mobile

13

learnshare

2014-01-23 16:20:07 +08:00

以 UI 为主的是 Fundation 和 Bootstrap 吧，jQuery Mobile 和 Sencha Touch 太复杂

14

judasnow

2014-01-23 16:20:26 +08:00

可以看看 intel 的 appframework
http://app-framework-software.intel.com/

以前叫 jqmb 好像

可以满足你的需求，jqmobile 有点太大了，wifi不给力的话加载会很慢

15

lemonlwz

2014-01-23 16:20:49 +08:00

Avalon http://rubylouvre.github.io/mvvm/
不知道有没有朋友用过呢?...国产的应该也有好东西的吧..求经验

16

zythum

2014-01-23 16:26:58 +08:00

1

@lemonlwz @learnshare 按照她的需求和提问方式
1. 不是很了解js，或者single page app 的。用司徒的框架什么肯定完全不行
2. 安她的需求够复杂，Bootstrap这种交互完全不够。做layeout还可以。
3. 对于她的提问方式。对性能的要求肯定不高。

那么就一步到位，少动脑子的方式比较好一些。

17

Shared

OP

2014-01-23 16:51:47 +08:00

@zythum 既然如此，先选 Sencha 用用看好了，多谢分析

18

alex321

2014-01-23 16:59:21 +08:00

1

比较建议 foundation 或者 uikit// 前者的中文化比较弱，后者则比较强。
我曾今很想吧 foundation v5 的文档给中文化过来的。。。可惜啊。///

19

RoshanWu

2014-01-23 17:05:34 +08:00

UI 和交互部分我目前用 zepto 和百度的 gmu，说实话，不是太好用。。。

20

sd4399340

2014-01-23 17:13:03 +08:00

Sencha touch真的，dom节点太多了，感觉是造成效率不高的原因

21

yyfearth

2014-01-23 17:24:58 +08:00

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

22

learnshare

2014-01-23 17:29:00 +08:00

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

23

dialox

2014-01-23 17:32:56 +08:00

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

24

yyfearth

2014-01-23 17:55:45 +08:00

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

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

25

yyfearth

2014-01-23 17:58:33 +08:00

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

26

newtonisaac

2014-01-23 18:52:55 +08:00 via iPad

Anjular js

27

vven

2014-01-23 19:45:01 +08:00

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

28

fooCoder

2014-01-23 20:35:37 +08:00

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

29

fooCoder

2014-01-23 20:37:51 +08:00

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

30

runawaygo

2014-01-23 22:51:20 +08:00

7

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金融你们懂得。

31

runawaygo

2014-01-23 22:52:19 +08:00

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

32

vven

2014-01-23 22:57:56 +08:00

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

33

runawaygo

2014-01-23 23:18:19 +08:00

@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都帮你做好了。

34

Shared

OP

2014-01-23 23:46:55 +08:00

1

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

35

aisk

2014-01-23 23:56:01 +08:00

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

36

vven

2014-01-24 00:21:01 +08:00

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

37

flynngao

2014-01-24 00:35:12 +08:00

angular min

38

runawaygo

2014-01-24 11:14:54 +08:00

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

39

smallghost

2014-08-21 15:11:26 +08:00

@runawaygo 大神 TI 是什么？

40

jalen

2014-08-28 09:29:50 +08:00

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

41

Shared

OP

2014-08-28 13:33:56 +08:00

@jalen 我现在的方案是前端 AngularJS + Bootstrap，后端 Express+Sequelize

42

vamxmen

2014-12-15 12:06:18 +08:00

@FanError 百度的是gmu么？豆瓣的在哪里？没找到

43

vamxmen

2014-12-15 12:10:25 +08:00

@RoshanWu gmu哪里不好呢？

我刚在IOS的浏览器上试了一下他们的示例

速度没问题啊难道是安卓上的性能不行？

44

Shared

OP

2014-12-15 14:24:43 +08:00

@vamxmen 性能和兼容永远是最大的问题

45

vamxmen

2014-12-15 16:04:57 +08:00

@Shared 别说这么笼统啊 lz不是也尝试过了吗？现在这些框架都更新好几代了吧

现在哪个比较好？

46

Shared

OP

2014-12-16 13:52:57 +08:00

@vamxmen 根据你团队的整体水平，你们产品的受众，进行选择。
在这里的回答只能给你做一个起始参考，只有当你选择了一个方案并开始工程后，才能发现到底哪种方案是最适合你的。
我的建议是如果你没用过别的方案，就用 AngularJS 吧

47

temberature

2015-07-14 12:28:13 +08:00

@crny520 https://github.com/douban-f2e/CardKit 这个？