A Backbone.js Tutorial for the Impatient - Part 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>

Prerequisites
R :

D ' ,

Node.js

U -

G :// . /

Git

U .
G :// - . /

D ?N '

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

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
.

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 ( ' )

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)

( ...)

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

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 ( )

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;

Adding Flesh - Edit Content
N ( ),
.

aptmltsid .tl
p/epae/ne hm

<1cas"aette>% tte% (<=i %)/1
h ls=pg-il"<= il > #% d ><h>

dv ls=pg-otn"

<>txae rw=2"cl=8"<txae>/>
p<etra os"5 os"0>/etraipttp=sbi"vle"ae>/nu>/>
p<nu ye"umt au=Sv"<ipt
% 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)
,

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(;

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"

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


dv ls=rnee"
< vrcnetr=nwSodw.ovre(;%
% a ovre e hwoncnetr) >
<=cnetrmkHm(otn)%
% ovre.aetlcnet >
<dv
/i>

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)

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 !)

A Backbone.js Tutorial for the Impatient - Part 1

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie A Backbone.js Tutorial for the Impatient - Part 1

Ähnlich wie A Backbone.js Tutorial for the Impatient - Part 1 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

A Backbone.js Tutorial for the Impatient - Part 1