Adventure Time with JavaScript & Single Page Applications
3 likes2,055 views
Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca OVERVIEW We’ve all seen the phrase ‘Single Page Application’ or ‘SPA’ everywhere and everyone talks about how they’re the best thing since sliced bread, but what is an SPA really? Why are they the cat’s pajamas? In this session Carl will take a look at a few of the popular SPA frameworks out there: AngularJS, BackBoneJS, and Kendo UI. He will also cover what a SPA does in general, what makes each one of these libraries unique, and how they can be utilized in your web development today.
![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/85/Adventure-Time-with-JavaScript-Single-Page-Applications-90-320.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/85/Adventure-Time-with-JavaScript-Single-Page-Applications-130-320.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/85/Adventure-Time-with-JavaScript-Single-Page-Applications-141-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Adventure Time with JavaScript & Single Page Applications (20)
Ad
More from FITC (20)
Ad
Recently uploaded (20)
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, Solutions Consultants Telerik @carlbergenhem
- 3. Quick Notes
- 18. Why SPA?
- 25. History
- 36. MV* Framework
- 39. Model
- 44. Controller
- 50. View
- 56. Router
- 65. Examples
- 70. Backbone
- 79. Model
- 81. Bound to a view
- 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 }; a in 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. Collections
- 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. View
- 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 dv aacso=135 d"apei" ls=smlCas>/i>
- 100. Router
- 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. Backbone Summary
- 115. Angular
- 116. Created by Google
- 121. Expressions
- 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> oto au=1>ae/pin <pinvle""BO/pin oto au=2>M<oto> <slc> /eet
- 126. Controllers
- 130. 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 } }) ];
- 132. Directives
- 133. HTML-like attributes
- 135. Helps with setting up Angular App Controllers and binding Attributes Conditional display Events
- 137. Routing
- 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. Angular Summary
- 143. Extension of HTML
- 145. Controllers rule all
- 150. Kendo UI
- 151. Part of Kendo UI Web
- 156. Observable
- 160. kendo.observable vrfnMdl=knoosral( a inoe ed.bevbe{ 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' }; )
- 161. Use get() or set() with fields vrfnMdl=knoosral( a inoe ed.bevbe{ nm:'inteHmn, ae Fn h 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. View
- 166. kendo.View() vridx=nwknoVe(<pnAvnueTm!/pn'; a ne e ed.iw'sa>detr ie<sa>) idxrne(#lchle'; ne.edr'paeodr)
- 168. Layout
- 172. Can also be nested
- 173. kendo.Layout vrve =nwKnoVe(<pnFn teHmn/pn'; a iw 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. Router
- 180. kendo.Router() vrrue =nwknoRue(; a otr e ed.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. Kendo UI Summary