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

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

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

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

Магистраль...

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

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

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

Магистраль предназначена для...

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

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

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

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

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

Мы называем это шаблоном MV *. Модели, виды и дополнительные опции.

Магистральная лампа

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

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

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

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

Модели

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

Атрибуты данных выглядят следующим образом:

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

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

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

представления

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

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

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

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

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

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

Функция рендеринга

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

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

Коллекции

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

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

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

И события, чтобы связать все вместе

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

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

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

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

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

Условные обозначения

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

Подводя итог

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

Моя маленькая книга

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

Я также сломал материал в короткий онлайн-курс, который вы можете найти здесь: http://www.forwardadvance.com/course/backbone. Вы можете закончить курс примерно через день.

Здесь интересная презентация:

Вступление к Backbone.js

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

• Rails в браузере? Нет.
• Структура MVC для JavaScript? Сорта.
• Большая толстая машина состояния? Да

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

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

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

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

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

Я должен признать, что все "преимущества" MVC никогда не делали мою работу проще, быстрее или лучше. Это просто делает весь код более абстрактным и трудоемким. Обслуживание - это кошмар, когда вы пытаетесь отладить кого-то elses-концепцию того, что означает разделение. Не знаю, сколько из вас когда-либо пытались обновить сайт 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

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

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

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

• См. Backbone как библиотеку, а не как фреймворк
• Javascript теперь организован структурированным способом, модель (MVVM)
• Сообщество крупных пользователей

backbone.js Model-View-Controller (MVC) с JavaScript но Extjs лучше, чем магистраль для шаблона MVC, java script

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

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

Посмотрите на него как облегченный дизайн Sproutcore или Cappuccino.

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

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

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

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