Backbone.js и jQuery

Говорят, что Backbone обрабатывает все абстракции более высокого уровня, в то время как jQuery или подобные библиотеки работают с DOM, нормализуют события и т. Д.

Может ли кто-нибудь помочь мне понять это утверждение с помощью любого простого практического примера.

Также одной важной особенностью инфраструктуры MVC, такой как Backbone, Knockout, является то, что она поддерживает синхронизацию модели (данных) и представления. Но это, похоже, специфично на уровне страницы, а не для всего приложения. Итак, можем ли мы синхронизировать модель / данные и представление на нескольких страницах .. (своего рода глобальный)

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

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

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

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

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

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

Во-первых, две библиотеки вовсе не конкурируют - они дополняют друг друга.

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

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

И кое-что, что я мог бы сделать в Backbone.js:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Редактировать:

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

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

Основными функциями приложения MV * являются маршрутизация, привязка данных, шаблоны / представления, модели и доступ к данным. Backbone может частично зависеть от 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" );
});