1. BACKBONEJS
FULL STACK
Artyom Trityak
суббота, 1 июня 13 г.

2. суббота, 1 июня 13 г.

3. суббота, 1 июня 13 г.

4. суббота, 1 июня 13 г.

5. ✓ AMD
Why?
суббота, 1 июня 13 г.

6. ✓ AMD
✓ Dependency
management
Why?
суббота, 1 июня 13 г.

7. ✓ AMD
✓ Dependency
management
✓ CDN, JSONP, JS
API (FB SDK)
Why?
суббота, 1 июня 13 г.

8. ✓ AMD
✓ Dependency
management
✓ CDN, JSONP, JS
API (FB SDK)
✓ UnitTesting and
refactoring
Why?
суббота, 1 июня 13 г.

9. ✓ AMD
✓ Dependency
management
✓ CDN, JSONP, JS
API (FB SDK)
✓ UnitTesting and
refactoring
✓ CommonJS
Why?
суббота, 1 июня 13 г.

10. ✓ AMD
✓ Dependency
management
✓ CDN, JSONP, JS
API (FB SDK)
✓ UnitTesting and
refactoring
✓ CommonJS
✓ Packages
Why?
суббота, 1 июня 13 г.

11. суббота, 1 июня 13 г.

12. M V *
just components
суббота, 1 июня 13 г.

13. M V *
Collection
суббота, 1 июня 13 г.

14. M V *
Collection Router
суббота, 1 июня 13 г.

15. M V *
Collection Router
Events
суббота, 1 июня 13 г.

16. Events
суббота, 1 июня 13 г.

17. Events
on object.on(event, callback, [context]) // local
trigger object.trigger(event, [*args])
off object.off([event], [callback], [context])
суббота, 1 июня 13 г.

18. Events
listenTo
object.listenTo(otherObj, event, callback)
stopListening
object.stopListening([otherObj], [event], [callback])
✓ Auto called in View.remove
✓Should be called in Models and Collections
суббота, 1 июня 13 г.

19. Events
once
object.once(event, callback, [context])
listenToOnce
object.listenToOnce(otherObj, event, callback)
суббота, 1 июня 13 г.

20. View
суббота, 1 июня 13 г.

21. View
✓ tagName (‘div’, ‘ul’)
✓ attributes (hash)
✓ className (‘my-cls cls2’)
Wrap container
суббота, 1 июня 13 г.

22. View
✓ Insert template in DOM
✓ Bind events from `Events` attrs
✓ note: No logic
✓ note: this.$(‘.cls’) - local scope
✓ note: Auto stopListening on
remove()
суббота, 1 июня 13 г.

23. No 2-way
binding?
суббота, 1 июня 13 г.

24. Sorry,
Backbone does
not have it
суббота, 1 июня 13 г.

25. Rivets.js
https://github.com/mikeric/
rivets
Take what you need and build
your app from small pieces
суббота, 1 июня 13 г.

26. Rivets.js
✓ simple
✓lightweight 2.3KB
✓ 1-way binding
✓ 2-way binding
✓ formatters
✓ customization
суббота, 1 июня 13 г.

27. Rivets.js
суббота, 1 июня 13 г.

28. Model
суббота, 1 июня 13 г.

29. Model
✓ set
✓ get
✓ unset
✓new in 0.9.10
суббота, 1 июня 13 г.

30. Model
✓ defaults
✓ changedAttributes
✓ previousAttributes
суббота, 1 июня 13 г.

31. Model
✓ fetch
✓ destroy
суббота, 1 июня 13 г.

32. Model
✓ patch sends only
passed
✓ events: change,
request, sync
✓validation on save
✓ {silent: true}
save
суббота, 1 июня 13 г.

33. Model
Model .sync() Backbone.sync()
.parse() POSTPUT
.error()
.success()
суббота, 1 июня 13 г.

34. Model
no validation :(
validation
суббота, 1 июня 13 г.

35. Backbone.Validation
plugin
https://github.com/thedersen/
backbone.validation
суббота, 1 июня 13 г.

36. Backbone.Validation
✓ lot of built-in
validators
✓ declarative
✓ simple
✓ event based
суббота, 1 июня 13 г.

37. Collection
суббота, 1 июня 13 г.

38. Collection
✓ just list of models
✓ .fetch / .create
✓ .add / .remove
✓ .set (update) / .get
✓ model.url = c.baseUrl + /m.id
суббота, 1 июня 13 г.

39. Collection
Create new from hash or model
суббота, 1 июня 13 г.

40. Router
суббота, 1 июня 13 г.

41. Router
✓ listening url / hash changes
✓ pushState: true/false
✓ navigate to page
✓ add custom routes
суббота, 1 июня 13 г.

42. Router
Simple Router looks like
суббота, 1 июня 13 г.

43. Router
or looks like
суббота, 1 июня 13 г.

44. What next?
суббота, 1 июня 13 г.

45. Take BackboneJS
суббота, 1 июня 13 г.

46. Take BackboneJS
Start development
суббота, 1 июня 13 г.

47. Take BackboneJS
Start development
Understand you need more
суббота, 1 июня 13 г.

48. What missed
✓ application structure
✓ memory management
✓ controllers
✓ main application
✓ default Collection View
суббота, 1 июня 13 г.

49. ChaplinJS
https://github.com/chaplinjs/
chaplin
суббота, 1 июня 13 г.

50. ChaplinJS
Route Dispatch
ComposeCleanup
Load controller
c.Action
суббота, 1 июня 13 г.

51. ChaplinJS
memory management
✓ composer
✓ controller
суббота, 1 июня 13 г.

52. ChaplinJS
View
✓ autoRender
✓ listen pub/sub
✓ render / attach
✓ container
✓ subviews
суббота, 1 июня 13 г.

53. ChaplinJS
Regions
суббота, 1 июня 13 г.

54. ChaplinJS
CollectionView
суббота, 1 июня 13 г.

55. Marionette
https://github.com/marionettejs/
backbone.marionette
суббота, 1 июня 13 г.

56. Marionette
Route c.Action
Custom prev View
dispose code
Insert new View
in Region
Dispose
prev View
суббота, 1 июня 13 г.

57. Marionette
ItemView
✓ render func
✓ bind model /
collection
✓ event based
methods
суббота, 1 июня 13 г.

58. Marionette
Regions
суббота, 1 июня 13 г.

59. Marionette
Layout of regions
суббота, 1 июня 13 г.

60. Marionette
App Router
суббота, 1 июня 13 г.

61. суббота, 1 июня 13 г.