backbonejs full stack
DESCRIPTION
TRANSCRIPT
BACKBONEJSFULL STACK
Artyom Trityak
суббота, 1 июня 13 г.
суббота, 1 июня 13 г.
суббота, 1 июня 13 г.
суббота, 1 июня 13 г.
✓ AMD
Why?
суббота, 1 июня 13 г.
✓ AMD✓ Dependency
management
Why?
суббота, 1 июня 13 г.
✓ AMD✓ Dependency
management✓CDN, JSONP, JS
API (FB SDK)
Why?
суббота, 1 июня 13 г.
✓ AMD✓ Dependency
management✓CDN, JSONP, JS
API (FB SDK)✓UnitTesting and
refactoring
Why?
суббота, 1 июня 13 г.
✓ AMD✓ Dependency
management✓CDN, JSONP, JS
API (FB SDK)✓UnitTesting and
refactoring✓ CommonJS
Why?
суббота, 1 июня 13 г.
✓ AMD✓ Dependency
management✓CDN, JSONP, JS
API (FB SDK)✓UnitTesting and
refactoring✓ CommonJS✓ Packages
Why?
суббота, 1 июня 13 г.
суббота, 1 июня 13 г.
M V *
just components
суббота, 1 июня 13 г.
M V *Collection
суббота, 1 июня 13 г.
M V *Collection Router
суббота, 1 июня 13 г.
M V *Collection Router
Eventsсуббота, 1 июня 13 г.
Events
суббота, 1 июня 13 г.
Eventson object.on(event, callback, [context]) // local
trigger object.trigger(event, [*args])off object.off([event], [callback], [context])
суббота, 1 июня 13 г.
EventslistenTo
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 г.
Eventsonce
object.once(event, callback, [context])
listenToOnce object.listenToOnce(otherObj, event, callback)
суббота, 1 июня 13 г.
View
суббота, 1 июня 13 г.
View
✓ tagName (‘div’, ‘ul’)✓ attributes (hash)✓ className (‘my-cls cls2’)
Wrap container
суббота, 1 июня 13 г.
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 г.
No 2-way binding?
суббота, 1 июня 13 г.
Sorry,Backbone does
not have itсуббота, 1 июня 13 г.
Rivets.jshttps://github.com/mikeric/
rivets
Take what you need and build your app from small pieces
суббота, 1 июня 13 г.
Rivets.js✓ simple✓ lightweight 2.3KB✓ 1-way binding✓ 2-way binding✓ formatters✓ customization
суббота, 1 июня 13 г.
Rivets.js
суббота, 1 июня 13 г.
Model
суббота, 1 июня 13 г.
Model✓ set✓ get✓ unset✓new in 0.9.10
суббота, 1 июня 13 г.
Model✓ defaults✓ changedAttributes✓ previousAttributes
суббота, 1 июня 13 г.
Model✓ fetch✓ destroy
суббота, 1 июня 13 г.
Model✓ patch sends only
passed✓ events: change,
request, sync ✓validation on save✓ {silent: true}
save
суббота, 1 июня 13 г.
ModelModel .sync() Backbone.sync()
.parse() POSTPUT
.error()
.success()
суббота, 1 июня 13 г.
Modelno validation :(
validation
суббота, 1 июня 13 г.
Backbone.Validationplugin
https://github.com/thedersen/backbone.validation
суббота, 1 июня 13 г.
Backbone.Validation✓ lot of built-in
validators✓ declarative✓ simple✓ event based
суббота, 1 июня 13 г.
Collection
суббота, 1 июня 13 г.
Collection✓ just list of models✓ .fetch / .create✓ .add / .remove✓ .set (update) / .get✓ model.url = c.baseUrl + /m.id
суббота, 1 июня 13 г.
CollectionCreate new from hash or model
суббота, 1 июня 13 г.
Router
суббота, 1 июня 13 г.
Router✓ listening url / hash changes✓ pushState: true/false✓ navigate to page✓ add custom routes
суббота, 1 июня 13 г.
RouterSimple Router looks like
суббота, 1 июня 13 г.
Routeror looks like
суббота, 1 июня 13 г.
What next?
суббота, 1 июня 13 г.
Take BackboneJS
суббота, 1 июня 13 г.
Take BackboneJS
Start development
суббота, 1 июня 13 г.
Take BackboneJS
Start development
Understand you need more
суббота, 1 июня 13 г.
What missed✓ application structure✓ memory management✓ controllers✓ main application✓ default Collection View
суббота, 1 июня 13 г.
ChaplinJShttps://github.com/chaplinjs/
chaplin
суббота, 1 июня 13 г.
ChaplinJSRoute Dispatch
ComposeCleanup
Load controller
c.Action
суббота, 1 июня 13 г.
ChaplinJSmemory management
✓ composer✓ controller
суббота, 1 июня 13 г.
ChaplinJSView
✓ autoRender✓ listen pub/sub✓ render / attach✓ container✓ subviewsсуббота, 1 июня 13 г.
ChaplinJSCollectionView
CollectionViewсуббота, 1 июня 13 г.
Marionettehttps://github.com/marionettejs/
backbone.marionette
суббота, 1 июня 13 г.
MarionetteRoute c.Action
Custom prev View dispose code
Insert new View in Region
Dispose prev View
суббота, 1 июня 13 г.
MarionetteItemView
✓ render func✓ bind model /
collection✓ event based
methodsсуббота, 1 июня 13 г.
MarionetteRegions
суббота, 1 июня 13 г.
MarionetteLayout of regions
суббота, 1 июня 13 г.
MarionetteApp Router
суббота, 1 июня 13 г.
суббота, 1 июня 13 г.