Backbone.js как способ разложить ваш javascript по полочкам

Transcript

1. Backbone Один из способов разложить javascript по полочкам
2. Backbone Альтернативы • Spine • Ember • Knockout • JavascriptMVC ... у Фродо кончились пальцы на руке %)
3. jQuery Сделать по- быстрому и никогда не возвращаться Backbone Мухи – отдельно, котлеты – отдельно Зачем, собственно?
4. Тестовое приложение • Ведение списка дел • Добавление новых • Пометка выполненных • Удаление помеченных • Переход по страницам http://git.io/mYbUUw
5. Плюсы jQuery • Данные без выкрутасов Все данные -- в обычных javascript-переменных, хэшах, массивах, строках.
6. $(function() { var items = []; // Список дел var page = 1; // Текущая страница var pageSize = 5; // Дел в странице // ... });
7. Плюсы jQuery • Данные без выкрутасов • Всё в обработчике Весь код по обработке события, включая перерисовку -- в одном месте
8. var addTODO = function() { addItem($("#todo").val()); renderContent(); $("#todo").val(""); }; $("#adding button").click(addTODO);
9. Плюсы jQuery • Данные без выкрутасов • Всё в обработчике • Пишется быстро Новый обработчик -- новый код, необходимость в поддержке предыдущего кода практически отсутствует
10. $("#adding button").click(addTODO); $("#todo").keydown(function(e) { // ... $("#items").on("click", ".check .box" // ... // ... $("#done button").click(function() { // ...
11. Плюсы jQuery • Данные без выкрутасов • Всё в обработчике • Пишется быстро Backbone • Возможность чёткого разделения ◦ Модели ◦ Темплейты ◦ Вьюхи
12. Плюсы jQuery • Данные без выкрутасов • Всё в обработчике • Пишется быстро Backbone • Возможность чёткого разделения • Разделение обработки DOM-событий от событий, генерируемых моделями
13. Плюсы jQuery • Данные без выкрутасов • Всё в обработчике • Пишется быстро Backbone • Возможность чёткого разделения • Разделение обработки DOM-событий от событий, генерируемых моделями • Описание роутинга
14. Роутинг 1. Описывается класс роутера 2. Создаётся инстанс этого класса 3. Backbone.history.start() 4. ... 5. PROFIT
15. Todo.Router = Backbone.Router.extend({ routes: { "": "page", ":pageNo": "page" }, page: function(pageNo) { pageNo || (pageNo = 1); pagingView.paging.set({page: pageNo}); } }); App.router = new Todo.Router(); Backbone.history.start();
16. Плюсы jQuery • Данные без выкрутасов • Всё в обработчике • Пишется быстро Backbone • Возможность чёткого разделения • Разделение обработки DOM-событий от событий, генерируемых моделями • Описание роутинга • DOM-cобытия локальны для вьюх
17. Плюсы jQuery • Данные без выкрутасов • Всё в обработчике • Пишется быстро Backbone • Возможность чёткого разделения • Разделение обработки DOM-событий от событий, генерируемых моделями • Описание роутинга • DOM-cобытия локальны для вьюх • AJAX+REST из коробки
18. Итог jQuery Подходящий инструмент, чтобы выстрелить себе в ногу, не требует предварительной подготовки, однако плохо справляется с ногами сложной конфигурации. Backbone Абсолютно не подходит для решения простых задач. С ростом количества сущностей и взаимосвязей между ними смысл использовать Backbone возрастает.
19. Итог P.S. Разумеется, можно написать код на jQuery с поддержкой событий, роутинга, вьюх и моделей. Но тогда это будет уже свой фрэймворк, с маджонгом и гейшами.