Your SlideShare is downloading. ×
Backbone.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Backbone.js

1,549
views

Published on

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

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


0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,549
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Backbone.js Обзор
  • 2. Что даёт? • Наследование • Модели (Models) • Коллекции [Underscore JS] • Представления (Views) • Событийно‑ориентированные коммуникации (Events) • Персистентность (Sync) – возможность прозрачного сохранения состояния своих объектов в промежутках времени между запусками программ • Маршрутизация и HTML5 pushState • Потенциальная возможность тестирования (Jasmine/QUnit/SimonJS)
  • 3. Модели • Модель ‑ это одна запись. • Содержит интерактивные данные • Реализует – Конвертацию – Валидацию – Вычисление свойств – Контроль доступа • Реализуется посредством наследования стандартного класса Backbone.Model • Базовый класс набор необходимых и вспомогательных методов для работы со свойствами (get/set, escape, has, toJSON, fetch, isValid, validate, save и.т.п.)
  • 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. Пример валидации 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. Коллекции • Позаимствованы из http://underscorejs.org/ – Унаследовали все методы • Множество моделей, для которого реализованы: – Фильтрация – Сортировка – Агрегация • Реализуются посредством наследования стандартного класса Backbone.Collection • Базовый класс также реализует полезные методы (get, set, length, push, pop, sort, create, fetch, pluck, where, ...) • Позволяют централизовано работать с несколькими моделями • Можно написать свой comparator
  • 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. Пример коллекции 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. Представления • Главная идея ‑ собрать интерфейс из представлений, связанных с моделью • Реиспользуемый элемент пользовательского интерфейса • Не содержит вёрстку документа • Часто ассоциирован с моделью • Создается посредством наследования базового класса Backbone.View
  • 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. Пример представления • 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. Пример шаблонизатора 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. Маршрутизация (Router) • До версии 0.5 назывался Controller ;) • Мэпит ссылки (URL) на функции в js – Адресация в веб‑приложении – Работа с историей в браузере • на низком уровне: hashchange или HTML5 pushState • После того как создали все роутеры нужно скомандовать startBackbone.history.start, чтобы история начала вестись
  • 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. Зачем нужен? • Придать структуру клиентскому коду • Упростить CRUD данных с сервера (персистентность) • Синхронизация объектов на сервере, js и DOM • Уменьшить рост количества кода на – Модели – Представления – Маршрутизацию • Что‑то ещё (я не всё про него знаю)
  • 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. Где почитать? • Официальная документация (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. Альтернативы • Knockout (http://knockoutjs.com/) • Ember.js (http://emberjs.com/) • AngularJS (http://angularjs.org/) • SpineJS (http://spinejs.com/docs/index) – Очень любопытный аналог – Написан на coffee‑script (http://coffeescript.org/)