大型单页 JS 应用程序中的 Dojo vs ExtJS

Question

我将要构建一个非常大的MVC JS应用程序管理后台，目前已经将选择范围缩小到了Dojo和ExtJS。

我想知道在过去6个月内，是否有人使用这两个框架，并且是否在以下任何领域遇到了问题：

• 开发速度
• MVC
• 文档
• 绑定
• 国际化
• 主题化小部件
• 可搜索的客户端存储（不必离线，只需能够在收到记录后存储记录并对这些记录进行本地搜索）
• 使用类似Selenium的全栈工具进行测试
• 数据网格、分页、排序等完整功能

- tee

---

你是否考虑支持从右到左的语言？ - Li0liQ

你将在服务器端使用什么？你考虑过许可问题吗？Dojo在所有情况下都是免费的，如果你不是开发一个开源项目，那么Ext-JS就不是免费的... - Philippe

是的，很不幸它不是开源的，但它是一个拥有相当多追随者的好框架，考虑到除了dojo之外没有真正的替代品，所以价格标签不是问题。 - tee

如果你在服务器端使用Java，你也可以尝试一下ZK（http://www.zkoss.org/）。它集成了许多Ext-JS组件。此外，如果你在服务器端有这个选项的话，还有与Grails框架的良好集成。这是我发现开发这类应用程序（Grails + ZK）最快的方式。在这里查看幻灯片：http://code.google.com/p/zkgrails/。 - Philippe

这里有一个最近的例子：http://books.zkoss.org/wiki/Small_Talks/2012/January/Ajax_GSP_with_ZK 和 http://books.zkoss.org/wiki/Small_Talks/2012/January/Enrich_Grails_Server_Pages_%28GSPs%29_with_ZK - Philippe

如果你喜欢在服务器上使用Java和ExtJS，那么你应该使用Ext GWT，这是由Ext公司支持的。http://www.sencha.com/products/extgwt - Ruan Mendes

Answer 1

由于Dojo可以完成您所需的一切。

Dojo支持“存储”，可以完全满足您的要求。他们还支持不同的东西，如JsonRestStore，XMLStore，HTMLStore等，因此您可以轻松地切换数据源。

关于单元测试，您可以使用内置工具Dojo Objective Harness及其机器人或其他工具，如selenium或eventd（dojo）。

关于MVC，Dojo有一个名为dojox.mvc的东西：http://livedocs.dojotoolkit.org/releasenotes/1.7#mvc

虽然还有许多其他东西 :)

我建议在这里阅读教程：http://dojotoolkit.org/documentation/

您提出的问题有点难回答，因为我认为几乎每个体面的框架今天都可以做到您所要求的事情。每个开发人员都会告诉您，他更喜欢的框架更好^^

我个人使用Dojo，我认为它功能强大，特别适合大型应用程序。他们也非常活跃，并跟上了最新的趋势（AMD Loader RequireJS等）。 还有一个不错的社区，彼此帮助，特别是在邮件列表和irc频道上。

另外，如果它以任何方式重要，像IBM这样的公司信任并花时间帮助框架变得更好。

• 开发速度：不错
• MVC：不错
• 文档：好 - 近年来取得了巨大进展 :)
• 绑定：好
• 国际化：好
• 部件主题：使用LESS很棒
• 可搜索的客户端存储（不一定是离线的，只需要能够在接收到记录后存储记录，然后对这些记录进行本地搜索）：好
• 使用类似selenium的全栈工具进行测试：好
• 数据网格、分页、排序等：新的dgrid非常好，旧的网格也可以。Dojo很强大，但有时可能会棘手，良好的支持可以弥补它的不足。

- PEM

---

实质上，我正在寻找的是人们与我提到的主题相关的经验（好的和不好的），您是否在任何我提到的主题中使用过Dojo？ 如果使用了，好的方面有哪些，坏的方面有哪些？ - tee

• 开发速度：良好
• MVC：良好
• 文档：不太好，但最近有巨大进展 :)
• 绑定：良好
• 国际化：良好
• 小部件的主题：使用LESS进行自定义非常棒
• 可搜索的客户端存储（不一定是脱机的，只需要能够在接收记录后存储记录，然后对这些记录进行本地搜索）：良好
• 使用像Selenium这样的全栈工具进行测试：良好
• 数据网格、分页、排序等整个流程：新的 dgrid 很棒，旧的网格还可以。 Dojo 很强大，但有时可能会有些棘手，良好的支持可以弥补它的缺点。

- PEM

@PEM：你应该在你的回答中加入这些内容。 - Roy Tinker

Answer 2

这里是Ext-JS提供的功能。

• 开发速度: http://docs.sencha.com/ext-js/4-0/#!/example 查看示例有多么容易
• MVC: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller (尚未内置路由功能)
• 文档: http://docs.sencha.com/ext-js/4-0/#
• 绑定: http://docs.sencha.com/ext-js/4-0/#!/example/grid/binding.html
• 国际化: 每个部件都可以进行i18n处理
• 部件主题: 使用SASS
• 可搜索的客户端存储: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-find
• 使用一些全堆栈工具（如selenium）进行测试: 尽管没有内置，但由于它是基于OO并且是解耦的，因此测试很容易
• 数据网格、分页和排序等完整功能: http://docs.sencha.com/ext-js/4-0/#!/example/grid/multiple-sorting.html 和 http://docs.sencha.com/ext-js/4-0/#!/example/grid/paging.html
• 动态类加载: http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/
• RTL支持: http://www.sencha.com/forum/showthread.php?137065-EXTJS-4-RTL-When
• 图表: 我个人认为它不符合Ext-JS的标准，但他们提供了一个非常功能齐全的包（尽管有Bug）http://docs.sencha.com/ext-js/4-0/#!/guide/drawing_and_charting 我更喜欢使用http://code.google.com/p/flot/，我创建了一个简单的包装器将其用作Ext-JS组件。

这不属于答案，但如果您最终使用了Ext-JS，您可能需要以下内容以获得更好的图表性能。 Ext图表的优点是它们更容易交互（鼠标悬停，单击），因为它不像flot一样基于画布。

/**
 * Renders a single flot chart, a much simplifed version of ExtFlot
 */
Ext.define('Ext.ux.FlotPanel',  {
    extend: 'Ext.Component',
    alias: 'widget.flot',

    /**
     * @cfg {number[][]} data The data to be drawn when it gets rendered
     */
    data: null,

    /**
     * @cfg {object} flotOptions
     * The options to be passed in to $.plot
     */
    flotOptions: null,

    /**
     * @property
     * The Flot object used to render the chart and to manipulate it in the future. It will only
     * be available after the first resize event
     * You may not set this property but you are free to call methods on it
     */
    flot: null,

    initComponent: function() {
        this.callParent(arguments);
        // The only time that we're guaranteed to have dimensions is after the first resize event
        this.on('resize',  function(cmp) {               
            if (!cmp.flot) {
                cmp.flot = $.plot(cmp.getTargetEl().dom, cmp.data, cmp.flotOptions);
            } else {
                // Flot knows to look at the container's size and resize itself 
                cmp.flot.resize();
                cmp.flot.setupGrid();
                cmp.flot.draw();
            }
        });

        this.on('beforedestroy', function(cmp){
            if (cmp.flot) {
                cmp.flot.shutdown();
            }
        });
    }
});

4年前我接触Dojo时非常讨厌它。我无法忍受在HTML中声明小部件。我更喜欢使用JS对象来声明它们（听说现在可以在不指定HTML的情况下声明小部件了）。有些人喜欢在HTML中创建小部件，但在我的情况下（动态商务应用程序），屏幕上的每个部分都是动态的，并且配置来自服务器，因此我不希望服务器生成我的HTML，因为我需要在JS中了解它。

无论如何，我对Ext-JS非常满意，没有任何理由去寻找新的框架。

- Ruan Mendes

---

你在上述任何点中使用过ExtJS吗？如果使用过，你遇到了哪些好的和坏的方面？ - tee

除了RTL是下一个版本的，我已经用Ext-JS做了所有的事情，但我在3年前自己实现了支持。我也没有为小部件设置主题，我只使用了提供的灰色主题。但我已经按照步骤创建了一个新主题，这非常容易（我喜欢SASS）。我避免使用Ext-JS的唯一部分是图表。在与多个图表错误斗争后（由团队确认），我回到了使用flot。http://code.google.com/p/flot/ - Ruan Mendes

"4年前我看Dojo的时候，十分讨厌。" 你对Dojo的评论完全不相关...那么4年前的Ext-js呢？Dojo有两种创建小部件(widgets)的方式：编程式和声明式，可以根据您的需求和喜好来选择。您也可以完全管理小部件的生命周期。展示一些代码表明使用ext-js需要修改一些东西并不能使它更加出色 :) - PEM

@PEM：我只是在分享我的经验。我的观点是，我不能代表dojo，因为我已经四年没有看过它了。我的代码只是展示了如何轻松地将flot和extjs结合使用。 - Ruan Mendes

Dojo的API文档太糟糕了，而Ext的则很优秀。 - Grant Zhu