Backbone lesson 1

Курс «Backbone.js +
Underscore.js»

Подготовил: Михаил Скида

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

Введение в MVC
MVC (model-view-controller) – один из шаблонов проектирования
(MVVM, MVP и др.) приложения. Применяется как в front-end, так в back-
end разработке. Используется для построения архитектурного каркаса
приложения.

MVC позволяет разделить данные, представление и обработку действий
пользователя на три отдельных компонента:

- Модель (Model)
- Вид или Представление (View)
- Контроллер (Controller)

Основная цель применения паттерна состоит в разделении бизнес-
логики (model) от её визуализации (view). За счет такого разделения
повышается возможность повторного использования кода.

Графически, это можно представить след. образом:

Пользователь через интерфейс управляет контроллером, который
изменяет состояние модели и уведомляет представление.
Представление, используя текущее состояние модели, строит
пользовательский интерфейс.

Подробнее о компонентах паттерна:

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

Вью - отображает данные, полученные от модели в нужном формате,
информирует модель о действиях пользователя, собирает данные из
DOM’a. По сути - это I/O компонент.

Контроллер - первым получает запрос, обрабатывает его, запускает
модель, принимая от нее ответ, который направляет в уровень
представления (вью). Маршрутизатор приложения.

Backbone MVC
Фреймворк Backbone.js основан на MVC-паттерне, но с некоторыми
отличиями от классической реализации:

1. Добавляется 4й компонент – Коллекция (Collection)

Коллекция - это сортированный набор моделей, который умеет
обращаться с этими моделями, фильтровать или сортировать их. Также
коллекции могут работать с сервисами по REST интерфейсу (CRUD, мы к
нему вернёмся позже).

2. В Backbone роль контроллера выполняет компонент Router, и он
используются, в первую очередь, для маршрутизации приложений c
использованием хэш-тегов (#).

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

Основан на принципах ООП (классы и объекты), наследования
(прототипы и наследники), и, ко всему, поддерживает расширение
(extend) классов и объектов.

Является мощным инструментом в руках разработчика, позволяющим
использовать структурированный подход к разработке приложения,
минимизировать работу с DOM, проектировать архитектуру приложения
в собственных сущностях.

Вопрос

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

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

1. Разработка архитектуры приложения ДО написания бизнес-кода.
2. Нет лапше-кода.
3. Нет завязки на данные из DOM.
4. Легко масштабировать, рефакторить, саппортить.
5. Куча прекрасных методов «из коробки».
6. Высокая ре-юзабельность кода.

Резюмирую постом «Why would you use Backbone.js?.» (перевод).

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

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

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

Backbone lesson 1

More Related Content

What's hot (20)

Similar to Backbone lesson 1 (20)

Backbone lesson 1