10 веб-приложений, созданных с помощью Backbone.js [Пример]

Вы когда-нибудь были запутаны в коде спагетти? Вы бы предпочли кормить свое приложение чем-то более здоровым? Если это так, взгляните на то, что может быть достигнуто с Backbone.js. позвоночник библиотека JavaScript, свободно основанная на шаблоне проектирования Model-View-Controller, но поскольку в ней отсутствует элемент Controller, лучше назвать ее средой MV *.

Это помогает вам строить быстрый, гладкий и богатый данными одностраничные веб-приложения логика данных отдельно от вашего пользовательского интерфейса, избавляет вас от привязки ваших данных к DOM, и масштабируется по мере роста вашего приложения. Поскольку Backbone по умолчанию синхронизируется с любым RESTful API, вы можете легко подключить ваше клиентское приложение к существующему серверному API через интерфейс RESTful JSON..

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

1. Трелло

Trello это онлайн-приложение для совместной работы и управления проектами, которое помогает вам организовать ваши проекты в Доски, Контрольные списки, Карты, Списки карт и предоставляет вам такие инструменты, как Беседы для общения с членами команды..

Trello был построен с нуля с Backbone.js. Backbone работает вместе с API-интерфейсом истории HTML5 и языком шаблонизаторов усов без логики на веб-интерфейсе. Все элементы Trello Tech Stack были разработаны таким образом, чтобы обслуживаемый клиент, который легко обрабатывает обновления, а также динамическая повторная синхронизация с сервером всякий раз, когда событие DOM вызвано.

Trello использует Backbone Model и Views для своих объектов, таких как Карты или Члены, и Backbone Collections для связанных моделей - например, Карт в списке. Разработчики также построил свой собственный кэш модели на стороне клиента за быстрые обновления и больше эффективное повторное использование кода.

2. Foursquare

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

Основной API-интерфейс Foursquare основан на Backbone Models, где Модельные классы API Foursquare (например, «Пользователи», «Места проведения» и «Регистрация») являются подклассами классов базовой модели и наследовать их методы и свойства.

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

Backbone Views также играют свою роль в приложении Foursquare, поскольку они расширяют возможности пользователя с помощью таких функций, как домашняя страница карты и списки. Помимо Backbone, JavaScript API Foursquare также использует jQuery, Underscore.js (что является единственной жесткой зависимостью Backbone) и компилятор Closure.

3. Календарь Basecamp

Базовый лагерь, популярное приложение для управления проектами использует Backbone.js для функции календаря.

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

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

Узнайте больше о Backbone antipatterns, чтобы решить, нужен ли вам Backbone для всего вашего приложения или нет.

4. Поток

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 обновлять свою модель и коллекции Backbone.

5. Поиск коктейлей

Поиск коктейлей это приложение с открытым исходным кодом, которое дает вам возможность взглянуть на код очень простой реализации Backbone.js. Бэкэнд работает на Python, но нам интересно файл script.js приложения.

Если вы изучите код, вы увидите очень простую структуру платформы Model-View- *: она содержит одну модель определены в коктейль класс, который не изменяет настройки по умолчанию родительского класса Backbone.Model, один Коллекция позвоночника для результатов поиска и 3 Backbone Views, каждый добавляет новые методы к Backbone.View родительский класс.

Если вы посмотрите на файл index.html, вы сможете узнать, как разработчик добавил Backbone.js и его зависимости, Underscore.js а также JQuery в главном разделе. Underscore.js является единственной жесткой зависимостью Backbone, в то время как необходим jQuery если вы хотите манипулировать DOM с помощью Backbone Views (как в случае с приложением «Поиск коктейлей»).

6. Битбакет

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 признает, что оно “больше связано с организацией, чем с реализацией” что делает хорошо организованный, но легкий Backbone идеальным выбором для них.

SoundCloud использует семантическую систему шаблонов Handlebars для рендеринга Backbone Views на веб-интерфейсе..

8. AirBnB

AirBnB это безумно успешный общественный рынок, где вы можете найти и забронировать различные типы жилья почти в 200 странах мира

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

Они позже сделал свою серверную библиотеку Backbone, Rendr, с открытым исходным кодом и доступно на их странице Github. Рендр написан на Node.js и следует философии “введение минимальной структуры, позволяющей разработчику использовать библиотеку наиболее подходящим способом для их применения” так же, как сам Backbone

Если вы больше заинтересованы в техническом стеке AirBnB, прочитайте их сообщение в блоге об их путешествии от бэкэнда Rails до Святого Грааля одновременное использование Backbone как на стороне клиента, так и на стороне сервера.

9. Хулу

Hulu это потоковое видео приложение, которое позволяет вам смотреть ТВ-шоу и фильмы бесплатно, если вы находитесь в США.

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

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

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

10. Граф

Countly это мобильное аналитическое приложение в реальном времени, которое позволяет отслеживать производительность вашего iPhone, Android или Windows Phone прямо из окна браузера.

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

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

Примечание редактора: Это написано Анной Монус для Hongkiat.com. Анна - веб-разработчик и автор кода, интересующийся наукой, искусственным интеллектом и прорывными технологиями..