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

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

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

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

Trello был построен с нуля с Backbone.js. Магистраль работает вместе с API истории HTML5 и Усы Без логики шаблонный язык на фронтенде. Все элементы Технический стек Trello были спроектированы таким образом, чтобы создать обслуживаемый клиент, который легко обрабатывает обновления и динамически повторно синхронизируется с сервером при каждом событии DOM.
Трелло использует Магистральная модель и Представления для его объектов, таких как Карты или Члены, и Коллекции магистралей для связанных моделей – например, Карты в списке. Разработчики также создали свой собственный кеш Model на стороне клиента для более быстрого обновления и более эффективного повторного использования кода.
2. квадрат
Скорее всего, вы уже слышали о Foursquare, популярном приложении для социальных сетей на основе определения местоположения, которое позволяет вам делиться местами с друзьями по всему миру.

Основной JavaScript API Foursquare построен вокруг Магистральные моделигде классы Model API Foursquare (такие как Users, Venues и Check-in) являются подклассами классов Backbone Model и наследуют их методы и свойства.
Реализация кода может быть построена следующим образом: fourSq.api.models.Venue = fourSq.api.models.Model.extend ({…}); Да, верно, Backbone позволяет разработчикам писать хороший объектно-ориентированный JavaScript.

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

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

Читайте больше на Антипаттерны позвоночника решить, нужен ли вам 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. Поиск коктейлей
Cocktail Search – это приложение с открытым исходным кодом, которое дает вам возможность взглянуть на код очень простой реализации Backbone.js. Бэкэнд работает на Python, но нам интересно то, что script.js файл.

Если вы изучите код, то увидите очень простую структуру платформы Model-View- *: она содержит одну модель, определенную в коктейль класс, который не изменяет настройки по умолчанию родительского класса Backbone.Model, одну коллекцию Backbone для результатов поиска и 3 представления Backbone, каждый добавляет новые методы в родительский класс Backbone.View.
Если вы посмотрите на index.html файл, вы можете узнать, как разработчик добавил Backbone.js и его зависимости, Underscore.js и jQuery в разделе заголовка. Underscore.js является единственной жесткой зависимостью Backbone, тогда как jQuery необходим, если вы хотите манипулировать DOM с помощью Backbone Views (как в случае с приложением Cocktail Search).
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 в качестве внешнего интерфейса своего мобильного приложения, но им настолько понравилось, что они также использовали его на клиентской стороне своего настольного веб-сайта. В их Блог за кулисами они объясняют свой выбор структуры способностью Backbone обеспечить прочную структурную основу, оставаясь при этом гибкими.
Масштабирование является основной задачей для приложения потокового аудио, и SoundCloud признает, что оно «больше связано с организацией, чем с реализацией», что делает хорошо организованный, но легкий Backbone идеальным выбором для них.

SoundCloud использует Рули система семантических шаблонов для рендеринга Backbone Views на веб-интерфейсе.
8. AirBnB
AirBnB – это безумно успешный общественный рынок, где вы можете найти и забронировать различные типы жилья почти в 200 странах мира.

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

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

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

Backbone.js позволил Hulu постепенно преобразовывать их рендеринг с серверной на клиентскую сторону вместо того, чтобы рискованно переписывать свой существующий сервер Rails.
10. Countly
Countly – это мобильное аналитическое приложение в режиме реального времени, которое позволяет вам отслеживать производительность вашего iPhone, Android или Windows Phone прямо из окна браузера.

Посмотрите на замечательный список программного обеспечения с открытым исходным кодом, которое использовалось для разработки платформы, включая суперзвезд последних лет: Nginx, MongoDB, Node.js для серверной части и, конечно, Backbone.js для внешнего интерфейса.
Графли использует Рули библиотека семантических шаблонов для визуализации Backbone Views, отображающая данные, подготовленные и загруженные с помощью Backbone Models. Countly – это приложение, удобное для разработчиков: оно не только легко расширяется, но и его документация также предоставляет разработчикам учебные пособия. нравится о том, как создавать собственные плагины поверх основного клиента Backbone.

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

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>