Download as PDF, PPTX
![Backbone.Collection vrCaatr=Bcbn.oe.xed{ a hrce akoeMdletn( dfut:{ eals nm:'lns, ae Bak' seis 'ua' pce: Hmn, dsrpin 'odsrpinyt' ecito: N ecito e. } , iiilz:fnto( { ntaie ucin) cnoelg'e caatrcetd) osl.o(Nw hrce rae'; } }; ) vrCs =Bcbn.olcinetn( a at akoeCleto.xed{ mdl Caatr oe: hrce }; ) vrjk =nwCaatr{ a ae e hrce( nm:'aeteDg, ae Jk h o' seis 'o' pce: Dg, dsrpin ' mgcldg Bs fin,adbohr wt Fn. ecito: A aia o. et red n rte, ih in' }; ) vrfn =nwCaatr{ a in e hrce( nm:'inteHmn, ae Fn h ua' seis 'ua' pce: Hmn, dsrpin 'h ls hmni teLn o Oo Hnsotwt Jk. ecito: Te at ua n h ad f o. ag u ih ae' }; ) vrcsLs =nwCs( jk,fn ]; a atit e at[ ae in ) cnoelgcsLs.oes; osl.o(atitmdl)](https://image.slidesharecdn.com/adventure-time-with-js-and-spas-131117232824-phpapp02/75/Adventure-Time-with-JavaScript-Single-Page-Applications-90-2048.jpg)
![Sample Controller vrsmlApotolr =aglrmdl(smlApotolr' [) a apepCnrles nua.oue'apepCnrles, ]; smlApotolr.otolr'hwotolr,[$cp' apepCnrlescnrle(SoCnrle' 'soe, fnto SoCnrle(soe { ucin hwotolr$cp) $cp.apeaibe=1 soesmlVral ; $cp.apera =[ soesmlAry { fedn:0 ilOe , fedw:"et ilTo Ts" } , { fedn:1 ilOe , fedw:"ape ilTo Sml" } ] $cp.apeucin fnto( { soesmlFnto: ucin) /Fnto lgc /ucin oi } }) ];](https://image.slidesharecdn.com/adventure-time-with-js-and-spas-131117232824-phpapp02/75/Adventure-Time-with-JavaScript-Single-Page-Applications-130-2048.jpg)
![Simple structure for routing vrsmlAp=aglrmdl(smlAp,[ a apep nua.oue'apep' 'got' nRue, 'yotolr' mCnrles ]; ); smlApcni('ruervdr, apep.ofg[$otPoie' fnto(ruervdr { ucin$otPoie) $otPoie.hn'ts' {tmltUl 'atasts.tl,cnr ruervdrwe(/et, epaer: pril/ethm' oto $otPoie.hn'sml:d,{tmltUl 'atassml.tl, ruervdrwe(/apei' epaer: pril/apehm' $otPoie.tews( rdrcT:''}; ruervdrohrie{ eieto / ) }) ];](https://image.slidesharecdn.com/adventure-time-with-js-and-spas-131117232824-phpapp02/75/Adventure-Time-with-JavaScript-Single-Page-Applications-141-2048.jpg)
Uploaded byFITC
Adventure Time with JavaScript & Single Page Applications
The document provides an overview of single page applications (SPAs) using various frameworks like Backbone, Angular, and Kendo UI. It discusses the architecture of SPAs, including the model-view-controller (MVC) pattern, client-side rendering, and improved user experience. Additionally, it highlights key features and functionalities of each framework, emphasizing their roles in building responsive and interactive web applications.
Adventure Time with JavaScript & Single Page Applications
- 1. Adventure Time with JavaScript & Single Page Apps Carl Bergenhem -Web Unleashed 2013 - @carlbergenhem
- 2. Introductions Carl Bergenhem Manager, SolutionsConsultants Telerik @carlbergenhem
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84. Extend Method vrCaatr=Bcbn.oe.xed{ a hrce akoeMdletn( dfut:{ eals nm:'lns, ae Bak' seis'ua' pce: Hmn, dsrpin 'odsrpinyt' ecito: N ecito e. } , iiilz:fnto( { ntaie ucin) cnoelg'e caatrcetd) osl.o(Nw hrce rae'; } }; ) vrjk =nwCaatr{ a ae e hrce( nm:'aeteDg, ae Jk h o' seis 'o' pce: Dg, dsrpin ' mgcldg Bs fin,adbohr wt Fn. ecito: A aia o. et red n rte, ih in' }; )
- 85. Use get() or set() to change data vrfn =nwCaatr{nm:'inteHmn }; ain e hrce( ae Fn h ua' ) fn.e( seis 'ua'}; inst{ pce: Hmn ) vrnm =fn.e(nm';/Fn teHmn a ae ingt'ae) /in h ua
- 86.
- 87.
- 88.
- 89.
- 90. Backbone.Collection vrCaatr=Bcbn.oe.xed{ a hrce akoeMdletn( dfut:{ eals nm:'lns, ae Bak' seis'ua' pce: Hmn, dsrpin 'odsrpinyt' ecito: N ecito e. } , iiilz:fnto( { ntaie ucin) cnoelg'e caatrcetd) osl.o(Nw hrce rae'; } }; ) vrCs =Bcbn.olcinetn( a at akoeCleto.xed{ mdl Caatr oe: hrce }; ) vrjk =nwCaatr{ a ae e hrce( nm:'aeteDg, ae Jk h o' seis 'o' pce: Dg, dsrpin ' mgcldg Bs fin,adbohr wt Fn. ecito: A aia o. et red n rte, ih in' }; ) vrfn =nwCaatr{ a in e hrce( nm:'inteHmn, ae Fn h ua' seis 'ua' pce: Hmn, dsrpin 'h ls hmni teLn o Oo Hnsotwt Jk. ecito: Te at ua n h ad f o. ag u ih ae' }; ) vrcsLs =nwCs( jk,fn ]; a atit e at[ ae in ) cnoelgcsLs.oes; osl.o(atitmdl)
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97. Backbone.View vrFnVe =Bcbn.iwetn( a iniw akoeVe.xed{ tgae'i' aNm: dv, i:'ini' d fnDv, casae 'inls' lsNm: fnCas, atiue:{ trbts 'aacso' 135 dt-utm: 24 } }; ) vrqikiw=nwFnVe(; a ucVe e iniw) $'paeodr)peedqikiwe) (#lchle'.rpn(ucVe.l;
- 98. Resulting HTML <i dt-utm"24"i=smlDv cas"apels"<dv dvaacso=135 d"apei" ls=smlCas>/i>
- 99.
- 100.
- 101.
- 102.
- 103.
- 104. Backbone.Router vrSmlRue =Bcbn.otretn( a apeotr akoeRue.xed{ rue:{ ots 'hrce/nm''hrce'/ruepten:hnlrnm caatr:ae: caatr /ot atr ade ae } , caatr fnto(ae {/hnlr hrce: ucinnm) /ade /.. /. } }; )
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124. One-way binding <i n-otolr"apeotolr> dv gcnrle=SmlCnrle" <pn{caatrnm }<sa> sa>{ hrce.ae }/pn <dv /i>
- 125. Two-way binding <eetn-oe=slceCaatr> slc gmdl"eetdhrce" <pinvle""Fn<oto> oto au=0>in/pin <pinvle""Jk<oto> otoau=1>ae/pin <pinvle""BO/pin oto au=2>M<oto> <slc> /eet
- 126.
- 127.
- 128.
- 129.
- 130. Sample Controller vrsmlApotolr =aglrmdl(smlApotolr' [) aapepCnrles nua.oue'apepCnrles, ]; smlApotolr.otolr'hwotolr,[$cp' apepCnrlescnrle(SoCnrle' 'soe, fnto SoCnrle(soe { ucin hwotolr$cp) $cp.apeaibe=1 soesmlVral ; $cp.apera =[ soesmlAry { fedn:0 ilOe , fedw:"et ilTo Ts" } , { fedn:1 ilOe , fedw:"ape ilTo Sml" } ] $cp.apeucin fnto( { soesmlFnto: ucin) /Fnto lgc /ucin oi } }) ];
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141. Simple structure for routing vrsmlAp=aglrmdl(smlAp,[ a apep nua.oue'apep' 'got' nRue, 'yotolr' mCnrles ]; ); smlApcni('ruervdr, apep.ofg[$otPoie' fnto(ruervdr { ucin$otPoie) $otPoie.hn'ts'{tmltUl 'atasts.tl,cnr ruervdrwe(/et, epaer: pril/ethm' oto $otPoie.hn'sml:d,{tmltUl 'atassml.tl, ruervdrwe(/apei' epaer: pril/apehm' $otPoie.tews( rdrcT:''}; ruervdrohrie{ eieto / ) }) ];
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160. kendo.observable vrfnMdl=knoosral( a inoe ed.bevbe{ nm:'inteHmn, ae Fnh ua' seis 'ua' pce: Hmn, dsrpin 'h ls hmni teLn o Oo Hnsotwt Jk. ecito: Te at ua n h ad f o. ag u ih ae' }; )
- 161. Use get() or set() with fields vrfnMdl=knoosral( a inoe ed.bevbe{ nm:'inteHmn, ae Fnh ua' seis 'o' pce: Dg, dsrpin 'h ls hmni teLn o Oo Hnsotwt Jk. ecito: Te at ua n h ad f o. ag u ih ae' }; ) fnMdlst'pce' 'ua'; inoe.e(seis, Hmn) vrseis=fnMdlgt'pce';/Hmn a pce inoe.e(seis) /ua
- 162.
- 163.
- 164.
- 165.
- 166. kendo.View() vridx=nwknoVe(<pnAvnueTm!/pn'; a ne e ed.iw'sa>detrie<sa>) idxrne(#lchle'; ne.edr'paeodr)
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173. kendo.Layout vrve =nwKnoVe(<pnFn teHmn/pn'; aiw e ed.iw'sa>in h ua<sa>) vrlyu =nwknoLyu(<edrHae<hae>dvi=cnet>/i>foe>otr/otr'; a aot e ed.aot'hae>edr/edr<i d"otn"<dv<otrFoe<foe>) lyu.edr$'ap); aotrne((#p') lyu.hwn'cnet,ve) aotsoI(#otn' iw;
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180. kendo.Router() vrrue =nwknoRue(; a otr eed.otr) rue.ot(/,fnto ( { otrrue'' ucin ) lyu.hwn'cnet,hmVe) aotsoI(#otn' oeiw; }; ) rue.ot(/hrce' fnto ( { otrrue'caatr, ucin ) lyu.hwn'cnet,caatriw; aotsoI(#otn' hrceVe) }; ) $fnto( { (ucin) rue.tr(;/vr iprat otrsat) /ey motn }; ) rue.aiae'caatr) otrnvgt(/hrce';
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.