V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Shared
V2EX  ›  JavaScript

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

  •  1
     
  •   Shared · 2014-01-23 15:01:57 +08:00 · 52669 次点击
    这是一个创建于 3717 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近要做个支持 Android 和 iOS 的 web app,搜了一下发现选择挺多,有 jQuery Mobile, Sencha Touch, Titanium, Dojo Mobile 等等,眼花了。

    想问下大家主要用的是哪个框架,有实际开发经验的欢迎分享下使用感受。
    47 条回复    2015-07-14 12:28:13 +08:00
    sdjl
        1
    sdjl  
       2014-01-23 15:09:43 +08:00
    个人觉得 Sencha Touch很不错, 但是学习成本很高
    Shared
        2
    Shared  
    OP
       2014-01-23 15:18:23 +08:00 via iPhone
    @sdjl 能说说 Sencha Touch 的优势么?我是倾向于用 jQuery Mobile 的毕竟熟悉,不过确实见到推荐 Sencha Touch 的人更多
    lemonlwz
        3
    lemonlwz  
       2014-01-23 15:24:45 +08:00
    Sencha Touch 如果不做复杂应用的话可以.一旦内容复杂节点过多,android会卡到想吐...
    Shared
        4
    Shared  
    OP
       2014-01-23 15:26:54 +08:00
    @lemonlwz 是性能不行么?

    又发现一个 Zepto,彻底晕了。。。
    moxuanyuan
        5
    moxuanyuan  
       2014-01-23 15:35:56 +08:00
    关键是性能,我也想知
    FanError
        6
    FanError  
       2014-01-23 15:39:43 +08:00
    我比较倾向于用豆瓣和百度的,这两家开源了个自己的移动webapp框架,楼主可以看看
    crny520
        7
    crny520  
       2014-01-23 15:42:20 +08:00
    @FanError 框架名称呢?
    Shared
        8
    Shared  
    OP
       2014-01-23 15:56:09 +08:00
    @crny520 我查了,百度的叫 clouda,豆瓣的没查着
    zythum
        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
    zythum
        10
    zythum  
       2014-01-23 16:07:49 +08:00
    再说一些
    Titanium 不是js框架。 是把web app封装成 native app的。提供一些native的接口。类似的有phoneGap
    Shared
        11
    Shared  
    OP
       2014-01-23 16:10:48 +08:00
    @zythum 就目前定的计划来说,想找个能支持内容刷新、视图切换、侧边栏、模拟 pull 操作这些功能的框架
    zythum
        12
    zythum  
       2014-01-23 16:18:29 +08:00
    你的需求。最方便的是用Sencha
    然后是Dojo Mobile 或者 jQuery Mobile
    learnshare
        13
    learnshare  
       2014-01-23 16:20:07 +08:00
    以 UI 为主的是 Fundation 和 Bootstrap 吧,jQuery Mobile 和 Sencha Touch 太复杂
    judasnow
        14
    judasnow  
       2014-01-23 16:20:26 +08:00
    可以看看 intel 的 appframework
    http://app-framework-software.intel.com/

    以前叫 jqmb 好像

    可以满足你的需求,jqmobile 有点太大了 ,wifi不给力的话 加载会很慢
    lemonlwz
        15
    lemonlwz  
       2014-01-23 16:20:49 +08:00
    Avalon http://rubylouvre.github.io/mvvm/
    不知道有没有朋友用过呢?...国产的应该也有好东西的吧..求经验
    zythum
        16
    zythum  
       2014-01-23 16:26:58 +08:00   ❤️ 1
    @lemonlwz @learnshare 按照她的需求和提问方式
    1. 不是很了解js,或者single page app 的。用司徒的框架什么肯定完全不行
    2. 安她的需求够复杂,Bootstrap这种交互完全不够。做layeout还可以。
    3. 对于她的提问方式。对性能的要求肯定不高。

    那么就一步到位,少动脑子的方式比较好一些。
    Shared
        17
    Shared  
    OP
       2014-01-23 16:51:47 +08:00
    @zythum 既然如此,先选 Sencha 用用看好了,多谢分析
    alex321
        18
    alex321  
       2014-01-23 16:59:21 +08:00   ❤️ 1
    比较建议 foundation 或者 uikit// 前者的中文化比较弱,后者则比较强。
    我曾今很想吧 foundation v5 的文档给中文化过来的。。。可惜啊。///
    RoshanWu
        19
    RoshanWu  
       2014-01-23 17:05:34 +08:00
    UI 和交互部分我目前用 zepto 和 百度的 gmu,说实话,不是太好用。。。
    sd4399340
        20
    sd4399340  
       2014-01-23 17:13:03 +08:00
    Sencha touch真的,dom节点太多了,感觉是造成效率不高的原因
    yyfearth
        21
    yyfearth  
       2014-01-23 17:24:58 +08:00
    @learnshare 这2类框架不是一回事,Bootstrap和Fundation是CSS style为主,提供UI组件。
    jQMobile和Sencha是JS 为主,主要用来写GUI的逻辑。
    当然两者也有重叠的部分,前2个是用来做layout,后2个原来做交互界面逻辑
    learnshare
        22
    learnshare  
       2014-01-23 17:29:00 +08:00
    @yyfearth so 我加了前提,以 UI 为主。具体选什么,还要看应用需要什么
    dialox
        23
    dialox  
       2014-01-23 17:32:56 +08:00
    还是用原生的吧。类sencha的方案都有性能、代码安全等问题。
    yyfearth
        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 成熟,而且用的人多,也耐看
    yyfearth
        25
    yyfearth  
       2014-01-23 17:58:33 +08:00
    @moxuanyuan 性能关键看优化,用一般写web app的方法直接用在在mobile上面,所有这些框架都慢。
    要特别注意资源的使用和释放,注意reflow之类的。
    newtonisaac
        26
    newtonisaac  
       2014-01-23 18:52:55 +08:00 via iPad
    Anjular js
    vven
        27
    vven  
       2014-01-23 19:45:01 +08:00
    要跨平台感觉还是自己动手写控件比较好,因为很多框架在IOS上跑得很好但是android始终不给力,我也没找到android上好用的成品框架,目前还是手写中
    搭车问,大家对控件比较多的页面怎么处理的呢?比如tab+carousel+list等等,发现现在很多框架都采用单页+js动态加载,控制什么是挺方便的,不知道如果应用页面太多会不会造成性能问题
    fooCoder
        28
    fooCoder  
       2014-01-23 20:35:37 +08:00
    @zythum Titanium和phonegap是不同的。前者是把js代码转换成原生代码执行,后者只是提供了native的一些api
    fooCoder
        29
    fooCoder  
       2014-01-23 20:37:51 +08:00
    sencha的话就是能够很快的把东西实现出来,但是会对代码失去可控性,而现在mobile web app最大的问题就是性能,对性能不断调优是一个必然过程。
    runawaygo
        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金融你们懂得。
    runawaygo
        31
    runawaygo  
       2014-01-23 22:52:19 +08:00
    @zythum 用jquery的话还是要加一个fastclick框架来快速响应点击,去除因为双击等待判断延迟的300ms
    vven
        32
    vven  
       2014-01-23 22:57:56 +08:00
    @runawaygo 刚才发没人搭理,正好请教这个问题
    对控件比较多的页面怎么处理的呢?比如tab+carousel+list等等,发现现在很多框架都采用单页+js动态加载,控制什么是挺方便的,不知道如果应用页面太多会不会造成性能问题
    runawaygo
        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都帮你做好了。
    Shared
        34
    Shared  
    OP
       2014-01-23 23:46:55 +08:00   ❤️ 1
    @runawaygo 我不追新,喜欢使用成熟的技术,选定后就想吃透,所以希望能借鉴大家的经验,选出一套靠谱的方案。非常感谢你做的分析和分享开发过程中的各种经验。另外,我也找到一篇 webapp 开发实践的文章 http://t.cn/zRzZvVA
    我大概有点头绪了,再次感谢诸位的回帖
    aisk
        35
    aisk  
       2014-01-23 23:56:01 +08:00
    Ionic感觉不错,基于 angular,UI做的很像 ios 原生,可以跑在 phonegap 一类的平台上。
    vven
        36
    vven  
       2014-01-24 00:21:01 +08:00
    @runawaygo 那么多个页面跳转你们是怎么处理的呢?我觉得这方面最初设计的时候应该是比较重要的,因为还涉及到浏览history,转场动画等等
    我感觉移动平台资源有限,不像web开发一样可以一个页面一个html,否则重复加载html也很消耗性能,我发现几个web app的框架都是单个html里面用js动态去加载或替换不同模板,达到页面切换的效果
    flynngao
        37
    flynngao  
       2014-01-24 00:35:12 +08:00
    angular min
    runawaygo
        38
    runawaygo  
       2014-01-24 11:14:54 +08:00
    @vven 跳转是通过一个统一的navigationController来控制的,基本上就是一个CardView或者tabview。history记录根据当前页面名称啊,每个页面都有一个名称啊。
    smallghost
        39
    smallghost  
       2014-08-21 15:11:26 +08:00
    @runawaygo 大神 TI 是什么?
    jalen
        40
    jalen  
       2014-08-28 09:29:50 +08:00
    @Shared 我最近也在看web app框架 不知道LZ最后选择的什么?
    Shared
        41
    Shared  
    OP
       2014-08-28 13:33:56 +08:00
    @jalen 我现在的方案是前端 AngularJS + Bootstrap,后端 Express+Sequelize
    vamxmen
        42
    vamxmen  
       2014-12-15 12:06:18 +08:00
    @FanError 百度的是gmu么?豆瓣的在哪里?没找到
    vamxmen
        43
    vamxmen  
       2014-12-15 12:10:25 +08:00
    @RoshanWu gmu哪里不好呢?

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

    速度没问题啊 难道是安卓上的性能不行?
    Shared
        44
    Shared  
    OP
       2014-12-15 14:24:43 +08:00
    @vamxmen 性能和兼容永远是最大的问题
    vamxmen
        45
    vamxmen  
       2014-12-15 16:04:57 +08:00
    @Shared 别说这么笼统啊 lz不是也尝试过了吗?现在这些框架都更新好几代了吧

    现在哪个比较好?
    Shared
        46
    Shared  
    OP
       2014-12-16 13:52:57 +08:00
    @vamxmen 根据你团队的整体水平,你们产品的受众,进行选择。
    在这里的回答只能给你做一个起始参考,只有当你选择了一个方案并开始工程后,才能发现到底哪种方案是最适合你的。
    我的建议是如果你没用过别的方案,就用 AngularJS 吧
    temberature
        47
    temberature  
       2015-07-14 12:28:13 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1341 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 17:43 · PVG 01:43 · LAX 10:43 · JFK 13:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.