Что такое backbone
do you have enough backbone to overcome hard luck? - у тебя хватит мужества преодолеть неудачи?
4. тех. каркас, несущая часть, главная опора ( конструкции )? to the backbone - до мозга костей; насквозь; во всех отношениях
he is a reactionary to his very backbone - он реакционер до мозга костей
Новый большой англо-русский словарь . 2001 .
Полезное
Смотреть что такое "backbone" в других словарях:
backbone — I noun ardor, audacity, boldness, cornerstone, courage, dependency, determination, earnestness, embodiment, endurance, firmness, fortitude, gist, ground, indefatigability, intestinal fortitude, main point, mainstay, marrow, mettle, nerve, pillar … Law dictionary
backbone — spine, early 14c., from BACK (Cf. back) (n.) + BONE (Cf. bone). Figurative sense of strength of character is attested from 1843 … Etymology dictionary
backbone — 1 back, *spine, vertebrae, chine 2 grit, guts, sand, *fortitude, pluck Analogous words: *courage, resolution, tenacity, mettle, spirit: courageousness, intrepidity, dauntlessness, valiancy (see corresponding adjectives at BRAVE): nerve, * … New Dictionary of Synonyms
backbone — ? NOUN 1) the spine. 2) the chief support of a system or organization. 3) strength of character … English terms dictionary
Backbone.js для «чайников»
Как то поздним вечерком мне пришла мысль изучить Backbone.js и привязать его к уже написанному на jQuery сервису. Сервис уже серьёзно расширился и меня достало это нагромождение обработчиков кликов, запросов и логики. Поэтому, я как усердный школьник полез в официальную документацию. Но либо я тупой, либо мой английский меня подкачал, либо то и другое вместе, но я не черта не понял. Я прочитал уже второй раз, внимательно, и для особо одарённых мест использовал google translate. Прочитал также и пример ToDo List. Всё показалось понятно, ровно до той поры пока я не стал писать. После чего я взял всё что нашел по этой библиотеке, как на английском так и переводы. Прочтя кипу документации я решил, что сейчас вроде всё понял. Я напрягся, но… Не вышел каменный цветок у мастера Данилы, т.е. вышло, но это явно был не цветок, и камень как то неправильно пах. Тогда, как прилежный ученик, я решил написать «Hello,
Задача.
Выберем простую задачу. Написать Hello, World? Слишком просто, также как и написать Hello, <имярёк>. Может напишем клиент GTD с авторизацией и оффлайн хранилищем? Такое уже есть и оно не помогает понять нашу “хребтовую кость”. Сделаем проще. Создадим страницу с 3 состояниями. В первом состоянии человек вводит имя пользователя, во втором состоянии его поздравляют, если введённое имя найдено, в третьем состоянии огорчают, если имя не найдено. По-моему, данная задача учебней и проще некуда, да и в общем позволит посмотреть и проверить почти всё что есть в backbone.
Все шаги сохраним через mercurial. Поэтому, читая какой либо шаг вы можете распаковать zip архив (+ dropbox, если на народе удалят), зайти в каталог и перейти на нужную ревизию при помощи команды
После чего посмотреть на код и понять то, что вам не понятно :)
Шаг 0. Структура и шаблон (rev 0)
Структуру будем использовать академическую, такую как на картинке. Сознаюсь, я не знаю кто автор этой священной пули, у кого я слизал эту корову, но использую во всех заготовках. Один файл index.html. В папке css лежат стили, в папке i лежат картинки, в js — скрипты. Одновременно закинем в скрипты jquery, underscore и backbone к скриптам.
Шаблон html — пустая страничка. Т.е. страничка с пустым body и подключенными скриптами и стилем.
Т.е. как вы видите, в отличии от некоторых современных javascript mvc framework проект не требует особого подготовления, поэтому уже существующий проект может быть “переписан” на backbone.
Шаг 1. Начальная вёрстка (rev 1)
Наша страница, в соответствии с задачей, должна иметь 3 состояния: ввод имени пользователя, состояние при удачном сравнении, состояние при неудачном сравнении. Для начала сверстаем 3 дива, каждому состоянию по своему месту.
На этом шаге мы полностью подготовили всё для внедрения backbone. Эти шаги идентичные для многих реализаций одностраничных сайтов.
Шаг 2. Внедряем Router (rev 2)
Раньше до 0.5.0 этот класс звали Controller. Его назначение обработка хеш навигации в приложении. Т.е. он никогда не был в полном понимании контроллером, просто хеш навигация это контроллер приложения. Видно логика разработчиков взяла верх и теперь мы имеем класс Router.
Что такое location.hash для чего он используется, и как его использовать правильно вы можете прочитать на хабре (тут, тут или тут).
Для начала, на время создадим импровизированное меню в index.html
А потом легким движением руки добавляем работу роутинга в пример:
Вот таким простым кодом мы создали простейший tab-орентированный сайт с возможностью делать закладки на страницы.
Шаг 3. Простейшее View (rev 3)
Кстати, вы заметили, что после того, как вы перешли на страницу результата, вы можете спокойно вернуться назад нажав кнопку Backspace? Это магия хеш навигации.
Ремарка. JQuery way (rev 4)
Вы заметили сколько кода мы уже написали? Я так и думаю, многие уже из тех кто дочитал до этого предложения получат коньяк воскликнули: “На jQuery это делается быстрее и проще”. Не спорю. Код который надо написать на начальную вёрстку очень прост:
Но… Данный код не поддерживает хеш навигацию, плохо расширяется и очень плохо поддерживается.
Не для кого не секрет, что программист в своей работе занимается созданием новых приложений всего 20% времени. 80% же своего времени он состыкует модули, занимается исправлением ошибок и расширяет функционал уже созданных проектов. А поддержка jQuery лапши может очень дорого стоить. Очевидный способ избежать геморроя на пальцах, это заняться декомпозицией проектов, для чего в основном изобретают велосипеды. Backbone уже готовый велосипед. Зачем придумывать что то новое, когда за вас это сделал добрый дядя?
Шаг 4. Работа со View через Template (rev 5)
View было бы не View, а контролером, если бы не умела себя отображать. В backbone нет своего механизма для этого. Смешно? Нисколько… Его назначение не давать инструмент для создания приложения, а дать шаблон, используя который можно было бы создать максимально поддерживаемую систему. Поэтому в backbone можно использовать различные template движки. Например, встроенный в underscore.js движок от John Resig. Или подключить Microsoft Template. А если хитрожопно извернуться то можно реализовать всё через Knockout.js (хотя меня напрягает его свалка логики и шаблонов)
Мы не будем напрягаться и просто используем _.template из underscore.js для реализации своих идей. Для этого создадим один пустой блок на странице, а все “наполнители” вынесем в шаблоны. Соответственно изменятся и стили страницы.
Для того чтобы показать динамику, мы добавили в шаблоны результатов имя пользователя.
Хранить имя пользователя и передавать его в шаблон мы будем в переменной AppState
Напишем View для каждого шаблона.
Замечание. У нас 3 View сылаются на один и тот же DOM элемент. В реальности такого быть не должно. Логически, это должен быть один widget. Я сознательно неверно спроектировал данный шаг, для того чтобы показать возможность работы нескольких View. Позднее я покажу как избежать данный прокол.
Контроллер тоже претерпит небольшие изменения
Вот таким образом мы добавили динамики к нашему приложению.
Шаг 5. Проверка на несколько пользователей (rev 6)
Самым простым способом проверки не только на test, но и на других пользователей, это проверка на нахождения имени в массиве пользователей.
Создадим массив Family, в который и забьем все имена.
А проверку сделаем в коде вьюшки Start. Т.к. underscore уже включено в приложение, сделаем через _.detect
Какие проблемы есть у данного решения? Основная проблема в том, что если завтра нам нужно будет сменить физическое расположение массива пользователей (сервер, localstore и т.д.), то нам придётся менять логику работы View. Т.е. View настолько завязана на метод доступа к данным, что придётся менять его код при малейшем чихе.
Ремарка 2. jQuery way. Продолжение (rev 7)
А намного ли кода нам пришлось добавить в jQuery код чтобы поддерживать нескольких пользователей? Очень мало:
Помните я говорил, что то про поддержку, 80/20% и прочую муть? Так вот. Забудьте. Для данного приложения нет ничего постыдного написать код в стиле jQuery way. Вы потратите времени в 10-20 раз меньше, чем писать это всё через Backbone. А размеры кода позволяют поддерживать это приложение хоть ночью после пол-литры. Нет ничего постыдного писать таким способом и зарабатывать свои $5. Кто не согласен, пусть засунет своё мнение в комментарий.
Я люблю повторять фразу, что все framework’и служат 2 целям, делать из миллиардного проекта, проект на миллион, и из проекта за $100 — проект на пару миллионов. Пользуетесь тем что эффективнее сэкономит ваше время и деньги.
Шаг 6. Контроллер приложения через Модель (rev 8)
Вторым шагом, удалим вьюшки Success и Error, а view Start переименуем в Block, т.к. она будет обрабатывать несколько состояний, а не только стартовое. Во оставшимся view переименуем поле template в templates в котором будут храниться все шаблоны для различных состояний
В инициализаторе представления подпишемся на событие изменения модели. На данное событие повесим перерисовку блока.
Функция перерисовки (render) будет “отрисовывать” нашу главную модель соответствующим шаблоном, зависящим от поля state модели:
Изменится также функция check. Она будет устанавливать соответствующие поля модели:
Кстати, после всех этих дел у нас ничего не отобразится, т.к. модель была создана до того как мы описали View. Поэтому возбудим событие change уже после того как мы создадим View:
Если бы у нас не было бы хеш навигации, я бы закончил этот шаг. Но у нас полетела навигация. Восстановим её. Для этого перепишим код роутера.
Ручная навигация заработала, но при нажатии на кнопку Проверить не меняется хеш адреса страницы. Исправим этот досадный недостаток при помощи подписки на событие изменения поля state у модели:
События это отдельная песня в backbone. Простейшие события, DOM-события и события изменения модели или коллекции, могут переплетаться с событиями описанными пользователем, образуя чудесный винтаж объектно-орентированного и событийно-орентированного программирования. Советую изучить их прежде чем начинать использовать Backbone.js в своём проекте.
Вот и всё с самым большим рефакторингом в этом маленьком проекте. И на будущее, начинайте проектирование системы с моделей, а не с View как это сделал я и ваши волосы будут, просто будут.
Шаг 7. Проверка на несколько пользователей через коллекцию (rev 9)
То что мы реализовали на 5 шаге имеет свой недостаток. Мы смешали логику отображения с логикой управления данными. Мы не сможем сейчас просто, не перестраивая логику работы View, заменить наш массив на обращение к сервису. Именно для этих целей в Backbone используются коллекции.
Коллекция в данном framework’е это сортированный набор моделей, который умеет обращаться с этими моделями, фильтровать или сортировать их. Также коллекции умеют из коробки работать с сервисами по REST интерфейсу. Фактически это прослойка между widget’ом и способами доступа к базе данных.
Вернёмся от рассуждений к нашей задаче. Создадим модель UserNameModel. Единственным обязательным полем данной модели будет поле Name, которое по умолчанию имеет пустое значение.
Создадим коллекцию Family из моделей UserNameModel
Добавим в коллекцию метод проверки нахождения пользователя с указанным именем в данной коллекции
Создадим экземпляр коллекции Family
После чего проверка пользователя во View сокращается до вызова метода проверки в экземпляре MyFamily
Практический пример использования Backbone
В данной заметке речь пойдет об использовании Backbone, а в частности, примеры кода работающего с сервером. Это должен быть некий промежуточный пункт в блужданиях Ищущего, так как иначе начать им пользоваться очень сложно, а вероятность отказаться от идеи перехода стремится к единице.
Замечу, что все три описывают стандартное использование Backbone, но очень редко действительно нужно, например, использовать роутер. Или же нужно банально связаться с сервером — а как это сделать? Все отсылают к Backbone.sync, а примеров почему-то никто не предоставляет. Считайте предыдущее предложение одной из основных причин написания данной заметки. Если вы с ним не согласны — дальше можно не читать.
Начнем. Писать мы будем фронтенд редактирования заметок. Сфокусируемся на сриптах, нагло игнорируя как эстетические пожелания пользователей, так и право выбора: тестировать я буду только в хроме. Ссылки на пример и код в архиве приведу в конце.
Что нам нужно, чтобы начать? Создаем пустую xhtml страничку со стандартной структурой, подключаем jquery, underscore, backbone (именно в таком порядке). В конце добавляем ссылку на наш скрипт. Со стороны сервера создаем php файл, который будет отвечать за чтение/запись данных (лежит в архиве, app.php, код приводить не буду, скрипт просто обрабатывает запросы вида ?method=).
Когда приготовления закончены, начнем писать скрипт на js. Создадим контейнер для хранения моделей и лога:
- Заставить Backbone работать с нашим бекэндом
- При получении данных фронтеном аукать в лог для проверок
- Проверять данные с сервера на флаг ошибки (is_error — устанафливается нашим скриптом)
- Упростить добавление/сохранение (сливаем методы в один)
- Производить проверку входных данных
- Прерывать старый запрос при новом (только для пары модель/метод)
Я немного слукавил. Если вызвать у модели методы так: read list read, то последний read не оборвет первый, но статья не об этом, так что кладем огромный болт.
backbone
Тематики
Синонимы
магистраль сети
магистральный кабель
опора
основа
суть
передающая среда
базовый
основной
Широкополосная магистральная сеть передачи информации.
[Л.Г.Суменко. Англо-русский словарь по информационным технологиям. М.: ГП ЦНИИС, 2003.]
Тематики
Синонимы
- магистральный кабель
- опора
- основа
- суть
- передающая среда
- базовый
- основной
магистральная линия связи
—
[Л.Г.Суменко. Англо-русский словарь по информационным технологиям. М.: ГП ЦНИИС, 2003.]
Тематики
- main line
- message circuit
- backbone
- toll line
- toll circuit
магистральная система
Система (трассы, кабели или проводники), соединяющая телекоммуникационные шкафы, городские вводы и аппаратные внутри или между зданиями.
[ANSI/TIA/EIA-607-1994]
Читайте также: