Building Backbone.js

8/10/2019 Building Backbone.js

1/23

Building Javascript Applications

WithBackbone.js

Ken Harris Sr. Developer, elkonet.co!

"arch #$, %%


2/23

rends in Web Apps

'atter (lients

"ore Javascript

"ore (SS

"ore co!ple)

(an turn into a !ess

*eeds structure


3/23

Backbone.js

"+( 'ra!eork -or client side Javascript

rgani/e and si!pli-0 JS application

1ighteight onl0 2kb !ini-ied

Beco!ing popular


4/23

Sites using Backbone.js

1inked3n "obile

'ours4uare

Do

5osterous

6roupon *o7

Baseca!p "obile

Diaspora

Blosso!

8uote 9oller

Salon.io

5andora

Bit orrent


5/23

9e4uire!ents

:nderscore.js support librar0

;speciall0 -or collections

J4uer0 or


6/23

Booklist ;)a!ple


7/23

Booklist ;)a!ple


8/23

"+( Design 5attern

"odel=+ie=(ontroller

(o!es -ro! S!alltalk=>&

5opular pattern -or server -ra!eorks

"odel ? data

+ie ? user displa0

(ontroller ? 6lue, accepts user interaction,inter-aces ith !odels @ dispatches vies

Divide and con4uer strateg0


9/23

Backbone.;vents

"i)in !odule can be added to an0 object

Bind, trigger, and unbind

;vents are strings eg. changeC

rigger can pass argu!ents

(hanges to data !odels can trigger auto!aticre-resh o- vies


10/23

Backbone.;vents

+ar object ? EFG

.e)tendobject, Backbone.;ventsG

object.bindpokeC, -unction!sg EalertJust got pokedI !sgG FG

object.triggerpokeC, hello...CG


11/23

Backbone."odel

Heart o- the application

Data logic conversions, validations,

co!puted properties, access control, (reate ne !odel class b0 e)tending

Backbone."odel

(reate instance -ro! class ith ne


12/23

Backbone."odel

Book ? Backbone."odel.e)tendEinitiali/eI -unction E LL do so!ething

F,de-aultsI E loc I MM, title I MM, author I MMF,url9ootI MLphpde!oLdb.phpLM

FG

Book ? ne BookG


13/23

Backbone."odel

5roperties

!odel.id uni4ue server id

!odel.cid client id

!odel.de-aults de-ault attribute values "ethods

3nitiali/e = called on creation

getattribute = getter setattributes = setter

validate = validation


14/23

Backbone."odel

"ore !ethods

-etch

save

destro0

toJS*

;vents

change, destro0, error change event can be bound to render a vie


15/23

Server 3nteraction

"akes 9;S-ul calls to server

(9:D create,read,update,delete

(reate N 5S serverLcollectionLid

9ead N 6; serverL!odelLid

:pdate N 5:

Delete N D;1;; Data passed using JS* encoding


16/23

Backbone.(ollection

rdered set o- !odels

(an listen -or events on an0 !odel

(reate b0 e)tending Backbone.(ollection

(rate an instance using ne


17/23

Backbone.(ollection

Booklist ? Backbone.(ollection.e)tendE !odel I Book,

url I MLphpde!oLdb.phpM FG

booklist ? ne BooklistG


18/23

Backbone.(ollection

"ethods add

re!ove

getid getB0(idcid

(o!parator ordering -unction

:ses underscore.js -or iteration !ethods


19/23

Backbone.+ie

(ontrol piece that renders a vie

;)tend Backbone.+ie to create class

:se ne to create an instance

+ie.el associated D" ele!ent

initiali/e -unction

render -unction Oselector locall0 scoped j8uer0


20/23

Backbone.+ie


21/23

Backbone.9outer

9oute client side pages and connect the! toactions and events

3nter-aces ith hashchange events

9eacts to histor0 navigation *eed to be aare o- possible server

interactions


22/23

Backbone.9outer


23/23

9e-erences

Javascript Web Applications, Ale) "ac(a,M9eill0 %#

httpILLdocu!entcloud.github.co!LbackboneL

Backbone.js :nderscore.js

odos de!o

Ken harris harrisPitech=!ke.co!

PharrisQ
http://documentcloud.github.com/backbone/mailto:[email protected]:[email protected]://documentcloud.github.com/backbone/

Building Backbone.js

Documents

Transcript of Building Backbone.js