Backbonejs Full Stack

1,744 views

Published on

Published in: Technology, Business
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
1,744
On SlideShare
0
From Embeds
0
Number of Embeds
215
Actions
Shares
0
Downloads
38
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Backbonejs Full Stack

  1. 1. BACKBONEJSFULL STACKArtyom Trityakсуббота, 1 июня 13 г.
  2. 2. суббота, 1 июня 13 г.
  3. 3. суббота, 1 июня 13 г.
  4. 4. суббота, 1 июня 13 г.
  5. 5. ✓ AMDWhy?суббота, 1 июня 13 г.
  6. 6. ✓ AMD✓ DependencymanagementWhy?суббота, 1 июня 13 г.
  7. 7. ✓ AMD✓ Dependencymanagement✓ CDN, JSONP, JSAPI (FB SDK)Why?суббота, 1 июня 13 г.
  8. 8. ✓ AMD✓ Dependencymanagement✓ CDN, JSONP, JSAPI (FB SDK)✓ UnitTesting andrefactoringWhy?суббота, 1 июня 13 г.
  9. 9. ✓ AMD✓ Dependencymanagement✓ CDN, JSONP, JSAPI (FB SDK)✓ UnitTesting andrefactoring✓ CommonJSWhy?суббота, 1 июня 13 г.
  10. 10. ✓ AMD✓ Dependencymanagement✓ CDN, JSONP, JSAPI (FB SDK)✓ UnitTesting andrefactoring✓ CommonJS✓ PackagesWhy?суббота, 1 июня 13 г.
  11. 11. суббота, 1 июня 13 г.
  12. 12. M V *just componentsсуббота, 1 июня 13 г.
  13. 13. M V *Collectionсуббота, 1 июня 13 г.
  14. 14. M V *Collection Routerсуббота, 1 июня 13 г.
  15. 15. M V *Collection RouterEventsсуббота, 1 июня 13 г.
  16. 16. Eventsсуббота, 1 июня 13 г.
  17. 17. Eventson object.on(event, callback, [context]) // localtrigger object.trigger(event, [*args])off object.off([event], [callback], [context])суббота, 1 июня 13 г.
  18. 18. EventslistenToobject.listenTo(otherObj, event, callback)stopListeningobject.stopListening([otherObj], [event], [callback])✓ Auto called in View.remove✓Should be called in Models and Collectionsсуббота, 1 июня 13 г.
  19. 19. Eventsonceobject.once(event, callback, [context])listenToOnceobject.listenToOnce(otherObj, event, callback)суббота, 1 июня 13 г.
  20. 20. Viewсуббота, 1 июня 13 г.
  21. 21. View✓ tagName (‘div’, ‘ul’)✓ attributes (hash)✓ className (‘my-cls cls2’)Wrap containerсуббота, 1 июня 13 г.
  22. 22. View✓ Insert template in DOM✓ Bind events from `Events` attrs✓ note: No logic✓ note: this.$(‘.cls’) - local scope✓ note: Auto stopListening onremove()суббота, 1 июня 13 г.
  23. 23. No 2-waybinding?суббота, 1 июня 13 г.
  24. 24. Sorry,Backbone doesnot have itсуббота, 1 июня 13 г.
  25. 25. Rivets.jshttps://github.com/mikeric/rivetsTake what you need and buildyour app from small piecesсуббота, 1 июня 13 г.
  26. 26. Rivets.js✓ simple✓lightweight 2.3KB✓ 1-way binding✓ 2-way binding✓ formatters✓ customizationсуббота, 1 июня 13 г.
  27. 27. Rivets.jsсуббота, 1 июня 13 г.
  28. 28. Modelсуббота, 1 июня 13 г.
  29. 29. Model✓ set✓ get✓ unset✓new in 0.9.10суббота, 1 июня 13 г.
  30. 30. Model✓ defaults✓ changedAttributes✓ previousAttributesсуббота, 1 июня 13 г.
  31. 31. Model✓ fetch✓ destroyсуббота, 1 июня 13 г.
  32. 32. Model✓ patch sends onlypassed✓ events: change,request, sync✓validation on save✓ {silent: true}saveсуббота, 1 июня 13 г.
  33. 33. ModelModel .sync() Backbone.sync().parse() POSTPUT.error().success()суббота, 1 июня 13 г.
  34. 34. Modelno validation :(validationсуббота, 1 июня 13 г.
  35. 35. Backbone.Validationpluginhttps://github.com/thedersen/backbone.validationсуббота, 1 июня 13 г.
  36. 36. Backbone.Validation✓ lot of built-invalidators✓ declarative✓ simple✓ event basedсуббота, 1 июня 13 г.
  37. 37. Collectionсуббота, 1 июня 13 г.
  38. 38. Collection✓ just list of models✓ .fetch / .create✓ .add / .remove✓ .set (update) / .get✓ model.url = c.baseUrl + /m.idсуббота, 1 июня 13 г.
  39. 39. CollectionCreate new from hash or modelсуббота, 1 июня 13 г.
  40. 40. Routerсуббота, 1 июня 13 г.
  41. 41. Router✓ listening url / hash changes✓ pushState: true/false✓ navigate to page✓ add custom routesсуббота, 1 июня 13 г.
  42. 42. RouterSimple Router looks likeсуббота, 1 июня 13 г.
  43. 43. Routeror looks likeсуббота, 1 июня 13 г.
  44. 44. What next?суббота, 1 июня 13 г.
  45. 45. Take BackboneJSсуббота, 1 июня 13 г.
  46. 46. Take BackboneJSStart developmentсуббота, 1 июня 13 г.
  47. 47. Take BackboneJSStart developmentUnderstand you need moreсуббота, 1 июня 13 г.
  48. 48. What missed✓ application structure✓ memory management✓ controllers✓ main application✓ default Collection Viewсуббота, 1 июня 13 г.
  49. 49. ChaplinJShttps://github.com/chaplinjs/chaplinсуббота, 1 июня 13 г.
  50. 50. ChaplinJSRoute DispatchComposeCleanupLoad controllerc.Actionсуббота, 1 июня 13 г.
  51. 51. ChaplinJSmemory management✓ composer✓ controllerсуббота, 1 июня 13 г.
  52. 52. ChaplinJSView✓ autoRender✓ listen pub/sub✓ render / attach✓ container✓ subviewsсуббота, 1 июня 13 г.
  53. 53. ChaplinJSRegionsсуббота, 1 июня 13 г.
  54. 54. ChaplinJSCollectionViewсуббота, 1 июня 13 г.
  55. 55. Marionettehttps://github.com/marionettejs/backbone.marionetteсуббота, 1 июня 13 г.
  56. 56. MarionetteRoute c.ActionCustom prev Viewdispose codeInsert new Viewin RegionDisposeprev Viewсуббота, 1 июня 13 г.
  57. 57. MarionetteItemView✓ render func✓ bind model /collection✓ event basedmethodsсуббота, 1 июня 13 г.
  58. 58. MarionetteRegionsсуббота, 1 июня 13 г.
  59. 59. MarionetteLayout of regionsсуббота, 1 июня 13 г.
  60. 60. MarionetteApp Routerсуббота, 1 июня 13 г.
  61. 61. суббота, 1 июня 13 г.

×