backbone.pdf

Transcript

1. Backbone.js + Rails + AMD Backbone Rails require.js
2. Backbone.js • Построение каркасов для JS – структурированный код • MVC-подобный паттерн на фронтенде (MV*) • Управление history & browser state – Single Page Applications • Написан автором CoffeeScript (jeremy ashkenas) • Меньше 1.5 KSLOC • production: Groupon, LinkedIn, DocumentCloud
3. Чем не является Backbone • это не DOM-фреймворк (jQuery, Zepto, Prototype) • это не UI-фреймворк (YUI, Dojo, jQuery UI) • не предоставляет соглашений – Как организовать код
4. Структура • Model — attributes, dirty changes, events, validations, persistence • Event — on, off, trigger • View — render, DOM events, templates • Collection — enumerable, REST • Router — route, navigate • Underscore — utils
5. Views • this.$el — DOM элемент • this.model — связанная с представлением модель • this.template — шаблон JST, Jquery template, Mustache, EJS etc. • Backbone.View::render() - связь данных с шаблоном
6. Где хранить шаблоны • Inline • JST + ejs • внутри <script> • подгрузка через асинхронный лоадер
7. Вложенные views • Последовательность render+append • Вложенные view рендерятся в свои контейнеры • Передача this.$el от родителя
8. Вложенные views • Последовательность render+append • Вложенные view рендерятся в свои контейнеры • Передача this.$el от родителя
9. Вложенные views • Последовательность render+append • Вложенные view рендерятся в свои контейнеры • Передача this.$el от родителя
10. Модель • Набор атрибутов – отслеживание изменений (dirty changes) • Валидации • JSON, RESTful • События (коллбеки)
11. Модель + view • Модель не знает о view • Подписка на события — в конструкторе view
12. Модели и коллекции • Переопределение Model::sync + Model::url
13. Роутер • Понимает все что находится за # в УРЛе • Может служить общей шиной для событий • Восстановление состояния из location.hash
14. Где контроллер? • Некий объект + события • Router • «AppView»
15. View-View events: Mediator • «Шина» событий-коллбеков • Простой pub/sub • Глобальная видимость для нескольких views
16. Backbone.Marionette • Несколько полезных сущностей – Application, AppRouter, Renderer • Готовые views: ItemView, CollectionView, CompositeView • Layout, Region
17. Конвенции • Code conventions – • Naming conventions – My.Part.Of.Application vs a.b.c.Weird – Стараться избегать «View», «Model» в названиях
18. Bad practices • объявлять что-либо внутри $ (document).ready • игнорирование underscore – underscore идет из коробки! использовать • _.extend вместо jQuery.extend() • _.each вместо jQuery.each
19. Bad practices • Использование Backbone.Model как class definition
20. Связка с Rails • Гем backbone-rails • CoffeeScript, AssetPipeline • Заточен под рельсовый REST • Отпадает необходимость в respond_to :js
21. Связка с AMD
22. Ссылки • http://backbonejs.org/ • http://requirejs.org/ • http://ricostacruz.com/backbone-patterns/ • https://github.com/tbranyen/backbone-boilerplate • http://www.addyosmani.com/scalablejs/ •