Backbone.js и jQuery

Ответ 1

Backbone/Knockout обычно используется для приложений с одной страницей. Поэтому, когда jQuery - это набор инструментов, который можно использовать с любой веб-страницей, Backbone предназначен для определенного типа приложений и помогает вам организовать для него свой код. По крайней мере, по моему опыту, одна из самых больших проблем при создании одностраничного приложения заключается в том, что код чист и модулен, а основа помогает в этом.

Характеристики типичного базового приложения:

• По существу статическая страница html, на которой ничего не генерируется на сервере
• Сервер действует как json REST api, который предоставляет контент для приложения
• Элементы dom для отображения данных создаются с помощью javascript в представлениях с базой данных, используя jQuery и различные библиотеки шаблонов, чтобы помочь
• Связь с сервером, а также между различными частями приложения осуществляется через магистральные модели.

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

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

Ответ 2

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

С одной стороны, две библиотеки совсем не конкурируют - они бесплатны.

В качестве примера, вот некоторые вещи, которые я бы сделал с jQuery:

• Анимированные слайд-шоу
• Улучшения управления формой, например, номер iOS-типа "spinner"
• Переключение видимости элементов на основе имени класса

И некоторые вещи, которые я мог бы сделать в Backbone.js:

• Создайте фотоальбом, где пользователь нажимает на миниатюру и может просматривать увеличенную версию фотографии, а также некоторые данные, например, используемую камеру, местоположение и имя фотографа.
• Создайте тип главной страницы/детали, которая представляет сетку данных и позволяет пользователю нажимать на отдельные элементы и обновлять их в форме.

jQuery выделяется на микроуровне - выбор элементов страницы, сглаживание различий в том, как браузеры обрабатывают события.

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

Backbone.js извлекает выгоду из jQuery, хотя, или что-то в этом роде, чтобы помочь отобразить результаты ваших данных и логики приложения в DOM. Например, можно использовать jQuery для выбора элемента на странице, который будет служить контейнером для вашего Backbone-приложения. Также обычно используется jQuery $(function () {}); для запуска частей вашего Backbone-элемента управления. Вероятно, вы также увидите сообщения об ошибках проверки полей формы с помощью jQuery.

В jQuery можно создать большие, сложные пользовательские интерфейсы. У нас есть несколько приложений, которые я поддерживаю на работе. Но с ними сложно работать, поскольку jQuery не предназначен для обеспечения структуры приложения. В частности, jQuery API, основанный на выборе групп элементов, а затем передающих функции обратного вызова, которые управляют этими элементами, не является хорошим шаблоном для использования в большом сложном элементе управления или приложении. У вас много вложенных функций, и очень сложно понять, что происходит.

В настоящее время я перерабатываю один из этих элементов управления в Backbone.js. В качестве окончательного примера здесь приводится краткое описание того, как мой мыслительный процесс отличается при работе с одним и тем же элементом управления в обеих разных библиотеках.

В jQuery меня беспокоит:

• Я использую правый селектор, чтобы захватить группу элементов li, которые я хочу?
• Нужно ли мне повторно заполнять этот список значений, когда этот вызов Ajax завершается?
• Как я могу поместить эти значения массива обратно в элементы input на странице?

В Backbone я больше сосредоточен на:

• Какова правильная логика для проверки этого набора свойств моего элемента модели?
• Когда пользователь нажимает кнопку "Добавить", я должен немедленно добавить новый элемент в коллекцию или мне нужно подождать, пока они не заполнит все данные, и это "действительно"?
• Как должен элемент в моей коллекции реагировать, когда элемент сразу до или после его удаления?

jQuery обрабатывает подробные детали, а Backbone - более высокоуровневый.

В заключение обратите внимание, что я использовал слова "control" и "app" при обсуждении примеров Backbone.js. Неверно, что Backbone.js предназначен только для одностраничных приложений. Это правда, однако, что Backbone.js хорош для создания сложных приложений, которые управляют данными и обрабатывают много логики. Было бы глупо использовать его для небольших элементов пользовательского интерфейса - дополнительная структура, которую он налагает, не требуется.

Update:Что касается нескольких страниц, да, Backbone действительно обеспечивает мощный механизм для сохранения ваших данных. Каждая модель имеет метод save, который будет выполнять вызов AJAX для хранения изменений на сервере. Таким образом, пока вы сохраняете свои данные, вы можете использовать многостраничное приложение. Это очень гибкая модель, и как мы, вероятно, закончим использование Backbone на работе. Хотя мне бы хотелось создать одностраничное приложение, у нас есть 10 лет работы в нашем существующем многостраничном приложении. Мы стремимся перестроить некоторые из наших более интенсивных компонентов пользовательского интерфейса в Backbone, а затем синхронизировать изменения с сервером до того, как пользователь переместится на другую страницу.

Ответ 3

Я никогда не слышал о людях, использующих backbone.js на нескольких страницах. Это почти всегда какое-то одностраничное приложение.

На одной странице может быть много разных моделей, представлений и состояний и может привести к полномасштабному мощному приложению.

Если у вас уже есть серверный шаблон/представление рендеринга в java, то backbone.js НЕ для вас. Чтобы получить максимальную отдачу от backbone.js, вы должны переместить или дублировать часть этого кода в javascript на передней панели.

Если вы не хотите делать одностраничное приложение (это означает, что приложение без обновления страницы или изменений, но URL-адрес все равно может измениться и может выглядеть как несколько страниц для пользователя), вы можете сохранить все ваш MVC на сервере, и вам не нужна магистральная сеть.

Edit:

Что такое позвоночник - это перемещение некоторых материалов MVC, которые обычно обрабатываются на сервере, и переместить их на клиент. Для многих это означает забыть о сервере и просто написать приложение как одностраничное приложение javascript. Сервер становится только источником данных JSON/REST. Если вы не готовы сделать это, то backbone.js не так уж и полезен.

Ответ 4

Backbone - это MV * framework, а jQuery - набор инструментов DOM.

Основными функциями приложения MV * являются маршрутизация, привязка данных, шаблоны/представления, модели и доступ к данным. Магистраль может частично зависеть от jQuery.

jQuery - это надежный API для запроса DOM с обширной поддержкой браузера и активным сообществом. Он поставляется с обработкой событий, отложенными объектами и анимациями.

Связывание простого события с помощью jQuery

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});