Backbone.js та jQuery

Кажуть, що Backbone обробляє всі абстракції вищого рівня, тоді як бібліотеки jQuery або подібні працюють з DOM, нормалізують події тощо.

Хтось може допомогти мені зрозуміти це твердження на будь-якому простому практичному прикладі.

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

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

Характеристиками типової основної програми є:

• По суті статична HTML-сторінка, на сервері нічого не генерується
• Сервер діє як api json REST, який забезпечує вміст програми
• Елементи dom для відображення даних створюються за допомогою javascript у магістральних поданнях, використовуючи jQuery та різні бібліотеки шаблонів, щоб допомогти
• Зв'язок із сервером, а також між різними частинами програми здійснюється через магістральні моделі

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

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

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

З одного боку, дві бібліотеки взагалі не конкурують - вони безкоштовні.

Як приклад, ось кілька речей, які я б зробив з jQuery:

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

І деякі речі, які я міг би зробити у Backbone.js:

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

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 я використовував слова "control" та "app". Неправда, що 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 не такий корисний.

Магістраль - це фреймворк MV *, тоді як 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" );
});