intro to backbone.js
DESCRIPTION
Internal presentation about Backbone.jsTRANSCRIPT
![Page 1: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/1.jpg)
Backbone.js
Slava BelokurskiWeavora Team
![Page 2: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/2.jpg)
Почему не JQuery?
JQuery хранит данные в DOM <li id="itemId_<?php echo $item->id; ?>">View Item Data</li>
![Page 3: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/3.jpg)
Почему не JQuery?
JQuery это лапша из callback-ов $.get(url, function(data){
var items = [];data.each(function(item){
items.push("<li id="itemId"+item.id+>view</li>");});$("li").on('click', function(){
//and more more more....});
});
![Page 4: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/4.jpg)
Да, мы к этому привыкли, и это не сложно, но...
![Page 5: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/5.jpg)
Backbone.js придает структуру веб-приложениям с помощью моделей с биндингами по ключу и пользовательскими событиями, коллекций с богатым набором методов с перечислимыми сущностями, представленийс декларативной обработкой событий; и соединяет это все с вашим существующим REST-овым JSON API.
![Page 6: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/6.jpg)
Backbone это не
● инструмент управления DOM● штука рисующая анимацию● Фреймворк, навязывающий свой Control
Flow● не всё в одном
![Page 7: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/7.jpg)
Для чего это вообще нужно?
Все приложения, рендеринг которых происходит на клиенте
![Page 8: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/8.jpg)
Составляющие
1) Router2) History3) Model4) View
View
Router Model + Collection
Browser
![Page 9: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/9.jpg)
Events
● on● off● trigger class Item extends Backbone.Events
... item.on "alert", callbackitem.trigger "alert", args
![Page 10: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/10.jpg)
Routerclass Controller extends Backbone.Router
routes:"" : "index""!/": "index""!/news": "news""!/music": "music""!/post/:id": "showPost"
index: ->
Views.page.render() if Views.page?
news: ->console.log "news"
music: ->
console.log "music"
showPost: (id)->if Views.postPage?
post = new Post _id: idViews.postPage.setModel postpost.fetch()
![Page 11: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/11.jpg)
А как же индексация?
![Page 12: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/12.jpg)
History
Backbone.history.start()
![Page 13: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/13.jpg)
Model
● Представление данных● Генерация событий● Общение с сервером● Повторное использование
![Page 14: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/14.jpg)
Model (use Backbone.Sync)
Rest Fetch -> HTTP GET /url/idSave(new) -> HTTP POST /urlSave -> HTTP PUT /url/idDelete -> HTTP DELETE /url/id
![Page 15: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/15.jpg)
class Post extends Backbone.ModelurlRoot : '/post'idAttribute: '_id'
Model
![Page 16: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/16.jpg)
Model
post = new Post()post.set title : "post title"post.save() #trigger sync
![Page 17: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/17.jpg)
Collectionclass PostCollection extends Backbone.Collection
model: Posturl: '/post'
posts = new PostCollection()posts.fetch()
![Page 18: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/18.jpg)
Collection
поддерживает все методы Uderscore.js
![Page 19: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/19.jpg)
View
class ColorBoxView extends Backbone.View tagName: 'li' initialize: -> @template = $('#color-box-template').template() @model.bind 'change', @render @model.view = @
render: => $(@el).html $.tmpl @template, @model.toJSON() return @
![Page 20: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/20.jpg)
В результате
● Больший уровень абстракции● Разделение UI и Данных● Избавляемся от колбэков
![Page 21: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/21.jpg)
В результате
● RESTful service based data layer● Events позволяют всё время поддерживать
данные и views в актуальном виде● Просто использовать Template движки● Хорошая система роутинга Всё это обернуто в легковесный JS framework
![Page 22: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/22.jpg)
Зависимости
● Underscore● JQuery or Zepto● Json2.js
![Page 23: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/23.jpg)
Примеры использования
![Page 24: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/24.jpg)
![Page 25: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/25.jpg)
DocumentCloud
![Page 26: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/26.jpg)
LinkedIn Mobile
![Page 27: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/27.jpg)
Foursquare
![Page 28: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/28.jpg)
Basecamp Mobile
![Page 29: Intro to Backbone.js](https://reader034.vdocuments.site/reader034/viewer/2022042601/54742436b4af9fc30a8b5566/html5/thumbnails/29.jpg)
Короче круть! ®