building backbone.js
TRANSCRIPT
-
8/10/2019 Building Backbone.js
1/23
Building Javascript Applications
WithBackbone.js
Ken Harris Sr. Developer, elkonet.co!
"arch #$, %%
-
8/10/2019 Building Backbone.js
2/23
rends in Web Apps
'atter (lients
"ore Javascript
"ore (SS
"ore co!ple)
(an turn into a !ess
*eeds structure
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
5/23
9e4uire!ents
:nderscore.js support librar0
;speciall0 -or collections
J4uer0 or
-
8/10/2019 Building Backbone.js
6/23
Booklist ;)a!ple
-
8/10/2019 Building Backbone.js
7/23
Booklist ;)a!ple
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
10/23
Backbone.;vents
+ar object ? EFG
.e)tendobject, Backbone.;ventsG
object.bindpokeC, -unction!sg EalertJust got pokedI !sgG FG
object.triggerpokeC, hello...CG
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
14/23
Backbone."odel
"ore !ethods
-etch
save
destro0
toJS*
;vents
change, destro0, error change event can be bound to render a vie
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
17/23
Backbone.(ollection
Booklist ? Backbone.(ollection.e)tendE !odel I Book,
url I MLphpde!oLdb.phpM FG
booklist ? ne BooklistG
-
8/10/2019 Building Backbone.js
18/23
Backbone.(ollection
"ethods add
re!ove
getid getB0(idcid
(o!parator ordering -unction
:ses underscore.js -or iteration !ethods
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
20/23
Backbone.+ie
-
8/10/2019 Building Backbone.js
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
-
8/10/2019 Building Backbone.js
22/23
Backbone.9outer
-
8/10/2019 Building Backbone.js
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/