10 веб-додатків, створених за допомогою Backbone.js [Case Study]

Ви коли-небудь заплуталися в коді спагетті? Чи не могли б ви скористатися програмою щось здоровіше? Якщо так, то подивіться на те, що можна виконати за допомогою Backbone.js. Магістральна це бібліотека JavaScript, яка вільно заснована на шаблоні дизайну Model-View-Controller, але, оскільки в ній відсутній елемент Controller, краще називати його рамкою MV *.

Це допомагає вам будувати швидкий, гладкий і багатий на дані односторінкові веб-програми, зберігає вашу логіка даних окремо від вашого інтерфейсу користувача, зберігає вас від прив'язки даних до DOM та масштабує, коли додаток зростає. Оскільки магістральна синхронізація з будь-яким RESTful API за замовчуванням, ви можете легко підключити клієнтську програму до існуючого серверного API через інтерфейс RESTful JSON.

У цій публікації ми вивчатимемо 10 веб-додатків, які використовують функції бібліотеки Backbone, щоб допомогти вам зрозуміти потенціал Backbone.js для ваших майбутніх проектів веб-програм.

1. Трелло

Трелло це програма для онлайн-співпраці та управління проектами, яка допомагає організувати проекти в платах, контрольних списках, картах, списках карт і надає вам інструменти, такі як бесіди для спілкування з членами команди.

Trello був побудований з нуля з Backbone.js. Магістральна система працює разом з API історії HTML5 і мовою, що не має логіки, з інтерфейсом. Всі елементи Trello Tech Stack були розроблені таким чином, що призвели до a підтримуваний клієнт, який легко обробляє оновлення, і динамічно повторно синхронізується з сервером кожного разу, коли відбувається подія DOM.

Trello використовує магістральну модель і перегляди для своїх об'єктів, таких як карти або учасники, і магістральні колекції для відповідних моделей - наприклад, карти зі списку. Розробники також побудовані власні клієнтські моделі кешу для швидше оновлення і більше ефективне повторне використання коду.

2. Foursquare

Швидше за все, ви вже чули про це Foursquare, популярне додаток для соціальних мереж на основі розташування, що дозволяє обмінюватися місцями зі своїми друзями по всьому світу.

Основний API JavaScript Foursquare побудований навколо магістральних моделей, де Класи моделей API Foursquare (такі як користувачі, місця проведення та перевірки) є підкласами класів магістральної моделі і успадковують їх методи і властивості.

Реалізацію коду можна зробити так: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Так, так, Backbone дозволяє розробникам написати хороший об'єктно-орієнтований JavaScript.

Магістральні перегляди також відіграють свою роль у програмі Foursquare, оскільки вони покращують роботу користувачів з такими функціями мапи та списки домашньої сторінки. Крім Backbone, JavaScript API Foursquare також використовує jQuery, Underscore.js (яка є лише жорсткою залежністю Backbone) і компілятором закриття.

3. Календар календаря

Basecamp, популярна програма керування проектами використовує Backbone.js для своєї функції Календар.

Основна мета дизайну Basecamp Calendar - створити інтерактивний інтерфейс інтуїтивне групове планування можливо, і оновлюється в мілісекундах. У Basecamp Calendar Backbone надає перегляди в шаблони ECO (Embedded CoffeeScript), коли оновлюються моделі (дані на стороні клієнта).

Цікаво відзначити, що команда розробників не зробила всю Basecamp односторінковим додатком, який є основним випадком використання Backbone.js, але використовував лише бібліотеку у функції Calendar, де вони могли реально скористатися її перевагами. Просто покажемо, що вам не обов'язково створювати повний односторінковий додаток з Backbone; краще продумано, де це можна застосувати.

Дізнайтеся більше про антипаттерні магістральних пристроїв, щоб вирішити, чи потрібна вам магістральна система для всього вашого додатка чи ні.

4. Flowdock

Flowdock це програма для спілкування в режимі реального часу, яка надає функції, такі як груповий чат, папки вхідних повідомлень команди та робочі процеси в реальному часі

Flowdock був побудований з нуля на вершині Backbone.js. Головною проблемою команди розробників було надання повідомлень у реальному часі та робочих процесів. За замовчуванням Backbone.js підключається до серверної сторони через інтерфейс RESTful, що не робить можливим потік даних у реальному часі. Тому розробники вирішили зберегти повідомлення через движок реального часу Socket.io замість REST API.

Для цього вони написав спеціальний метод називається Backbone.sync. Оскільки Socket.io також є бібліотекою JavaScript, вона робить безперервним зв'язок між інтерфейсом JavaScript і керованим сервером (Node.js). Flowdock - це, перш за все, програма Rails на стороні сервера, але вони мають окремий сервер Node.js, який обробляє з'єднання Socket.io.

Flowdock підвищує реальний досвід користувачів ще більше з Bacon.js, зручною бібліотекою JavaScript, яка забезпечує функціональне реактивне програмування. Функція EventStreams Bacon.js допомагає компанії Flowdock оновити свою модель і колекції магістральних мереж.

5. Пошук коктейлів

Пошук коктейлів це додаток з відкритим вихідним кодом, що дає вам можливість поглянути на код дуже простої реалізації Backbone.js. Мережа працює на Python, але цікаво нам файл script.js програми.

Якщо ви вивчите код, ви зможете побачити дуже базову структуру рамки Model-View- *, яка містить її Модель визначені в Коктейль клас, який не змінює настройки за замовчуванням батьківського класу Backbone.Model, один Магістральна колекція для результатів пошуку, і 3 магістральних переглядів, кожен додає нові методи до Backbone.View батьківський клас.

Якщо ви подивитеся на файл index.html, ви можете дізнатися, як розробник додав Backbone.js та його залежності, Underscore.js і jQuery у головній секції. Underscore.js є єдиною жорсткою залежністю Backbone, коли потрібна jQuery , якщо ви хочете маніпулювати DOM за допомогою магістральних переглядів (що стосується програми "Пошук коктейлів").

6. Bitbucket

Bitbucket є хостингом вихідного коду та програмою керування кодами, подібною до Github. Atlassian, компанія, що стоїть за нею, використовує Backbone в комерційному програмному забезпеченні JIRA, інший основний продукт.

Під час ретельного використання Backbone.js у своїх додатках команда розробників знайшла пару речей, які вони пропустили з Backbone. Вони зіткнулися безліч тихих збоїв, викликаних невизначеними умовами визначення Backbone.js. Це в основному означає, що Моделі, Колекції та Перегляди не обов'язково визначати спеціальні події, які вони виставляють. І якщо цього було недостатньо, моделі не завжди визначають атрибути вони виставляють.

Ця дозволена природа є особливістю, яку люблять багато розробників, але не команда Atlassian, тому вони розробили власне розширення Backbone, яке називається Backbone.Brace, додає до бібліотеки суміші та самозаписувані атрибути та події.

Якщо ви роздратовані тим же самим, ви можете додати Backbone.Brace до власного додатка, оскільки це проект з відкритим кодом, розміщений на самому Bitbucket. BitBucket використовує мову шаблонів для вусів, як і Trello для рендеринга Backbone Views на інтерфейсі.

7. SoundCloud

SoundCloud є популярною платформою для розповсюдження аудіо, де ви можете безкоштовно записувати, завантажувати та обмінюватися власним звуком або слухати музику.

Розробники SoundCloud використовували Backbone.js спочатку як фронтенд рамки свого мобільного додатку, але їм так сподобалося, що вони також використовували його на клієнтській стороні свого робочого столу. У своєму блозі Backstage вони пояснюють свій вибір фреймворку з здатністю Backbone забезпечують міцну структурну основу, залишаючись при цьому ще гнучкими.

Масштабування є головною турботою для програми потокового аудіо, і SoundCloud визнає, що це “більше стосується організації, ніж реалізації” що робить добре організовану, але легку магістраль ідеальним вибором для них.

SoundCloud використовує систему семантичних шаблонів ручок для передачі магістральних переглядів на інтерфейсі.

8. AirBnB

AirBnB це безумно успішний ринок місцевих громад, де можна знайти і забронювати різні типи житла в майже 200 країнах світу

AirBnB спочатку використовував Backbone.js у своєму мобільному додатку так само, як SoundCloud, але пізніше все більше використовував його у своїх веб-додатках, таких як Wishlists, Match, Search, Спільноти та Платежі. AirBnB полюбила Backbone настільки, що вони не тільки вирішили скористатися нею на інтерфейсі, але й хотіли зробити можливим запуск бібліотеки на сервері.

Вони пізніше зробив свою серверну магістральну бібліотеку, Rendr, з відкритим вихідним кодом і доступні на їхній сторінці Github. Rendr написаний у Node.js і слідує філософії “накладення мінімальної структури, що дозволяє розробнику використовувати бібліотеку найбільш відповідним чином для їх застосування” так само, як і сам хребет

Якщо ви зацікавлені більше в технічному стеку AirBnB, прочитайте їхню публікацію в блозі про їхню подорож з сервера Rails до Святого Грааля одночасне використання Backbone як на стороні клієнта, так і на сервері.

9. Hulu

Hulu це додаток, що передає відео, яке дозволяє безкоштовно переглядати телепередачі та фільми, якщо ви перебуваєте в США.

Hulu використовував Backbone.js для створення безшовного та швидкого користувальницького досвіду для любителів кіно. Інтерфейс дозволяє швидко переходити через додаток з легкими переходами під час навігації. Магістральна зберігає пропускну здатність для користувачів як сценарії та вбудовані відео не перезавантажуватися весь час.

Hulu запускає двигун Rails на бекенді, і якщо ви любите забавні, але інформативні переговори, ви можете прочитати про це як команда розробників заплуталася з jQuery перед тим, як остаточно вирішити змінити на більш організовані основні основи.

Backbone.js дозволив Hulu поступово перетворювати їх рендеринг з боку сервера на сторону клієнта замість того, щоб робити ризикований перезапис існуючого сервера Rails.

10. Лічильно

Слід це програма для мобільних аналітиків у реальному часі, яка дозволяє відстежувати ефективність програми iPhone, Android або Windows Phone прямо з вікна веб-переглядача.

Погляньте на чудовий список програмного забезпечення з відкритим вихідним кодом, який використовувався для розробки платформи, включаючи суперзірки останніх років: Nginx, MongoDB, Node.js для сервера і, звичайно, Backbone.js для інтерфейсу.

Лічильно використовує бібліотеку семантичних шаблонів ручного керування для візуалізації Backbone Views, що відображає дані, підготовлені та завантажені з Backbone Models. Countly - це зручна програма для розробників: вона не тільки легко розширюється, але її документація також надає розробникам підручники, подібні до цього як створювати власні плагіни поверх ядра клієнта Backbone.

Примітка редактора: Це написала Ганна Монус для Hongkiat.com. Ганна є веб-розробником і автором коду, що цікавиться наукою, штучним інтелектом і руйнівними технологіями.