Backbone.js        Slava Belokurski            Weavora Team
Почему не JQuery?JQuery хранит данные в DOM<li id="itemId_<?php echo $item->id; ?>">ViewItem Data</li>
Почему не JQuery?JQuery это лапша из callback-ов$.get(url, function(data){   var items = [];   data.each(function(item){  ...
Да, мы к этому привыкли, и это не сложно,но...
Backbone.js придает структуру веб-приложениям с помощью моделей сбиндингами по ключу ипользовательскими событиями,коллекци...
Backbone это не● инструмент управления DOM● штука рисующая анимацию● Фреймворк, навязывающий свой Control  Flow● не всё в ...
Для чего это вообще нужно?Все приложения, рендеринг которыхпроисходит на клиенте
Составляющие1) Router    Router             Model + Collection2) History3) Model4) View                         View      ...
Events● on● off● triggerclass Item extends Backbone.Events   ...item.on "alert", callbackitem.trigger "alert", args
Routerclass Controller extends Backbone.Router          routes:                 "" : "index"                 "!/": "index"...
А как же индексация?
History          Backbone.history.start()
Model●   Представление данных●   Генерация событий●   Общение с сервером●   Повторное использование
Model (use Backbone.Sync)  Rest  Fetch       ->   HTTP   GET      /url/id  Save(new)   ->   HTTP   POST     /url  Save    ...
Model    class Post extends Backbone.Model       urlRoot : /post       idAttribute: _id
Model        post = new Post()        post.set title : "post title"        post.save() #trigger sync
Collectionclass PostCollection extends Backbone.Collection   model: Post   url: /postposts = new PostCollection()posts.fet...
Collection  поддерживает все методы Uderscore.js
Viewclass ColorBoxView extends Backbone.View   tagName: li   initialize: ->        @template = $(#color-box-template).temp...
В результате● Больший уровень абстракции● Разделение UI и Данных● Избавляемся от колбэков
В результате● RESTful service based data layer● Events позволяют всё время поддерживать  данные и views в актуальном виде●...
Зависимости● Underscore● JQuery or Zepto● Json2.js
Примерыиспользования
DocumentCloud
LinkedIn Mobile
Foursquare
Basecamp Mobile
Короче круть! ®
Intro to Backbone.js
Upcoming SlideShare
Loading in …5
×

Intro to Backbone.js

540
-1

Published on

Internal presentation about Backbone.js

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Intro to Backbone.js

  1. 1. Backbone.js Slava Belokurski Weavora Team
  2. 2. Почему не JQuery?JQuery хранит данные в DOM<li id="itemId_<?php echo $item->id; ?>">ViewItem Data</li>
  3. 3. Почему не 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.... });});
  4. 4. Да, мы к этому привыкли, и это не сложно,но...
  5. 5. Backbone.js придает структуру веб-приложениям с помощью моделей сбиндингами по ключу ипользовательскими событиями,коллекций с богатым набором методовс перечислимыми сущностями,представленийс декларативнойобработкой событий; и соединяет этовсе с вашим существующим REST-овымJSON API.
  6. 6. Backbone это не● инструмент управления DOM● штука рисующая анимацию● Фреймворк, навязывающий свой Control Flow● не всё в одном
  7. 7. Для чего это вообще нужно?Все приложения, рендеринг которыхпроисходит на клиенте
  8. 8. Составляющие1) Router Router Model + Collection2) History3) Model4) View View Browser
  9. 9. Events● on● off● triggerclass Item extends Backbone.Events ...item.on "alert", callbackitem.trigger "alert", args
  10. 10. 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: id Views.postPage.setModel post post.fetch()
  11. 11. А как же индексация?
  12. 12. History Backbone.history.start()
  13. 13. Model● Представление данных● Генерация событий● Общение с сервером● Повторное использование
  14. 14. Model (use Backbone.Sync) Rest Fetch -> HTTP GET /url/id Save(new) -> HTTP POST /url Save -> HTTP PUT /url/id Delete -> HTTP DELETE /url/id
  15. 15. Model class Post extends Backbone.Model urlRoot : /post idAttribute: _id
  16. 16. Model post = new Post() post.set title : "post title" post.save() #trigger sync
  17. 17. Collectionclass PostCollection extends Backbone.Collection model: Post url: /postposts = new PostCollection()posts.fetch()
  18. 18. Collection поддерживает все методы Uderscore.js
  19. 19. Viewclass 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 @
  20. 20. В результате● Больший уровень абстракции● Разделение UI и Данных● Избавляемся от колбэков
  21. 21. В результате● RESTful service based data layer● Events позволяют всё время поддерживать данные и views в актуальном виде● Просто использовать Template движки● Хорошая система роутингаВсё это обернуто в легковесный JS framework
  22. 22. Зависимости● Underscore● JQuery or Zepto● Json2.js
  23. 23. Примерыиспользования
  24. 24. DocumentCloud
  25. 25. LinkedIn Mobile
  26. 26. Foursquare
  27. 27. Basecamp Mobile
  28. 28. Короче круть! ®

×