Sencha Touch Vs Backbone.js [关闭]

Question

Sencha Touch 和 Backbone.js 的基本区别是什么，实际上在backbone.js 中建了一个项目但不知道Sencha Touch。我必须构建一个 PhoneGap 应用程序，哪个更好？

Answer 1

Sencha Touch - 一个完整的移动 JS 库，以及用于移动 html5 开发的小部件、动画和各种实用程序。

Backbone - 一个轻量级库，为 JS 应用程序提供各种实用程序（结构、模型、集合、键值绑定、模板...）。

所以我在这里真的没有比较的余地。两者都针对不同的事物。虽然它们的某些功能可能重叠，但它们的目标是不同的。至于使用 phonegap 开发应用程序以及是否选择 Secnha Touch 或 Backbone - 我会说这取决于应用程序。我已经用这两种方法完成了 Phonegap 应用程序——Sencha 已经内置了很多东西。在某些情况下，这意味着更快的应用程序开发。其他时候它可能是一个障碍。 Backbone 为您提供了基本的、非特定于移动设备的实用程序来构建您的应用程序。含义，手写风格，动画......总之，这取决于应用程序和您的个人喜好/编码风格。

Answer 2

Sencha Touch（我们的产品）旨在成为一个多合一的应用程序框架，提供您创建精美应用程序所需的所有功能。一切都旨在在所有主要的移动浏览器上协同工作。这是一种架构清晰的面向对象的应用程序开发方法。

作为“一体式”框架，它为您提供了一整套独立于分辨率的 UI 小部件（轮播、列表、选项卡、工具栏等）、MVC 库、事件管理、实用程序库、动画、主题系统、对象生命周期管理、布局系统、绘图和图表库以及更多你无法动摇的东西......因为它们都是为了协同工作而设计的，所以最初的学习会更高，但是一旦你'在那里，人们发誓它的生产力比其他任何东西都要高出数光年。

对比

Backbone.js，这是一个简单的 MVC 库。它大约有 1,000 行代码，并为您提供 5 个类：

• 型号
• 查看
• 路由器
• 收藏
• 活动

它依赖 underscore.js 的实用功能，所以你也需要它。您可能还需要使用单独的模板库以及 DOM 抽象/操作库，如 jQuery 或 jQuery Mobile，它们还具有一些 UI 小部件和一堆其他库来构建完整的应用程序。但有些人更喜欢研究和手动管理他们的个人图书馆。

更新：我想添加更多详细信息来回复 Ben Bishop 下面的回答。 Aaron Conran 是我们 Sencha 架构师的负责人，也是 Sencha 的终身成员，他帮助我完成了这个添加。

煎茶和骨干之间有明确的世界观差异。一般来说，Sencha 倾向于留在 JS 世界中，我们希望您的 JS 会生成您的 HTML 内容。另一方面，Backbone 是 HTML 和 JS 的混搭。尽管我们相信任何复杂的数据驱动应用程序都更适合使用 Sencha 方法，但使用其中一种方法并没有直接的理由。好的，详细的。

首先，关于类，Ben 的 JS 中声明类的示例会将每个属性和方法的副本放在对象的每个实例中。通常在原始 JavaScript 中工作，您希望将它们放在原型上，以便它们在类 MyClass 的实例之间共享。 Sencha 课程系统会自动为您执行此操作。

此外，在原始 JavaScript 中，用户必须正确理解原型继承，才能正确继承或混入特定类。 Sencha 为您保驾护航，您无需担心。

就“魔术字符串”而言（尽管我认为这是一个相当负面的表征），如果您在 4.x 中不喜欢它们，则不必使用它们，而是可以使用 Ext.extend使用直接标识符（尽管自 4.0.0 http://docs.sencha.com/touch/2-1/#!/api/Ext-method-extend 起已正式弃用）。

在几个方面使用魔术字符串很有用。

首先，我们不必担心依赖顺序以及何时定义/扩展任何类。这在复杂的应用程序中很重要

例如

Ext.define('Turtle', { extend: 'Animal' }); 
Ext.define('Animal', { });

之所以有效，是因为 Sencha 会等到定义了 Animal 类之后再定义 Turtle 类。

相比之下：

Turtle = Ext.extend(Animal, {
});
Animal = Ext.extend({}, {
});

不起作用，因为我们找不到变量引用 Animal。

其次，使用字符串意味着我们可以支持动态加载。例如，如果我们有

Ext.define('MyApp.foo.MyClass', {
    extend: 'MyApp.foo.ParentClass'
});

如果您遵循严格的类名到 JS 文件夹约定，则类加载器知道将类加载到哪里：

• MyApp.foo.MyClass 位于 app/foo/MyClass.js 中
• MyApp.foo.ParentClass 位于 app/foo/ParentClass.js 中

这种技术让 Sencha 很容易做有用的事情： - 类管理器将自动创建适当的对象，而无需您创建和管理命名空间 - 确定任何类或实例的类名 Ext.ClassManager.getName(myInstance) -> "MyApp.foo.MyClass"

• 在定义特定类时执行一些操作

  Ext.ClassManager.onCreated(function() { }, 范围, 'MyApp.foo.MyClass');

• 支持命名空间重写，例如如果你需要在同一个页面中同时运行同一组类的两个版本……你可以将Sencha Touch的“Ext”顶级命名空间的命名空间改写成别的东西.

好的，进入模板。 在 Sencha 模板系统中，用户可以将他们的模板嵌入到任何不会被它弄脏的 HTML 标签中：例如具有自定义类型的脚本标签（或者在 Sencha 的情况下更典型的是 textarea）

var myTpl = Ext.XTemplate.from('theIdOfMyTpl')

您还可以将模板存储在单独的文件中，然后通过 XHR 加载它们。虽然我们通常建议您在服务器端编写一些东西来管理它以获得良好的性能。

re: IDE 的 Sencha Architect 开箱即用地自动处理这些东西（包括它在项目中引用的任何地方等）。我相信我们的 Eclipse 插件也可以处理这个问题，但我必须检查一下。

Answer 3

Sencha touch 为您提供了许多预制小部件，但如果您想自定义它们或创建一些“不走寻常路”的东西，它的工作量很大。您最终会创建一个自定义组件并挖掘很多层。

Backbone 是更低级别的访问，而不是“打包”。如果您需要移动 UI 组件，您可以使用 jqtouch 之类的东西 - 也是由 david kaneda 在他去 sencha 之前编写的。功能不全，但基础知识就在那里。

Answer 4

清流是对的。比较 Sencha Touch 与 Backbone.js 就像比较苹果和橘子。不过，我确实想强调您在使用它们中的任何一个进行开发时会看到的一些差异。

在开始之前，我想澄清一下 Backbone 到底是什么......

Backbone.js 是一个补充其他库（如 jQuery 和/或 Zepto）的框架。 jQuery 的优势在于 DOM 操作而不是宏架构。因此，为什么纯 jQuery 应用程序往往一团糟。 Backbone 为传统的 Web 开发人员提供了最基本的 MVC 结构，以更好地组织应用程序。

为了开始我的比较，我将从定义类开始...

例如，这是您在 Javascript 中声明类的方式：

function MyClass(){
    this.myProp1 = 'my value 1';
    this.myProp2 = 'my value 2';
    this.myMethod = function(myParam){
        //do something
    }
};
var myInstance = new MyClass();

在 Sencha 中，您可以像这样声明一个类：

Ext.define('MyClass', {});
Ext.create('MyClass', {});

请注意对魔术字符串的严重依赖。但是，您可以使用可用作类名的常量创建一个 make shift 枚举类。无论如何，如果你使用魔法字符串作为你的类名，你将很难在 3 或 4 个月后重命名你的类。

关于使用 HTML 的差异...

传统上，我们声明这样的形式：

<form action="/myAction.php">
  <label for="username"/>
  <input type="text" name="username"/>
  <label for="password"/>
  <input type="password" name="password"/>
  <input type="submit"/>
</form>

在 Sencha 中，您可以这样声明一个表单：

{
    title: 'Basic',
    xtype: 'form',
    id: 'basicform',
    scroll: 'vertical',
    items: [{
        xtype: 'fieldset',
        title: 'Personal Info',
        defaults: {
            labelWidth: '35%'
        },
        items: [{
            xtype: 'textfield',
            name: 'name',
            label: 'Name',
            placeHolder: 'Enter Name'
        }, {
            xtype: 'passwordfield',
            name: 'password',
            label: 'Password',
            placeHolder: 'Enter Password'
        }
        }]
}]
}

说到模板，在 Sencha 中你定义一个这样的模板：

var template = new Ext.XTemplate(
    '<p>Name: {name}'</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age &gt; 1".',
            '<p>{name}</p>',
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);
template.overwrite(panel.body, data);

使用 Backbone，您可以选择...

小胡子：

{{items}}
<div>{{name}}</div>
{{/items}}

或者如果你需要更强大的 jQuery：

<script type="text/template" id="item-template">
      <div class="todo <%= done ? 'done' : '' %>">
        <div class="display">
          <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
          <div class="todo-text"></div>
          <span class="todo-destroy"></span>
        </div>
        <div class="edit">
          <input class="todo-input" type="text" value="" />
        </div>
      </div>
    </script>

使用 Backbone 应用程序，您可以将模板定义为内联 HTML 或从外部文件加载它们。我认为你可以对煎茶做同样的事情，但我还没有看到任何官方规定的方法。只是 JS 生成的 HTML 字符串。

这些只是两者在 UI 级别的一些基本区别。借助 Backbone，您可以更好地利用现有的网络技能和知识。通过 Sencha，您正在学习一个全新的生态系统，拥有自己的惯例和怪癖。

由于严重依赖魔术字符串（参见 Sencha 表单示例），您选择的 IDE 可能会受限于它在代码完成方面的功能。这可能会导致开发时间变慢，并且更难找到由拼写错误造成的错误。但是，Sencha 确实提供了一个 Ext Builder 应用程序，可以帮助您构建 UI。

在应用程序基础架构（模型、控制器、服务...）方面，Backbone 和 Sencha 是相当的。 Sencha 甚至具有代理层的各种优势，可以让您在集成服务器 API 方面更加灵活，（Backbone 是 REST 重的。）

说到PhoneGap，我建议你看看XUI。它是由 PhoneGap 团队构建的类 jQuery 库，针对移动浏览器进行了优化。如果您的应用足够小，则可能不需要完整的应用框架。

希望这会有所帮助。