aavezel 25 авг 2011 в 13:39

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

13 мин

288K

JavaScript*

+107

Комментарии 51

merc 25 авг 2011 в 14:25

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

-1

aavezel 25 авг 2011 в 14:34

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

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

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

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

merc 25 авг 2011 в 14:50

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

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

aavezel 25 авг 2011 в 14:51

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

merc 25 авг 2011 в 15:15

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

-4

aavezel 25 авг 2011 в 15:30

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

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

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

merc 25 авг 2011 в 15:38

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

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

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

-1

aavezel 25 авг 2011 в 16:16

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

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

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

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

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

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

GoldenHind 30 июл 2012 в 17:26

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

ikido 25 авг 2011 в 15:00

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

alprk 25 авг 2011 в 15:09

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

ikido 25 авг 2011 в 15:13

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

Kane 25 авг 2011 в 16:00

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

ikido 25 авг 2011 в 17:22

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

2fast4rabbit 25 авг 2011 в 16:26

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

ikido 25 авг 2011 в 17:25

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

aavezel 25 авг 2011 в 19:07

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

nuit 25 авг 2011 в 19:12

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

aavezel 25 авг 2011 в 15:10

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

semper 25 авг 2011 в 15:51

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

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 25 авг 2011 в 16:09

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

semper 25 авг 2011 в 17:19

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

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

aavezel 25 авг 2011 в 17:34

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

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

semper 25 авг 2011 в 17:52

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

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

aavezel 25 авг 2011 в 21:29

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

Не совсем.

Kane 25 авг 2011 в 16:01

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

aavezel 25 авг 2011 в 16:18

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

merc 25 авг 2011 в 16:26

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

semper 25 авг 2011 в 17:21

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

lega 25 авг 2011 в 18:02

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

semper 25 авг 2011 в 18:20

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

phgrey 27 авг 2011 в 23:10

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

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

1andy 25 авг 2011 в 19:07

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

aavezel 25 авг 2011 в 20:30

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

Istergul 25 авг 2011 в 23:31

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

funca 25 авг 2011 в 23:56

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

funca 25 авг 2011 в 23:52

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

вариант 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 27 авг 2011 в 23:06

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

НЛО прилетело и опубликовало эту надпись здесь

ikido 27 авг 2011 в 23:05

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

phgrey 27 авг 2011 в 23:05

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

aavezel 28 авг 2011 в 13:12

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

phgrey 28 авг 2011 в 22:50

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