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.

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

4. Covering a lot of ground today

5. High level overview

6. More code in tomorrow's
workshop
9 AM - 12:30 PM @ Room 325 BC

7. What is a SPA?

8. Single Page Application

9. A web app that fits in a single
page

10. Entire app is loaded at once

11. Built with a MV* Framework

12. Server provides the initial app

13. Section our HTML page in views

14. Get data via RESTful requests

15. Bind the data to our UI

16. Business logic in our MV*
framework

17. MV* framework handles URL
requests

18. Why SPA?

19. Create desktop-like apps in the
web

20. Increase responsiveness

21. Reduce loadtime of pages

22. Less time spent on the server

23. Control user interactions on the
client

24. Improved end-user experience

25. History

26. In the Beginning
Reign of the post back

27. Everything done on the server

28. Full page refreshes

29. We got wiser
Ajax & XHR Requests

30. Serve some content via server

31. Do asynchronous calls to server

32. Partial page refreshes

33. Focus on
responsiveness
Introduce the SPA concept

34. Move all items over to the client

35. What makes up a
SPA?

36. MV* Framework

37. Basic pieces of a MV*
Model
View
*

38. A full SPA framework also has
Routing

39. Model

40. In charge of holding data

41. Communication with server

42. Work with server end-points

43. Define what data should be
used

44. Controller

45. Control applications'
State
Logic
Behavior

46. Custom business logic

47. Communicate between the
View and Model

48. Provide validation

49. Bind data to our Views (UI)

50. View

51. Responsible for the UI of our
app

52. Modifies and interacts with our
DOM

53. Main point of interaction from
users

54. Bound to the controller for data
and events

55. Often works with a template
engine

56. Router

57. Responds to URL changes via
JavaScript

58. Changes between various
views

59. Browser initiated routes
Type in a URL
Hyperlink

60. Client initiated routes

61. Change from one page or a
view to another

62. Utilizes hash fragments
ht:/yr.o//rdcs
tp/mulcm#pout/

63. JS rights to modify page URL
Anything after '#' is fair game

64. Just like the anchor tag

65. Examples

66. Wild SPA Apps
Gmail
Facebok
Twitter
Trello
Asana

67. Popular MV*
Frameworks

68. Backbone
Angular
Kendo UI
Ember
Durandal
Meteor

69. Today's Focus
Backbone
Angular
Kendo UI

70. Backbone

71. Light-weight library

72. The basic foundation

73. Not a ton of extra frills

74. Heavy lifting is up to you

75. Huge community for tooling

76. Offers a set of helpful classes

77. Each one can
- and will be extended

78. Backbone main classes
Model
Collection
View
Router

79. Model

80. Deals with all of our data

81. Bound to a view

82. Syncs back to our server

83. Backbone.Model
vrmMdl=nwBcbn.oe(};
a yoe
e akoeMdl{)

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

87. Group related models together

88. Methods for adding/removing
models

89. Simple array-like object

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

92. The link between models and
the UI

93. Renders the models and their
data

94. Views are bound to models or
collections

95. Receives events from the
Model and HTML document

96. The 'el' property
Every view has an 'el' property
If not defined, a blank div is created
References the view's DOM object
Pass in a HTML element to modify it
Can be a jQuery object via $el

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>

99. Default templates by
Underscore
jsBin.com/IWewESE/8/

100. Router

101. Use of hash fragments
ht:/yr.o//hrces
tp/mulcm#caatr/

102. Parses URL and finds
appropriate function

103. Uses HTML5 History API if
possible

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

106. Barebones tools to build our
app

107. Emphasis on data and Models

108. Not a ton of tools for the View

109. .extend({}) everything

110. Backbone main classes
Model
Collection
View
Router

111. Model deals with all of our data

112. A collection has multiple
Models

113. View needs a Model
Works with Model and DOM

114. Router works with URL to serve
correct View

115. Angular

116. Created by Google

117. Believes HTML can be more
powerful

118. Extends HTML vocabulary

119. Tries to follow a pure HTML
path

120. Angular components
Expressions
Controllers
Directives
Routing

121. Expressions

122. Allows us to bring data to the
view

123. Uses a simple syntax
{{ model.FieldName }}

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

127. Central component of Angular
apps

128. Contains data, logic, and states

129. Creates a scope for the HTML
element
$scope variable

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
}
})
];

131. $scope only available within the
HTML element it is defined in

132. Directives

133. HTML-like attributes

134. Declared in view code

135. Helps with setting up
Angular App
Controllers and binding
Attributes
Conditional display
Events

136. Sample Directives
ng-app="appName"
ng-controller="SampleCtrl"
ng-model="ScopeVar"
ng-src="{{scopeUrlVar}}"
ng-click="eventHandler()"

137. Routing

138. Works with URL like you'd think

139. Single main view
Placeholder element for content

140. Load other views via partials
Just HTML pages

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

144. Empowering your regular HTML
code

145. Controllers rule all

146. Data can be bound one- or twoway

147. DOM manipulation via
controller
Drop that jQuery ;)

148. Directives are extremely helpful
Wire upp events and such

149. Routers use partials of HTML

150. Kendo UI

151. Part of Kendo UI Web

152. Combine SPA and MVVM
Frameworks

153. Additional helpful items
Template engine
Effects and animations
UI widgets
Charts and gauges

154. Tooling across all parts of your
SPA

155. Kendo UI key pieces
Observable
View
Layout
Router

156. Observable

157. Part of the Kendo UI MVVM
framework

158. All fields are observable

159. All changes will propogate

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

163. Can be defined with simple
HTML string

164. Works with Kendo UI templates

165. Tie in with our observables to
create data bound UI

166. kendo.View()
vridx=nwknoVe(<pnAvnueTm!/pn';
a ne
e ed.iw'sa>detr ie<sa>)
idxrne(#lchle';
ne.edr'paeodr)

167. With Kendo UI Templates and
Observables
jsbin.com/imAnimo/5/

168. Layout

169. Provides a layout for views to
adhere to

170. MasterPages for you .NET folks

171. Easily display views in content
section

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

175. Responsible for application
state

176. Navigate between views

177. Use of hash fragments
ht:/yr.o//hrces
tp/mulcm#caatr/

178. Can programmatically navigate

179. Use with Layout to show new
content

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

182. Tools across the board

183. Classes for dealing with data

184. Helpful UI and View classes

185. Large set of UI widgets

186. Kendo UI SPA key items
Observable
View
Layout
Router

187. The End
Thanks for attending!
@carlbergenhem
github.com/bergenhem/talks