1. Курс «Backbone.js +
Underscore.js»
Подготовил: Михаил Скида

2. Занятие 1
Знакомство с Backbone.js

3. Введение в MVC
MVC (model-view-controller) – один из шаблонов проектирования
(MVVM, MVP и др.) приложения. Применяется как в front-end, так в back-
end разработке. Используется для построения архитектурного каркаса
приложения.
MVC позволяет разделить данные, представление и обработку действий
пользователя на три отдельных компонента:
- Модель (Model)
- Вид или Представление (View)
- Контроллер (Controller)
Основная цель применения паттерна состоит в разделении бизнес-
логики (model) от её визуализации (view). За счет такого разделения
повышается возможность повторного использования кода.

4. Введение в MVC
Графически, это можно представить след. образом:
Пользователь через интерфейс управляет контроллером, который
изменяет состояние модели и уведомляет представление.
Представление, используя текущее состояние модели, строит
пользовательский интерфейс.

5. Введение в MVC
Подробнее о компонентах паттерна:
Модель - используется для управления данными: преимущественно
записью и чтением данных с сервера и их обработкой. Модель содержит
логическую составляющую приложения.
Вью - отображает данные, полученные от модели в нужном формате,
информирует модель о действиях пользователя, собирает данные из
DOM’a. По сути - это I/O компонент.
Контроллер - первым получает запрос, обрабатывает его, запускает
модель, принимая от нее ответ, который направляет в уровень
представления (вью). Маршрутизатор приложения.

6. Backbone MVC
Фреймворк Backbone.js основан на MVC-паттерне, но с некоторыми
отличиями от классической реализации:
1. Добавляется 4й компонент – Коллекция (Collection)
Коллекция - это сортированный набор моделей, который умеет
обращаться с этими моделями, фильтровать или сортировать их. Также
коллекции могут работать с сервисами по REST интерфейсу (CRUD, мы к
нему вернёмся позже).
2. В Backbone роль контроллера выполняет компонент Router, и он
используются, в первую очередь, для маршрутизации приложений c
использованием хэш-тегов (#).

7. Backbone.js
Backbone.js – лёгкий и гибкий JS-фреймворк, предоставляющий
собственный широкий набор методов для каждого из компонентов MVC
и имеющий жесткую зависимость только на Underscore.js (jQuery –
опционально ).
Основан на принципах ООП (классы и объекты), наследования
(прототипы и наследники), и, ко всему, поддерживает расширение
(extend) классов и объектов.
Является мощным инструментом в руках разработчика, позволяющим
использовать структурированный подход к разработке приложения,
минимизировать работу с DOM, проектировать архитектуру приложения
в собственных сущностях.

8. Вопрос
Зачем эти сложности?
Зачем использовать Backbone.js если у нас есть прекрасный jQuery и
разработка на нём (чего уж там) порой быстрее в разы?

9. Плюшки
Да, это справедливо для одно страничкой хоум-пейджи. Но если вы
собираетесь разработать мало-мальски сложное приложение, особенно
с кучей AJAX-коллов - Backbone незаменим.
1. Разработка архитектуры приложения ДО написания бизнес-кода.
2. Нет лапше-кода.
3. Нет завязки на данные из DOM.
4. Легко масштабировать, рефакторить, саппортить.
5. Куча прекрасных методов «из коробки».
6. Высокая ре-юзабельность кода.
Резюмирую постом «Why would you use Backbone.js?.» (перевод).

10. Вопросы

11. Что почитать
http://backbonejs.com – оф. сайт. Описание методов, примеры, инсталл.
http://backbonejs.ru – перевод. Давно не обновляется.
http://backbonetutorials.com/ - туториалы и посты
http://habrahabr.ru/post/127049/ - пример написания простого
приложения

12. Что поделать
Попробуйте по примеру http://habrahabr.ru/post/127049 создать
собственное простое приложение. Я проверю и обсудим.

13. Спасибо за внимание