backbonejs full stack

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 г.

ChaplinJSRegions

суббота, 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 г.