Sencha Touch Vs Backbone.js

Question

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

Answer 1

Sencha Touch (我们的产品)旨在成为一个一体化的应用程序框架，提供创建美观应用程序所需的所有功能。一切都被设计成在所有主要的移动浏览器上协同工作。它是一种架构清晰的面向对象的应用程序开发方法。

作为一个"all-in-one“框架，它为您提供了一整套独立于分辨率的UI小部件(carousels、列表、标签、工具栏等)一个MVC库，事件管理，实用程序库，动画，主题系统，对象生命周期管理，布局系统，绘图和图表库和更多的东西，你可以在…因为这一切都是为了协同工作而设计的，所以最初的学习是更高的，但一旦你到达那里，人们就会发誓它比其他任何东西都更有效率。

与

Backbone.js，这是一个简单的MVC库。它大约有1000行代码，提供了5个类：

• Model
• View
• Router
• Collection
• Events

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

更新:我想为下面Ben Bishop的回答添加更多细节。Aaron Conran是我们的Sencha架构师的领导者，也是Sencha的终身工作者，他帮我解决了这个问题。

在Sencha和backbone之间存在着明确的世界观差异。一般来说，Sencha倾向于停留在JS世界中，我们希望您的JS将生成您的HTML内容。另一方面，Backbone是HTML和JS的混合体。使用其中之一没有固定的理由，尽管我们相信任何复杂的数据驱动应用程序都可以通过Sencha方法得到更好的服务。好了，让我们来看看细节。

首先是re: Classes，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({}, {
});

不起作用，因为我们找不到变量reference 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(){ }，作用域，'MyApp.foo.MyClass');

• Support名称空间重写，例如，如果您需要在同一页面中同时运行同一组类的两个版本...您可以将Sencha Touch的"Ext“顶级名称空间重写为其他名称空间。

好的，转到模板。在Sencha模板系统中，用户可以将他们的模板嵌入到任何不会与之混淆的HTML标记中:例如，带有自定义类型的脚本标记(或者更常见的是Sencha的情况下是一个文本区域)

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

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

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

Answer 2

Seiryuu是对的。比较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或从外部文件加载它们。我认为你可以对Sencha做同样的事情，但是我还没有看到任何官方规定的方法。只是JS生成的HTML字符串。

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

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

当涉及到应用程序基础架构(模型、控制器、服务...)Backbone和Sencha是旗鼓相当的。Sencha甚至有一个代理层的排序优势，可以让你在服务器API的集成方面有更大的灵活性(Backbone是REST密集型)。

说到PhoneGap，我建议你去看看XUI。它是由PhoneGap团队构建的类似jQuery的库，针对移动浏览器进行了优化。如果你的应用程序足够小，它可能不需要一个成熟的应用程序框架。

希望这能有所帮助。

Answer 3

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

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

因此，我在这里看不到可以比较的空间。两者实际上针对的是不同的东西。虽然它们的一些功能可能会重叠，但它们的目标是不同的。至于使用phonegap开发应用程序，以及是否选择Secnha Touch或Backbone -我想说这取决于应用程序。我用这两个都做过Phonegap应用-- Sencha已经内置了很多东西。在某些情况下，这意味着更快的应用程序开发。其他时候，这可能是一种阻碍。Backbone为您提供基本的、非特定于移动设备的实用程序来构建您的应用程序。意思，手写风格，动画...总而言之，这取决于应用程序和您的个人偏好/编码风格。