Backbone.js для «чайников»

[@merc]

у peepcode есть 2 части скринкастов о backbone.js. Там подробнее рассматривают некоторые аспекты + порядок разработки совсем другой

[@aavezel]

По поводу полноты: Статья для чайников. Можно углубится в модели или коллекции, которые тут почти не рассмотрены. Можно по шаблоны поговорить. Можно о underscore.js поговорить. Да много что можно. Я сознательно это выкинул, т.к. пишу статью, а не книгу. Мне кажется, что статья и так огромная, я бы половину выкинул, но…

По поводу порядка:

И на будущее, начинайте проектирование системы с моделей, а не с View как это сделал я и...

Вот, например, хороший пример как надо писать на bb, но там нет разделения по полочкам, которого мне не хватило…

[@merc]

в скринкастах peepcode как раз начинают с моделей.

Зачем учить «чайников» плохому проектированию?

[@aavezel]

Зачем учить ребёнка ползать, если он всё равно ходить на ногах будет?

[@merc]

те ваша статья для дизайнеров, которые не знают основ javascript и садятся за бекбоун?

[@aavezel]

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

Если начинать показывать с модели, то мы сделаем практически наоборот. Сначала зачемто опишем модель, потом опишем коллекцию, потом покажем что есть view, потом всё соберём вместе с роутером. И только после этого мы можем что нибудь посмотреть. Т.е. пока мы это не собрали мы не видим результата.

Именно поэтому я считаю, что учить вторым способом учить «чайники» неэффективно. Если сравнивать с ребёнком, то это всё равно что сначала объяснить ему что для того чтобы открывать дверь, перед этим надо уметь ходить, а для этого надо стоять. Что бы встать надо уметь сидеть, а для того чтобы сидеть нужно держать голову. Мы не делаем всё это последовательно, не объясняем каждый шаг, не закрепляем успехами. Мы не объясняем что для того чтобы передвинутся нам не надо стоять, можно и ползать, но на двух ногах ходить эффективнее.

[@merc]

Мне понравилась ваша статья по стилю изложения. По-шаговое добавление функциона, усложнение и рефакторинг — это классно. Однако, совсем не вписывается в концепцию tdd/bdd.
Аналогия с детьми мне кажется неуместно.
Эту статью будут читать вебдевелоперы, которые обладают определёнными знаниями в js, а не те, кто учится «ходить».

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

Вы, случайно, не будете выступать на javascript meetup?

[@aavezel]

Однако, совсем не вписывается в концепцию tdd/bdd

Может потому, что я не вписывался в эту концепцию? ;-)

Эту статью будут читать вебдевелоперы, которые обладают определёнными знаниями в js, а не те, кто учится «ходить».

Эта статья для тех кто уже обладает определёнными навыками работы с JS и даже знает jQuery, но только-только дорос до использования других framework-ов в своих проектах. «Чайников» одним словом.
Мы все, до старости учимся «ходить», сначала ногами, потом головой, потом по деффкам, потом по инстанциям и т.д.

Вы, случайно, не будете выступать на javascript meetup?

Нет. Слишком узкоизвесный я джаваскриптист :) Вот перееду в дефаулт сити, устроюсь в яндекс, а там может быть и выступлю на js meetup

[@GoldenHind]

Вот я веб-девелопер-самоучка. Университетов не кончали, учусь на своих ошибках.
Среди последних проектов два были сайтами, по функциональности близкими к веб-приложениям. Там и навигация через хэши, и обработка тучи событий. И всё это писалось на jquery. Получилось оба раза крепко за тысячу строк. Меня ужас берёт при одной мысли о том, что заказчик вдруг захочет там что-то изменить.
И, знаете ли, быдлокодить как-то не очень приятно, хочется расти. Эта статья очень помогла. Сегодня, правда, буду заниматься совершенно жутким занятием: буду писать банальные вкладки с использованием backbone.js. Это тоже не комильфо, не так ли? Простите, но надо учиться.
А автору статьи большое спасибо.

[@ikido]

Может быть вы подскажете, как понять что пора заменить JQuery-код на, например backbone?
Например, я пишу админку для проекта, там ajax-CRUD, но на одностраничный сервис это явно не тянет.
Стоит и там использовать bb?

[@alprk]

Да стоит, но Backbone это не никак не замена jQuery, это совсем другое.

[@ikido]

Я не ищу замены, я бы хотел уйти от кучи js-файлов для каждой страницы и как-то все это дело организовать, но как — пока не нашел решения)

[@Kane]

Недавно открыл для себя sprockets. Думаю аналогичные решения должны быть и для других языков.

[@ikido]

меня руби более чем устраивает, почитаю подробнее, спасибо!

[@2fast4rabbit]

Google Closure Tools поможет структурировать код и скомпилировать его в один файл. К тому же на Google Closure Library можно написать свое MVC приложение, и для этого не нужен Backbone/Underscore/jQuery. Правда Google Closure сложный фреймворк для начинающих (или только знающих jQuery) программистов.

[@ikido]

Ну проблема-то не в том чтобы скомпилировать, а в том чтобы как-то организовать кучу ивентов, запросов и ответов, чтобы это можно было потом разобратЬ)

[@aavezel]

В BB это делается при помощи событий. Для javascript есть решение openajax hub.

[@nuit]

>организовать кучу ивентов, запросов и ответов, чтобы это можно было потом разобратЬ)
стоит посмотреть в сторону YUI3

[@aavezel]

Признаков внедрять backbone на мой взгляд два: Во первых, если вы не можете с налёту сказать что это за обработчик. Во вторых, если ajax запросов столько, что вы не можете с налёту сказать в каком месте у вас находится обращение к этому сервису и что оно там делает.
В реальности же, сядьте и за 3-4 часа напишите пятнашки (морской бой, крестики нолики), после этого вы будете понимать, надо ли тут использовать тяжелую технику или нет.

[@semper]

Вчера как раз полдня ловили ошибку в ие, которую с вашим кодом теоретически тоже можно словить:

var Block = Backbone.View.extend({

templates: { // Шаблоны на разное состояние
"start": _.template($('#start').html()),
"success": _.template($('#success').html()),
"error": _.template($('#error').html())
},

В данном случае templates инициализируются при создании констуктора view, а не экземпляра. И нет гарантии, что в этот момент нужные элементы с шаблонами будут в DOM. Чтобы избежать этого, стоит вынести создание шаблонов в метод initialize, который вызывается каждый раз при создании экземпляра:

var Block = Backbone.View.extend({

initalize: {
this.templates = {
"start": _.template ($('#start').html()),
"success": _.template($('#success').html()),
"error": _.template($('#error').html())
}
},

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

[@aavezel]

Есть. Называется обработка document ready при помощи jQuery ($(function(){… })) Ваш код тоже не совершенен в данном случае, т.к. экземпляр создается тут же после создания конструктора.
По поводу кеширования, _.template создает функцию-шаблон. Там уже всё что надо закешировалось… Или я не понял вас?

[@semper]

да, насчёт $(document).ready вы правы, но в вашем случае необходимо чтобы определение view находилось внутри ready, а в моём — создание экземпляра. Что мне показалось более логичным, по крайней мере, у нас в коде экземпляры вьюх создаются только внутри ready.

Про кэширование я имел ввиду, что в моём случае _.template будет выполняться три раза (для каждого шаблона) каждый раз при создании view (то есть вызове new Block(...)). Чтобы этого избежать, скомпилированную функцию-шаблон стоит где-нибудь сохранять.

[@aavezel]

Придерживаюсь правила, что почти все javascript операции должны находиться внутри ready. Пользователь не должен ждать пока там что-то проинициализируется. Если есть процесс долгой инициализации, то надо делать как gmail — progress bar.

По поводу кеширования, попробуйте Microsoft Template у них есть кеширования из коробки.

[@semper]

по поводу инициализации, здесь смотря что считать долгой. скажем, полсекунды мало для progress bar-a а ля gmail, но уже ощутимо для пользователя. Если всю инициализацию выполнять после ready, есть риск заметно замедлить инициализацию приложения. Но в общем, чтобы не холиварить — мне кажется, стоит указать в вашем тексте, или в комментариях к коду, что предполагается, что view будет определяться после document ready.

У jQuery Templates, на которые вы указали, кэширование есть, но оно не совсем из коробки. То есть насколько я понимаю, многократный вызов $('#comment').template() будет-таки каждый раз компилировать шаблон, так что нужно руками проверять перед его вызовом, есть ли шаблон в $.template, и если да, то возвращать его.

[@aavezel]

Есть риск существенно замедлить рендринг страницы, если очень много кода будет исполняться при загрузке самого скрипта. Помните про законы вёрстки быстрых страниц: стили в head, скрипты после body? Помните причину?..

Не совсем.

[@Kane]

Как насчёт тестирования Backbone?

[@aavezel]

а что с ним не так? :)

[@merc]

есть прекрасный jasmine

[@semper]

вот прекрасный туториал про тестирование Backbone c Jasmine: http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html

[@lega]

Имеет ли смысл использовать Backbone если на сайте не нужно изменение урла при переключении окон, т.е. без Router?

[@semper]

Скажем так, если переформулировать вопрос как «следует ли отказываться от Backbone если не будет использоваться Router?», то ответ однозначно нет. Router не такая большая часть Backbone, гораздо больше (и, имхо, гораздо полезнее) логика работы моделей, коллекций, и связывание view с данными через систему событий.

[@phgrey]

И если переформулировать так — «имеет ли смысл использовать Backbone только ради Router» — ответ однозначно нет. Вы можете воспользоваться, например, plugins.jquery.com/project/router

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

[@1andy]

Хорошая статья. Было бы неплохо видеть конечный результат в работе. Есть такой?

[@aavezel]

Все шаги сохраним через mercurial. Поэтому, читая какой либо шаг вы можете распаковать zip архив (+ dropbox, если на народе удалят), зайти в каталог и перейти на нужную ревизию при помощи команды
hg update --rev <номер ревизии>
После чего посмотреть на код и понять то, что вам не понятно :)

[@Istergul]

Такая активность в последнее время по поводу MVC на клиенте это сейчас такой модный тренд или реально пришла пора? :)

[@funca]

MVC слишком абстрактная штука, по сути, поэтому она везде разная)

[@funca]

Данный код не поддерживает хеш навигацию, плохо расширяется и очень плохо поддерживается.

вариант rev 7 с поддержкой хеш навигации (используя benalman.com/projects/jquery-bbq-plugin/):

$(function () {
    var Family = {
      _members: ["Саша", "Юля", "Елизар"]
      , hasMember: function(username) { return $.inArray(username, this._members) != -1; }
    }

    $("#start input[type=button]").click(function () { // Обработчик нажатия кнопки
	var username = $("#username").val(); // Получаем значение введенное пользователем
	$("span.username").text(username);
	$.bbq.pushState('#'+(Family.hasMember(username)? 'success' : 'error'));
    });

    $(window).bind('hashchange', function(){
	    $('.block').hide();
	    $('#'+($.param.fragment() || 'start')).show();
    }).trigger('hashchange');
});

[@phgrey]

Но код все еще «плохо расширяется и очень плохо поддерживается»

[@ikido]

Да, было бы интересно почитать как работать с ассоциациями.

[@phgrey]

Супер! Я бы посоветовал автору статьи предложить Backbone эту статью в качестве оффициального first-steps-tutorial

[@aavezel]

Возьмитесь перевести на чистый английский? :)

[@phgrey]

Я бы с удовольствием, но мои познания в английском, боюсь, до нужного уровня не дотягивают — скорее всего в результате получится «моя твоя не понимай», только на английском. А жаль.

[@aavezel]

Как я вас понимаю ;-)

[@reimax]

Автору статьи огромное спасибо. Несколько раз уже пробовал разобраться с bb, но всё никак не удавалось.

[@grossws]

но это хорошие легко расширяемые строки

… хорошие демократические легко расширяемые строки =)

[@AYShestakov]

А где можно подробнее узнать о связи с сервером — ну как данные туда обратно ходят

[@turist_ua]

backbonejs.ru/#Sync

[@Phenomen]

на Code School вышло уже две части курса по backbonejs (1, 2)

[@Actor]

Как View шаблоны по файлам раскидать, как в ангуляре?