3.7.2012 (                 : 20.3.2012)A Backbone.js Tutorial for theImpatient     Part 1: How to Get Your Hands Dirt with...
Prerequisites  R         :  D                                          , Node.js  U                                       ...
Creating our project  W      B               (     )  I C               : gtcoehts/gtu.o/baynbcbn-olrlt.i mpoet  i ln tp:/...
Routers     L                              : I             R            apmdlseapej:                            p/oue/ ml....
Views I                      DOM,                . M        apmdlseapej (          p/oue/ ml.s                 i d ):     ...
Refactoring to Support MultiplePages (1/2) A    W apmdlseapej:  p/oue/ ml.s     EapeWbae=Bcbn.oe.xed{     xml.epg    akoeM...
Refactoring to Support MultiplePages (2/2) P  W                  rne (                       edr apmdlseapej)  p/oue/ ml.s...
Managing Models with aCollection A                        ( a p m d l s e a p e j ):  p/oue/ ml.s EapeWbae =Bcbn.olcinetn(...
Persisting Models with HTML5localStorage  G   bcbn.oaSoaej      akoelcltrg.s       . /  /B  .  S                     :  S ...
Adding Flesh - Edit Content N             (      ),        . aptmltsid .tl  p/epae/ne hm <1cas"aette>% tte% (<=i %)/1 h ls...
Adding Flesh - Save EditedContent apmdlseapej  p/oue/ ml.s eet:{ vns  ..   .  "lc .aecnet.dtripttp=sbi" "aeotn"   cik pg-o...
E e Cand - MarkdownRenderer Hook-up (1/2) L               .   ( J   S   M       ) G          ( . / s t / s l b / h d n j )...
E e Cand - MarkdownRenderer Hook-up (2/2) apmdlseapej  p/oue/ ml.s "s!akoe, uebcbn" "s!hwon uesodw" .. . fnto(aepc,Bcbn,So...
Building for production R             (                    ): nd bid oe ul C                         .F            ,   : n...
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 !)
Upcoming SlideShare
Loading in …5
×

A Backbone.js Tutorial for the Impatient - Part 1

3,892 views
3,757 views

Published on

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

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,892
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
68
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

A Backbone.js Tutorial for the Impatient - Part 1

  1. 1. 3.7.2012 ( : 20.3.2012)A Backbone.js Tutorial for theImpatient 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. 2. Prerequisites R : D , Node.js U - G :// . / Git U . G :// - . / D ?N
  3. 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 ITS ALIVE
  4. 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.tlh>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. 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. 6. Refactoring to Support MultiplePages (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. 7. Refactoring to Support MultiplePages (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. 8. Managing Models with aCollection 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. 9. Persisting Models with HTML5localStorage 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. 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 hsmdlgtotn; $pg-otn .edrd)hd(; (.aecnet rnee.ie) $pg-otn .dtr)rmvCasidn) (.aecnet eio.eoels(hde; $pg-otn .dtrtxae.tlcnet; (.aecnet eio etra)hm(otn) ,
  11. 11. Adding Flesh - Save EditedContent apmdlseapej p/oue/ ml.s eet:{ vns .. . "lc .aecnet.dtripttp=sbi" "aeotn" cik pg-otn eio nu[yeumt]: svCnet , .. . svCnet fnto( { aeotn: ucin) vrcnet=$pg-otn .dtrtxae.a(; a otn (.aecnet eio etra)vl) ti.oe.e(cnet,cnet; hsmdlstotn otn) ti.oe.ae) hsmdlsv(; $pg-otn .dtr)adls(hde; (.aecnet eio.dCasidn) $pg-otn .dtrtxae.tl) (.aecnet eio etra)hm(; $pg-otn .edrd)rmvCasidn) (.aecnet rnee.eoels(hde; ti.edr) hsrne(;
  12. 12. E e Cand - MarkdownRenderer 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. 13. E e Cand - MarkdownRenderer 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. 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. 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 !)

×