A Backbone.js Tutorial for the Impatient Part 1: How to Get Your Hands Dirty with Backbone.js in 5 Minutes Hint: Download the slides for "copy&paste"!

1. 3.7.2012 ( : 20.3.2012)
A Backbone.js Tutorial for the
Impatient
Part 1: How to Get Your Hands Dirt with
Backbone.js in 5 Minutes
B : Jaakko Salonen (@jsalonen)
I :M C A &S C .S .
P QuickSlides <https://github.com/airport h/QuickSlides>

2. Prerequisites
R :
D ' ,
Node.js
U -
G :// . /
Git
U .
G :// - . /
D ?N '

3. Creating our project
W B
( ' )
I
C :
gtcoehts/gtu.o/baynbcbn-olrlt.i mpoet
i ln tp:/ihbcmtrne/akoebiepaegt yrjc
c mpoet
d yrjc
nd bidsre
oe ul evr
D .i
gt
O :8000
IT'S ALIVE

4. Routers
L ' :
I R apmdlseapej:
p/oue/ ml.s
EapeRue =Bcbn.otretn(
xml.otr akoeRue.xed{
rue:{
ots
":"ne"
" idx
,
idx fnto( {
ne: ucin)
$'mi'.tl'h>el Wrd/1';
(#an)hm(<1Hlo ol<h>)
);
H p/anj:
apmi.s
iiilz:fnto( {
ntaie ucin)
ti.xmlRue =nwEapeRue(;
hseapeotr e xml.otr)
,
Building and validating
B :
nd bid
oe ul
I , tot ros.
Dn, ihu err.
oe
S :
nd bidsre
oe ul evr
C .R
.

5. Views
I DOM, '
.
M apmdlseapej (
p/oue/ ml.s i d ):
ne
idx fnto( {
ne: ucin)
vridx=nwEapeVesIdx)
a ne e xml.iw.ne(;
idxrne(;
ne.edr)
EapeVesIdx=Bcbn.iwetn(
xml.iw.ne akoeVe.xed{
e:'mi'
l #an,
tmlt:"p/epae/ne.tl,
epae aptmltsidxhm"
rne:fnto( {
edr ucin)
vrve =ti;
a iw hs
nmsaefthepaeti.epae fnto(ml {
aepc.ecTmlt(hstmlt, ucintp)
ve.linrTL=tp(nm:'ol')
iwe.neHM ml{ae wrd ;
);
);
aptmltsid .tl
p/epae/ne hm
<1Hlo<=nm % fo aptmlt/ne.tl<h>
h>el % ae > rm p/epaeidxhm!/1
N ( ' )

6. Refactoring to Support Multiple
Pages (1/2)
A W
apmdlseapej:
p/oue/ ml.s
EapeWbae=Bcbn.oe.xed{
xml.epg akoeMdletn(
dfut:{
eals
tte 'nild,
il: Utte'
cnet 'ocnet
otn: N otn'
);
A :
"pgi" "ne"
:aed: idx
A id
ne :
idx fnto(aed {
ne: ucinpgi)
i(aed==udfnd {
fpgi = neie)
pgi =1
aed ;
vridx=nwEapeVesIdx)
a ne e xml.iw.ne(;
idxmdl=nwEapeWbae{i' pgi )
ne.oe e xml.epg('d: aed ;
idxrne(;
ne.edr)
( ...)

7. Refactoring to Support Multiple
Pages (2/2)
P W rne (
edr
apmdlseapej)
p/oue/ ml.s
ve.linrTL=tp(iwmdltJO()
iwe.neHM mlve.oe.oSN);
A p/epae/ne hm:
aptmltsid .tl
<1HloPg #% i %!/1
h>el ae <= d ><h>
D !T URLS :
:// :8000/
:// :8000/1
:// :8000/#99

8. Managing Models with a
Collection
A (
a p m d l s e a p e j ):
p/oue/ ml.s
EapeWbae =Bcbn.olcinetn(
xml.epgs akoeCleto.xed{
mdl EapeWbae
oe: xml.epg,
/lcltrg:nwwno.tr(Wbae" / cmetfrnw
/oaSoae e idwSoe"epgs) / omn o o
);
R id
ne R ( ):
i(aed==udfnd {
fpgi = neie)
pgi =1
aed ;
vrwbae =nwEapeWbae(;
a epgs e xml.epgs)
/wbae.ec(;/ cmetfrnw
/epgsfth) / omn o o
vrti_ae=wbae.e(aed;
a hspg epgsgtpgi)
i(ti_ae==udfnd){
f hspg = neie
ti_ae=nwEapeWbae{d pgi )
hspg e xml.epg(i: aed ;
wbae.d(hspg)
epgsadti_ae;
/ti_aesv(;/ cmetfrnw
/hspg.ae) / omn o o
vridx=nwEapeVesIdx)
a ne e xml.iw.ne(;
idxmdl=ti_ae
ne.oe hspg;
idxrne(;
ne.edr)
T ( )

9. Persisting Models with HTML5
localStorage
G bcbn.oaSoaej
akoelcltrg.s
. / /B . S :
S
ast/slb/akoelcltrg.s
sesj/isbcbn.oaSoaej
A c n i . s(
ofgj bcbn
akoe
):
"akoelcltrg" ".ast/slb/akoelcltrg"
bcbn.oaSoae: ./sesj/isbcbn.oaSoae,
..
.
bcbn.oaSoae {
akoelcltrg:
dp:[uebcbn" "s!nesoe]
es "s!akoe, ueudrcr",
atc:"akoe
tah Bcbn"
,
apmdlseapej
p/oue/ ml.s dfn (
eie
u e b c b n " ):
"s!akoe,
"s!akoelcltrg"
uebcbn.oaSoae
Uncomment lines from previous slide
B S
.R . . F :
cnoedrlcltrg)
osl.i(oaSoae;

10. Adding Flesh - Edit Content
N ( ),
.
aptmltsid .tl
p/epae/ne hm
<1cas"aette>% tte% (<=i %)/1
h ls=pg-il"<= il > #% d ><h>
<i cas"aecnet>
dv ls=pg-otn"
<i cas"dtrhde"
dv ls=eio idn>
<>txae rw=2"cl=8"<txae>/>
p<etra os"5 os"0>/etra<p
<>ipttp=sbi"vle"ae>/nu>/>
p<nu ye"umt au=Sv"<ipt<p
<dv
/i>
<i cas"edrd>% cnet%<dv
dv ls=rnee"<= otn >/i>
<dv
/i>
apmdlseapej
p/oue/ ml.s
EapeVesId :
ml.i .ne
eet:{
vns
"lc .aecnet.edrd:"dtotn"
cik pg-otn rnee" eiCnet
,
eiCnet fnto( {
dtotn: ucin)
vrcnet=ti.oe.e(cnet)
a otn hsmdlgt'otn';
$'pg-otn .edrd)hd(;
(.aecnet rnee'.ie)
$'pg-otn .dtr)rmvCas'idn)
(.aecnet eio'.eoels(hde';
$'pg-otn .dtrtxae'.tlcnet;
(.aecnet eio etra)hm(otn)
,

11. Adding Flesh - Save Edited
Content
apmdlseapej
p/oue/ ml.s
eet:{
vns
..
.
"lc .aecnet.dtripttp=sbi'" "aeotn"
cik pg-otn eio nu[ye'umt]: svCnet
,
..
.
svCnet fnto( {
aeotn: ucin)
vrcnet=$'pg-otn .dtrtxae'.a(;
a otn (.aecnet eio etra)vl)
ti.oe.e(cnet,cnet;
hsmdlst'otn' otn)
ti.oe.ae)
hsmdlsv(;
$'pg-otn .dtr)adls(hde';
(.aecnet eio'.dCas'idn)
$'pg-otn .dtrtxae'.tl')
(.aecnet eio etra)hm(';
$'pg-otn .edrd)rmvCas'idn)
(.aecnet rnee'.eoels(hde';
ti.edr)
hsrne(;

12. E e Cand - Markdown
Renderer Hook-up (1/2)
L ' . ( J S M
)
G (
. / s t / s l b / h d n j ):
.aesj/isso o .s
hts/gtu.o/ihbgtu-lvrdmrdw/lbg-ae/cit/hw
tp:/ihbcmgtu/ihbfaoe-akonbo/hpgssrpsso
apcni.s
p/ofgj
sodw:".ast/slb/hwon,
hwon ./sesj/issodw"
ue {
s:
..
.
sodw:{
hwon
atc:"hwon
tah Sodw"

13. E e Cand - Markdown
Renderer Hook-up (2/2)
apmdlseapej
p/oue/ ml.s
"s!akoe,
uebcbn"
"s!hwon
uesodw"
..
.
fnto(aepc,Bcbn,Sodw){
ucinnmsae akoe hwon
N :
aptmltsid .tl
p/epae/ne hm
<i cas"edrd>
dv ls=rnee"
< vrcnetr=nwSodw.ovre(;%
% a ovre e hwoncnetr) >
<=cnetrmkHm(otn)%
% ovre.aetlcnet >
<dv
/i>

14. Building for production
R ( ):
nd bid
oe ul
C .F , :
nd bid-hl
oe ul -ep
B :
nd bidrlae
oe ul ees
R :
nd bidsre:ees
oe ul evrrlae
YSlow gives us Grade A (overall performance score 94)

15. See ou in Part 2
Thank ou!
J S
U e i e (@j a e )f e i (f e
ecei e da e !)