BACKBONEJS
FULL 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 г.
Events
on object.on(event, callback, [context]) // local
trigger object.trigger(event, [*args])
off object.off([event], [callback], [context])
суббота, 1 июня 13 г.
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 г.
Events
once
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.js
https://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 г.
Model
Model .sync() Backbone.sync()
.parse() POSTPUT
.error()
.success()
суббота, 1 июня 13 г.
Model
no validation :(
validation
суббота, 1 июня 13 г.
Backbone.Validation
plugin
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 г.
Collection
Create 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 г.
Router
Simple Router looks like
суббота, 1 июня 13 г.
Router
or 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 г.
ChaplinJS
https://github.com/chaplinjs/
chaplin
суббота, 1 июня 13 г.
ChaplinJS
Route Dispatch
ComposeCleanup
Load controller
c.Action
суббота, 1 июня 13 г.
ChaplinJS
memory management
✓ composer
✓ controller
суббота, 1 июня 13 г.
ChaplinJS
View
✓ autoRender
✓ listen pub/sub
✓ render / attach
✓ container
✓ subviews
суббота, 1 июня 13 г.
ChaplinJS
Regions
суббота, 1 июня 13 г.
ChaplinJS
CollectionView
суббота, 1 июня 13 г.
Marionette
https://github.com/marionettejs/
backbone.marionette
суббота, 1 июня 13 г.
Marionette
Route c.Action
Custom prev View
dispose code
Insert new View
in Region
Dispose
prev View
суббота, 1 июня 13 г.
Marionette
ItemView
✓ render func
✓ bind model /
collection
✓ event based
methods
суббота, 1 июня 13 г.
Marionette
Regions
суббота, 1 июня 13 г.
Marionette
Layout of regions
суббота, 1 июня 13 г.
Marionette
App Router
суббота, 1 июня 13 г.
суббота, 1 июня 13 г.

Backbonejs Full Stack