Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Backbone.js

2,117 views

Published on

Обзорный доклад

  • Be the first to comment

Backbone.js

  1. 1. Backbone.js Обзор
  2. 2. Что даёт? • Наследование • Модели (Models) • Коллекции [Underscore JS] • Представления (Views) • Событийно‑ориентированные коммуникации (Events) • Персистентность (Sync) – возможность прозрачного сохранения состояния своих объектов в промежутках времени между запусками программ • Маршрутизация и HTML5 pushState • Потенциальная возможность тестирования (Jasmine/QUnit/SimonJS)
  3. 3. Модели • Модель ‑ это одна запись. • Содержит интерактивные данные • Реализует – Конвертацию – Валидацию – Вычисление свойств – Контроль доступа • Реализуется посредством наследования стандартного класса Backbone.Model • Базовый класс набор необходимых и вспомогательных методов для работы со свойствами (get/set, escape, has, toJSON, fetch, isValid, validate, save и.т.п.)
  4. 4. Пример var Photo = Backbone.Model.extend({ defaults: { src: placeholder.jpg, title: an image placeholder, coordinates: [0,0] }, initialize: function() { this.on("change:src", function() { var src = this.get("src"); console.log(Image source updated to + src); }); }, changeSrc: function( source ) { this.set({ src: source }); }});var somePhoto = new Photo({ src: "test.jpg", title:"testing"});somePhoto.changeSrc("magic.jpg"); // which triggers "change:src" and logs update
  5. 5. Пример валидации var Photo = Backbone.Model.extend({ validate: function(attribs){ if(attribs.src === undefined){ return "Remember to set a source for your image!"; } }, initialize: function(){ console.log(this model has been initialized); this.on("error", function(model, error){ console.log(error); }); }});var myPhoto = new Photo();myPhoto.set({ title: "On the beach" });//logs Remember to set a source for your image!
  6. 6. Коллекции • Позаимствованы из http://underscorejs.org/ – Унаследовали все методы • Множество моделей, для которого реализованы: – Фильтрация – Сортировка – Агрегация • Реализуются посредством наследования стандартного класса Backbone.Collection • Базовый класс также реализует полезные методы (get, set, length, push, pop, sort, create, fetch, pluck, where, ...) • Позволяют централизовано работать с несколькими моделями • Можно написать свой comparator
  7. 7. Пример коллекции var PhotoCollection = Backbone.Collection.extend({ model: Photo}); var a = new Photo({ title: my vacation}), b = new Photo({ title: my holiday}), c = new Photo({ title: my weekend});var photoCollection = new PhotoCollection([a,b]);photoCollection.add(c);photoCollection.remove([a,b]);photoCollection.remove(c);
  8. 8. Пример коллекции var PhotoCollection = new Backbone.Collection();PhotoCollection.on("add", function(photo) { console.log("I liked " + photo.get("title") + its this one, right? + photo.get("src"));});PhotoCollection.add([ {title: "My trip to Bali", src: "bali‑trip.jpg"}, {title: "The flight home", src: "long‑flight‑oofta.jpg"}, {title: "Uploading pix", src: "too‑many‑pics.jpg"}]); var sortedByAlphabet = PhotoCollection.sortBy(function (photo) { return photo.get("title").toLowerCase();});
  9. 9. Представления • Главная идея ‑ собрать интерфейс из представлений, связанных с моделью • Реиспользуемый элемент пользовательского интерфейса • Не содержит вёрстку документа • Часто ассоциирован с моделью • Создается посредством наследования базового класса Backbone.View
  10. 10. Пример представления var PhotoSearch = Backbone.View.extend({ el: $(#results), render: function( event ){ var compiled_template = _.template( $("#results‑template").html() ); this.$el.html( compiled_template(this.model.toJSON()) ); return this; //recommended as this enables calls to be chained. }, events: { "submit #searchForm": "search", "click .reset": "reset", "click .advanced": "switchContext" }, search: function( event ){ //executed when a form #searchForm has been submitted }, reset: function( event ){ //executed when an element with class "reset" has been clicked. }, switchContext: function( event ){ //executed when an element with class "advanced" has been clicked. }});
  11. 11. Пример представления • el ‑ это DOM‑элемент представления tagName: p, // required, but defaults to div if not setclassName: container, // optional, you can assign multiple classes to this property like so container homepageid: header, // optional • Код выше создаст следующий DOMElement (но не добавит его в дерево): <p id="header" class="container"></p> • Фунция render() определяет отображение представления на странице • Исходные данные обычно задаются в JSON‑формате • Для её реализации чаще всего используется сторонний js‑шаблонизатор (например: http://documentcloud.github.com/underscore/#template) – Сюда то и уходит весь быдлокод ;)
  12. 12. Пример шаблонизатора var compiled = _.template("hello: <%= name %>");compiled({name : moe}); => "hello: moe"var list = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>";_.template(list, {people : [moe, curly, larry]}); => "<li>moe</li><li>curly</li><li>larry</li>"var template = _.template("<b><%= value %></b>");template({value : <script>}); => "<b>&lt;script&gt;</b>"
  13. 13. Маршрутизация (Router) • До версии 0.5 назывался Controller ;) • Мэпит ссылки (URL) на функции в js – Адресация в веб‑приложении – Работа с историей в браузере • на низком уровне: hashchange или HTML5 pushState • После того как создали все роутеры нужно скомандовать startBackbone.history.start, чтобы история начала вестись
  14. 14. var GalleryRouter = Backbone.Router.extend({ routes: { "about" : "showAbout", http://unicorns.com/# <about "photos/:id" : "getPhoto", // http://unicorns.com/#photos/5 "search/:query" : "searchPhotos", // http://unicorns.com/#search/lolcats "search/:query/p:page" : "searchPhotos", // http://unicorns.com/#search/lolcats/p1 "photos/:id/download/*imagePath" : "downloadPhoto", // http://unicorns.com/#photos/5/download/files/lolcat‑car.jpg "*other" : "defaultRoute" // http://unicorns.com/# <anything }, showAbout: function(){ }, getPhoto: function(id){ console.log("You are trying to reach photo " + id); }, searchPhotos: function(query, page){ var page_number = page || 1; console.log("Page number: " + page_number + " of the results for " + query); }, downloadPhoto: function(id, path){ }, defaultRoute: function(other){ console.log("Invalid. You attempted to reach:" + other); }});var myGalleryRouter = new GalleryRouter();
  15. 15. Зачем нужен? • Придать структуру клиентскому коду • Упростить CRUD данных с сервера (персистентность) • Синхронизация объектов на сервере, js и DOM • Уменьшить рост количества кода на – Модели – Представления – Маршрутизацию • Что‑то ещё (я не всё про него знаю)
  16. 16. Персистентность • Реализуется посредством функции Backbone.sync – Она вызывается при каждой попытке прочитать/записать данные для модели с сервера (fetch/save ...) • url запроса определяется свойством model.url() или model.urlRoot() – По умолчанию использует jQuery.ajax – Может быть переопределена, например чтобы использовать WebSockets – По умолчанию преобразует команды в следующие REST‑запросы: – create → POST /collection read → GET /collection[/id] update → PUT /collection/id delete → DELETE /collection/id Пример обработчика на RoR: def update account = Account.find params[:id] account.update_attributes params render :json => account end
  17. 17. Где почитать? • Официальная документация (http://backbonejs.org/) – Не хочешь учить англ? http://backbonejs.ru/ • Developing Backbone.js Applications (http://addyosmani.github.com/backbone‑fundamentals/) – Основы – Примеры (готовый TODO‑лист) – Тестирование – Модульность – Расширения • Для чайников: http://habrahabr.ru/post/127049/ • Презентация про альтернативу: http://prezi.com/plv0byja9ubh/mvvm‑knockoutjs/
  18. 18. Альтернативы • Knockout (http://knockoutjs.com/) • Ember.js (http://emberjs.com/) • AngularJS (http://angularjs.org/) • SpineJS (http://spinejs.com/docs/index) – Очень любопытный аналог – Написан на coffee‑script (http://coffeescript.org/)

×