Backbone.js - это, по сути, сверхлегкий фреймворк, который позволяет структурировать код Javascript в стиле MVC (модель, представление, контроллер), где ...

Модель - это часть вашего кода, который извлекает и заполняет данные,

Представление - это HTML-представление этой модели (представления меняются по мере изменения модели и т. д.)

и дополнительный Контроллер, который в этом случае позволяет вам сохранять состояние вашего Javascript-приложения через URL-адрес хэшбэга, например: http://twitter.com/#search?q=backbone.js

Некоторые преимущества, которые я обнаружил с Backbone:

• Больше никаких Javascript Spaghetti: код организован и разбит на семантически значимые файлы .js, которые позже объединяются с помощью JAMMIT.

• Нет больше jQuery.data(bla, bla): не нужно хранить данные в DOM, вместо этого храните данные в моделях

• привязка событий просто работает

• чрезвычайно полезная служебная библиотека Underscore

• Код backbone.js хорошо документирован и отлично читается. Открыл мне глаза на ряд техник кода JS.

Минусы:

• Мне потребовалось время, чтобы обдумать это и понять, как применить это к моему коду, но я новичок в Javascript.

Вот набор отличных руководств по использованию Backbone с Rails в качестве серверной части:

CloudEdit: учебное пособие по Backbone.js с Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

p.s. Существует также замечательный класс Collection, который позволяет вам работать с коллекциями моделей и имитировать вложенные модели, но я не хочу сбивать вас с толку с самого начала.

Если вы собираетесь создавать сложные пользовательские интерфейсы в браузере, вы, вероятно, в конечном итоге обнаружите, что изобретаете большинство частей, из которых состоят такие фреймворки, как Backbone.js и Sammy.js. Итак, вопрос в том, создаете ли вы что-то достаточно сложное в браузере, чтобы заслужить его использование (чтобы вы сами не изобретали то же самое).

Если то, что вы планируете создать, представляет собой то, что пользовательский интерфейс регулярно меняет способ отображения, но не отправляется на сервер для получения целых новых страниц, то вам, вероятно, понадобится что-то вроде Backbone.js или Sammy.js. Ярким примером чего-то подобного является GMail от Google. Если вы когда-либо использовали его, вы заметите, что он загружает один большой кусок HTML, CSS и JavaScript при первом входе в систему, а затем все происходит в фоновом режиме. Он может переключаться между чтением электронной почты и обработкой почтового ящика и поиском и обратно по всем сообщениям, даже не запрашивая визуализацию целой новой страницы.

Именно такие приложения эти фреймворки упрощают разработку. Без них вы либо в конечном итоге соберетесь объединить разнообразный набор отдельных библиотек, чтобы получить части функциональности (например, jQuery BBQ для управления историей, Events.js для событий и т. Д.), Либо вы в конечном итоге создадите все самостоятельно. а также необходимость поддерживать и тестировать все самостоятельно. Сравните это с чем-то вроде Backbone.js, тысячи людей смотрят его на Github, сотнями форков, над которыми люди могут работать, и сотнями вопросов, которые уже заданы и на которые даны ответы здесь, в Stack Overflow.

Но все это не имеет значения, если то, что вы планируете построить, недостаточно сложно, чтобы окупить кривую обучения, связанную с фреймворком. Если вы все еще создаете сайты на PHP, Java или что-то еще, где внутренний сервер по-прежнему выполняет всю тяжелую работу по созданию веб-страниц по запросу пользователя, а JavaScript / jQuery просто мешает этому процессу, вы не t будут нужны или еще не готовы для Backbone.js.

Backbone is...

... очень небольшая библиотека компонентов, которую вы можете использовать, чтобы упорядочить свой код. Он поставляется в виде одного файла JavaScript. Не считая комментариев, он содержит менее 1000 строк фактического JavaScript. Это грамотно написано, и вы можете прочитать все за пару часов.

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

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

Backbone is for...

... добавление структуры в JavaScript.

Поскольку JavaScript не требует соблюдения каких-либо конкретных шаблонов, приложения JavaScript могут очень быстро стать беспорядочными. Любой, кто создал что-то сверх тривиального в JavaScript, скорее всего, столкнется с такими вопросами, как:

1. Где я буду хранить свои данные?
2. Где я буду размещать свои функции?
3. Как мне соединить свои функции вместе, чтобы они вызывались осмысленно и не превращались в спагетти?
4. Как сделать так, чтобы этот код поддерживали разные разработчики?

Backbone пытается ответить на эти вопросы, предоставляя вам:

• Модели и коллекции, которые помогут вам представлять данные и коллекции данных.
• Представления, чтобы помочь вам обновить DOM при изменении данных.
• Система событий, позволяющая компонентам слушать друг друга. Это сохраняет ваши компоненты отсоединенными и предотвращает спагеттификацию.
• Минимальный набор разумных соглашений, чтобы разработчики могли работать вместе над одной и той же кодовой базой.

Мы называем это паттерном MV *. Модели, виды и дополнительные принадлежности.

Backbone is light

Несмотря на первоначальный вид, Backbone фантастически легкий, почти ничего не делает. То, что он делает, очень помогает.

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

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

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

Models

В начале обычно ваши данные хранятся либо в глобальной переменной, либо в DOM как атрибуты данных. У обоих есть проблемы. Глобальные переменные могут конфликтовать друг с другом и, как правило, являются дурным тоном. Атрибуты данных, хранящиеся в DOM, могут быть только строками, вам придется анализировать их снова и снова. Трудно хранить такие вещи, как массивы, даты или объекты, а также анализировать ваши данные в структурированной форме.

Атрибуты данных выглядят так:

<p data-username="derek" data-age="42"></p>

Backbone решает эту проблему, предоставляя объект Model для представления ваших данных и связанных методов. Допустим, у вас есть список задач, у вас должна быть модель, представляющая каждый элемент в этом списке.

Когда ваша модель обновляется, запускается событие. У вас может быть представление, привязанное к этому конкретному объекту. Представление отслеживает события изменения модели и повторно отображает себя.

Views

Backbone предоставляет вам объекты View, которые взаимодействуют с DOM. Все функции, которые управляют DOM или прослушивают события DOM, находятся здесь.

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

Каждое представление привязано к определенной части DOM, поэтому у вас может быть searchFormView, который слушает только форму поиска, и shoppingCartView, который отображает только корзину покупок.

Представления обычно также привязаны к определенным моделям или коллекциям. Когда модель обновляется, она запускает событие, которое прослушивает представление. Представление могло бы вызвать рендеринг, чтобы перерисовать себя.

Точно так же, когда вы вводите форму, ваше представление может обновлять объект модели. Каждое другое представление, слушающее эту модель, затем вызовет свою собственную функцию рендеринга.

Это дает нам четкое разделение проблем, что сохраняет наш код аккуратным и аккуратным.

The render function

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

Вы также можете скомпилировать шаблон и использовать его. Шаблон - это просто строка с точками вставки. Вы передаете его функции компиляции вместе с объектом JSON и получаете обратно скомпилированную строку, которую вы можете вставить в свою DOM.

Collections

У вас также есть доступ к коллекциям, в которых хранятся списки моделей, поэтому todoCollection будет списком моделей задач. Когда коллекция получает или теряет модель, меняет свой порядок или модель в коллекции обновляется, вся коллекция запускает событие.

Представление может прослушивать коллекцию и обновлять себя при каждом обновлении коллекции.

Вы можете добавить в свою коллекцию методы сортировки и фильтрации и, например, настроить ее автоматическую сортировку.

And Events to Tie It All Together

Насколько это возможно, компоненты приложения отделены друг от друга. Они общаются с помощью событий, поэтому shoppingCartView может прослушивать коллекцию shoppingCart и перерисовывать себя при добавлении корзины.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Конечно, другие объекты также могут прослушивать shoppingCart и выполнять другие действия, например обновлять итоговые данные или сохранять состояние в локальном хранилище.

• Представления слушают модели и отображаются при изменении модели.
• Представления прослушивают коллекции и отображают список (или сетку, или карту и т. Д.) При изменении элемента в коллекции.
• Модели слушают представления, чтобы они могли изменить состояние, возможно, при редактировании формы.

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

Conventions

Код, написанный для Backbone, следует свободному набору соглашений. Код DOM принадлежит представлению. Код коллекции принадлежит коллекции. Бизнес-логика входит в модель. Другой разработчик, взявший вашу кодовую базу, сможет сразу взяться за дело.

To sum up

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

My little book

Мне настолько понравился Backbone, что я написал об этом небольшую вводную книгу. Вы можете прочитать его в Интернете здесь: http://nicholasjohnson.com/backbone-book/

Я также разбил материал на короткий онлайн-курс, который вы можете найти на здесь (в архиве). Вы можете пройти курс примерно за день.

Вот интересная презентация:

Введение в Backbone.js

Подсказка (со слайдов):

• Рельсы в браузере? Нет.
• Фреймворк MVC для JavaScript? Сорта.
• Большая толстая государственная машина? ДА!

Backbone.js - это JavaScript-фреймворк, который помогает организовать ваш код. Это буквально основа, на которой вы строите свое приложение. Он не предоставляет виджеты (например, jQuery UI или Dojo).

Он дает вам отличный набор базовых классов, которые вы можете расширить для создания чистого кода JavaScript, который взаимодействует с конечными точками RESTful на вашем сервере.

JQuery и Mootools - это просто набор инструментов с множеством инструментов вашего проекта. Backbone действует как архитектура или опора для вашего проекта, на котором вы можете создать приложение с помощью JQuery или Mootools.

Это довольно хорошее вводное видео: http://vimeo.com/22685608

Если вам нужна дополнительная информация о Rails и Backbone, у Thoughtbot есть эта довольно хорошая книга (не бесплатная): https://workshops.oughttbot.com/backbone-js-on-rails

Я должен признать, что все «преимущества» MVC никогда не делали мою работу проще, быстрее или лучше. Это просто делает процесс кодирования более абстрактным и трудоемким. Техническое обслуживание - это кошмар при попытке отладить чье-то представление о том, что такое разделение. Не знаю, сколько из вас людей когда-либо пытались обновить сайт FLEX, который использовал Cairngorm в качестве модели MVC, но то, что должно занимать 30 секунд для обновления, часто может занять более 2 часов (поиск / отслеживание / отладка только для поиска одного события ). MVC был и остается для меня «преимуществом», которое можно использовать.

Вот небольшая статья о начале работы, которую я написал на BackboneJS. Надеюсь, это поможет! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

Backbone был создан Джереми Ашкенасом, который также написал CoffeeScript. Как приложение с большим количеством JavaScript, то, что мы теперь знаем как Backbone, отвечало за структурирование приложения в согласованную базу кода. Underscore.js, единственная зависимость магистрали, также была частью приложения DocumentCloud.

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

Дополнительные преимущества использования Backbone.js

1. Смотрите Backbone как библиотеку, а не как фреймворк
2. Javascript теперь структурирован, модель (MVVM)
3. Большое сообщество пользователей

backbone.js - это Model-View-Controller (MVC) с JavaScript но Extjs (заархивировано) лучше, чем backbone для шаблона MVC с помощью сценария java

С Backbone у вас есть свобода делать практически все, что вы пожелаете. Вместо того, чтобы пытаться разветвлять api и настраивать, я бы использовал Backbonejs из-за его простоты и простоты реализации. Опять же, трудно сказать, что вам нужно из двух: одна - это библиотека, а другая - компонент.

Он также добавляет маршрутизацию с использованием контроллеров и представлений с KVO. С его помощью вы сможете разрабатывать приложения "AJAXy".

Рассматривайте его как легкую структуру Sproutcore или Cappuccino.

Это шаблон проектирования MVC на стороне клиента, поверьте мне ... Это сэкономит вам массу кода, не говоря уже о более чистом и понятном коде, более простом в сопровождении кода. Поначалу это может быть немного сложно, но поверьте мне, это отличная библиотека.

Уже так много хороших ответов. Backbone js помогает упорядочить код. При изменении модели / коллекции происходит автоматическая отрисовка представления, что снижает накладные расходы на разработку.

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

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

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

Backbone дает вам MVC на стороне клиента и все преимущества, вытекающие из этого.