Подтвердить что ты не робот

Sencha Touch Vs Backbone.js

В чем основное отличие Sencha Touch и Backbone.js, на самом деле они создали проект в backbone.js, но не знают о Sencha Touch. Мне нужно создать приложение PhoneGap, которое лучше для этого?

4b9b3361

ОТВЕТЫ

Ответ 1

Sencha Touch (наш продукт) предназначен как универсальная платформа приложений, которая обеспечивает все функциональные возможности, необходимые для создания замечательных приложений. Все предназначено для совместной работы на всех основных мобильных браузерах. Это чистый архитектурный объектно-ориентированный подход к разработке приложений.

Как основа "все-в-одном", он предоставляет вам полный набор независимых от разрешения виджета пользовательского интерфейса (карусели, списки, вкладки, панели инструментов и т.д.) и библиотеку MVC, управление событиями, анимацию, систему тематики, управление жизненным циклом объекта, систему компоновки, графическую и графическую библиотеку и многое другое, чем вы можете встряхнуть палку... Поскольку все это предназначено для совместной работы, начальное обучение выше, там люди клянутся, что светлые годы более продуктивны, чем что-либо еще.

против.

Backbone.js, который является простой библиотекой MVC. Это около 1000 строк кода и дает вам 5 классов:

  • Model
  • Просмотр
  • Маршрутизатор
  • Collection
  • События

Он имеет зависимость от underscore.js для служебных функций, поэтому вам это тоже нужно. Вам также, вероятно, потребуется использовать отдельную библиотеку шаблонов, а также библиотеку абстракции/обработки DOM, такую ​​как jQuery или jQuery Mobile, которая также имеет некоторые виджеты пользовательского интерфейса и множество других библиотек для создания полного приложения. Но некоторые люди предпочитают исследовать и вручную обслуживать свои отдельные библиотеки.

Обновление: я хотел добавить более подробную информацию, чтобы ответить на ответ Бен Бишопа ниже. Аарон Конран, которого возглавил наш Sencha Architect и пожизненный Sencha, помог мне с этим дополнением.

Существует определенная разница в мировоззрении между Sencha и позвоночником. В общем, Sencha имеет тенденцию оставаться в мире JS, и мы ожидаем, что ваш JS создаст ваш HTML-контент. С другой стороны, магистраль - это своего рода беспорядок между HTML и JS. Нет причин для использования одного или другого, хотя мы полагаем, что приложения, ориентированные на данные любой сложности, лучше обслуживаются подходом Sencha. Хорошо о деталях.

Вначале re: Classes, например, пример объявления класса в JS поместил бы копию каждого свойства и метода в каждый экземпляр объекта. Обычно, работая с необработанным JavaScript, вы хотите поместить их в прототип, чтобы они делились между экземплярами класса MyClass. Система класса Sencha делает это автоматически для вас.

Кроме того, в необработанном JavaScript пользователи должны правильно проверить прототипическое наследование, чтобы правильно наследовать или смешивать в определенном классе. Санча заботится о том, чтобы не беспокоиться.

Что касается "магических строк" ​​(хотя я бы сказал, что это довольно негативная характеристика), вам не нужно их использовать, если вам не нравятся их в 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() { }, scope, 'MyApp.foo.MyClass');

  • Поддержка переписывания пространства имен, например, если вам нужно одновременно запускать две версии одного и того же набора классов на одной странице... вы можете переписать пространство имен пространства имен верхнего уровня Sencha Touch "Ext" на что-то еще,

Хорошо, по шаблонам. В системе шаблонов Sencha пользователи могут встраивать свои шаблоны в любой тег HTML, который не будет мешать ему: например, теги script с настраиваемым типом (или, более типично, в случае Sencha - текстовое поле)

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

Вы также можете хранить свои шаблоны в отдельных файлах и загружать их через XHR. Хотя мы обычно рекомендуем вам написать что-то на стороне сервера, чтобы справиться с этим для хорошей производительности.

re: IDE Sencha Architect обрабатывает этот материал автоматически из коробки (включая любые места, на которые он ссылается в проекте, и т.д.). Я считаю, что наш плагин Eclipse также справляется с этим, но мне нужно будет проверить.

Ответ 2

Сейрюу прав. Сравнение Sencha Touch vs Backbone.js похоже на сравнение яблок и апельсинов. Тем не менее, я хочу выделить некоторые различия, которые вы увидите при разработке с любым из них.

Прежде чем начать, я хочу уточнить, что такое Магистраль.

Backbone.js является основой для комплимента других библиотек, таких как jQuery и/или Zepto. Сильные стороны jQuery лежат в манипуляции с DOM не как макро-архитектура. Следовательно, чистые приложения jQuery, как правило, беспорядок. Магистральная сеть предоставляет традиционным веб-разработчикам структуру костей из костистых костей, чтобы лучше организовать приложение.

Чтобы начать мое сравнение, я собираюсь начать с определения классов...

Например, так вы объявляете класс в 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 с константами, которые вы можете использовать в качестве имен классов. Несмотря на это, если вы используете магические строки для имен ваших классов, вам будет сложно переименовать свой класс 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>

С помощью базовых приложений вы можете определить шаблоны как встроенный HTML или загрузить их из внешних файлов. Я думаю, вы могли бы сделать то же самое с Сенча, но я не видел никаких официальных предписанных методов. Только JS генерирует HTML-строки.

Это лишь некоторые основные различия между ними на уровне пользовательского интерфейса. С Backbone вы можете лучше использовать свои существующие навыки и знания в Интернете. С Sencha вы изучаете совершенно новую экосистему с ее собственными соглашениями и причудами.

С большой зависимостью от магических строк (см. пример формы Sencha), ваша IDE выбора, вероятно, будет ограничена тем, что она может сделать с точки зрения завершения кода. Это может привести к более медленному времени разработки и более сложному поиску ошибок, созданных опечатками. Тем не менее, Sencha предлагает приложение Ext Builder, которое должно помочь вам создать пользовательский интерфейс.

Когда дело доходит до инфраструктуры приложений (модели, контроллеры, службы...), базовая и Sencha находятся на одном уровне друг с другом. У Sencha даже есть преимущество со своим прокси-слоем, что дает вам больше гибкости в отношении интеграции вашего API-интерфейса сервера (Backbone is REST heavy.)

Когда речь заходит о PhoneGap, я предлагаю вам проверить XUI. Это jQuery-подобная библиотека, созданная командой PhoneGap, оптимизированная для мобильных браузеров. Если ваше приложение достаточно мало, может не потребоваться полномасштабная инфраструктура приложения.

Надеюсь, что это поможет.

Ответ 3

Sencha Touch - полная мобильная библиотека JS, а также виджеты, анимации и всевозможные утилиты для разработки мобильных html5.

Backbone - легкая библиотека, которая предоставляет всевозможные утилиты для JS-приложения (структура, модели, коллекции, привязка ключевых значений, шаблонирование...).

Таким образом, я не вижу здесь места для сравнения. Оба они нацелены на разные вещи. Хотя некоторые из их функций могут перекрываться, их цель различна. Что касается разработки приложения с телефонной связью, и нужно ли выбрать Secnha Touch или Backbone - я бы сказал, что это зависит от приложения. Я сделал приложения Phonegap с обоими - у Sencha уже есть много вещей. В некоторых случаях это означает более быструю разработку приложений. В других случаях это может быть помехой. Backbone дает вам базовые, не связанные с мобильными утилитами для создания вашего приложения. Смысл, написание стилей вручную, анимация... Подводя итог, это зависит от приложения и ваших личных предпочтений/стиля кодирования.

Ответ 4

Sencha touch дает вам много готовых виджетах, но его много работы, если вы хотите их настроить или создать что-то "с проторенным путем". Вы создаете пользовательский компонент и выкапываете множество слоев.

Магистраль имеет более низкий уровень доступа, а не как "упакованный". Если вам нужны мобильные компоненты пользовательского интерфейса, вы можете использовать что-то вроде jqtouch, также написанное Дэвидом Канедой, прежде чем он отправился в сенчу. не так полно, но основы существуют.