Adventure Time
with
JavaScript & Single Page Apps

Carl Bergenhem - Web Unleashed 2013 - @carlbergenhem
Introductions
Carl Bergenhem
Manager, Solutions Consultants
Telerik
@carlbergenhem
Quick Notes
Covering a lot of ground today
High level overview
More code in tomorrow's
workshop
9 AM - 12:30 PM @ Room 325 BC
What is a SPA?
Single Page Application
A web app that fits in a single
page
Entire app is loaded at once
Built with a MV* Framework
Server provides the initial app
Section our HTML page in views
Get data via RESTful requests
Bind the data to our UI
Business logic in our MV*
framework
MV* framework handles URL
requests
Why SPA?
Create desktop-like apps in the
web
Increase responsiveness
Reduce loadtime of pages
Less time spent on the server
Control user interactions on the
client
Improved end-user experience
History
In the Beginning
Reign of the post back
Everything done on the server
Full page refreshes
We got wiser
Ajax & XHR Requests
Serve some content via server
Do asynchronous calls to server
Partial page refreshes
Focus on
responsiveness
Introduce the SPA concept
Move all items over to the client
What makes up a
SPA?
MV* Framework
Basic pieces of a MV*
Model
View
*
A full SPA framework also has
Routing
Model
In charge of holding data
Communication with server
Work with server end-points
Define what data should be
used
Controller
Control applications'
State
Logic
Behavior
Custom business logic
Communicate between the
View and Model
Provide validation
Bind data to our Views (UI)
View
Responsible for the UI of our
app
Modifies and interacts with our
DOM
Main point of interaction from
users
Bound to the controller for data
and events
Often works with a template
engine
Router
Responds to URL changes via
JavaScript
Changes between various
views
Browser initiated routes
Type in a URL
Hyperlink
Client initiated routes
Change from one page or a
view to another
Utilizes hash fragments
ht:/yr.o//rdcs
tp/mulcm#pout/
JS rights to modify page URL
Anything after '#' is fair game
Just like the anchor tag
Examples
Wild SPA Apps
Gmail
Facebok
Twitter
Trello
Asana
Popular MV*
Frameworks
Backbone
Angular
Kendo UI
Ember
Durandal
Meteor
Today's Focus
Backbone
Angular
Kendo UI
Backbone
Light-weight library
The basic foundation
Not a ton of extra frills
Heavy lifting is up to you
Huge community for tooling
Offers a set of helpful classes
Each one can
- and will be extended
Backbone main classes
Model
Collection
View
Router
Model
Deals with all of our data
Bound to a view
Syncs back to our server
Backbone.Model
vrmMdl=nwBcbn.oe(};
a yoe
e akoeMdl{)
Extend Method
vrCaatr=Bcbn.oe.xed{
a hrce
akoeMdletn(
dfut:{
eals
nm:'lns,
ae Bak'
seis 'ua'
pce: Hmn,
dsrpin 'odsrpinyt'
...
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...
Collections
Group related models together
Methods for adding/removing
models
Simple array-like object
Backbone.Collection
vrCaatr=Bcbn.oe.xed{
a hrce
akoeMdletn(
dfut:{
eals
nm:'lns,
ae Bak'
seis 'ua'
pce: Hmn,
dsrpin 'odsrp...
View
The link between models and
the UI
Renders the models and their
data
Views are bound to models or
collections
Receives events from the
Model and HTML document
The 'el' property
Every view has an 'el' property
If not defined, a blank div is created
References the view's DOM object
...
Backbone.View
vrFnVe =Bcbn.iwetn(
a iniw
akoeVe.xed{
tgae 'i'
aNm: dv,
i:'ini'
d fnDv,
casae 'inls'
lsNm: fnCas,
atiue:{
t...
Resulting HTML
<i dt-utm"24"i=smlDv cas"apels"<dv
dv aacso=135 d"apei" ls=smlCas>/i>
Default templates by
Underscore
jsBin.com/IWewESE/8/
Router
Use of hash fragments
ht:/yr.o//hrces
tp/mulcm#caatr/
Parses URL and finds
appropriate function
Uses HTML5 History API if
possible
Backbone.Router
vrSmlRue =Bcbn.otretn(
a apeotr
akoeRue.xed{
rue:{
ots
'hrce/nm' 'hrce'/ruepten:hnlrnm
caatr:ae: caatr /ot...
Backbone
Summary
Barebones tools to build our
app
Emphasis on data and Models
Not a ton of tools for the View
.extend({}) everything
Backbone main classes
Model
Collection
View
Router
Model deals with all of our data
A collection has multiple
Models
View needs a Model
Works with Model and DOM
Router works with URL to serve
correct View
Angular
Created by Google
Believes HTML can be more
powerful
Extends HTML vocabulary
Tries to follow a pure HTML
path
Angular components
Expressions
Controllers
Directives
Routing
Expressions
Allows us to bring data to the
view
Uses a simple syntax
{{ model.FieldName }}
One-way binding
<i n-otolr"apeotolr>
dv gcnrle=SmlCnrle"
<pn{ caatrnm }<sa>
sa>{ hrce.ae }/pn
<dv
/i>
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
<...
Controllers
Central component of Angular
apps
Contains data, logic, and states
Creates a scope for the HTML
element
$scope variable
Sample Controller
vrsmlApotolr =aglrmdl(smlApotolr' [)
a apepCnrles
nua.oue'apepCnrles, ];
smlApotolr.otolr'hwotolr,[$cp'
...
$scope only available within the
HTML element it is defined in
Directives
HTML-like attributes
Declared in view code
Helps with setting up
Angular App
Controllers and binding
Attributes
Conditional display
Events
Sample Directives
ng-app="appName"
ng-controller="SampleCtrl"
ng-model="ScopeVar"
ng-src="{{scopeUrlVar}}"
ng-click="event...
Routing
Works with URL like you'd think
Single main view
Placeholder element for content
Load other views via partials
Just HTML pages
Simple structure for routing
vrsmlAp=aglrmdl(smlAp,[
a apep
nua.oue'apep'
'got'
nRue,
'yotolr'
mCnrles
];
);

smlApcni('ru...
Angular
Summary
Extension of HTML
Empowering your regular HTML
code
Controllers rule all
Data can be bound one- or twoway
DOM manipulation via
controller
Drop that jQuery ;)
Directives are extremely helpful
Wire upp events and such
Routers use partials of HTML
Kendo UI
Part of Kendo UI Web
Combine SPA and MVVM
Frameworks
Additional helpful items
Template engine
Effects and animations
UI widgets
Charts and gauges
Tooling across all parts of your
SPA
Kendo UI key pieces
Observable
View
Layout
Router
Observable
Part of the Kendo UI MVVM
framework
All fields are observable
All changes will propogate
kendo.observable
vrfnMdl=knoosral(
a inoe
ed.bevbe{
nm:'inteHmn,
ae Fn h ua'
seis 'ua'
pce: Hmn,
dsrpin 'h ls hmni teLn o ...
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 ...
View
Can be defined with simple
HTML string
Works with Kendo UI templates
Tie in with our observables to
create data bound UI
kendo.View()
vridx=nwknoVe(<pnAvnueTm!/pn';
a ne
e ed.iw'sa>detr ie<sa>)
idxrne(#lchle';
ne.edr'paeodr)
With Kendo UI Templates and
Observables
jsbin.com/imAnimo/5/
Layout
Provides a layout for views to
adhere to
MasterPages for you .NET folks
Easily display views in content
section
Can also be nested
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/o...
Router
Responsible for application
state
Navigate between views
Use of hash fragments
ht:/yr.o//hrces
tp/mulcm#caatr/
Can programmatically navigate
Use with Layout to show new
content
kendo.Router()
vrrue =nwknoRue(;
a otr
e ed.otr)
rue.ot(/,fnto ( {
otrrue'' ucin )
lyu.hwn'cnet,hmVe)
aotsoI(#otn' oeiw;
}...
Kendo UI
Summary
Tools across the board
Classes for dealing with data
Helpful UI and View classes
Large set of UI widgets
Kendo UI SPA key items
Observable
View
Layout
Router
The End
Thanks for attending!
@carlbergenhem
github.com/bergenhem/talks
Upcoming SlideShare
Loading in …5
×

Adventure Time with JavaScript & Single Page Applications

1,538 views

Published on

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.

Published in: Internet, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,538
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
39
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Adventure Time with JavaScript & Single Page Applications

  1. 1. Adventure Time with JavaScript & Single Page Apps Carl Bergenhem - Web Unleashed 2013 - @carlbergenhem
  2. 2. Introductions Carl Bergenhem Manager, Solutions Consultants Telerik @carlbergenhem
  3. 3. Quick Notes
  4. 4. Covering a lot of ground today
  5. 5. High level overview
  6. 6. More code in tomorrow's workshop 9 AM - 12:30 PM @ Room 325 BC
  7. 7. What is a SPA?
  8. 8. Single Page Application
  9. 9. A web app that fits in a single page
  10. 10. Entire app is loaded at once
  11. 11. Built with a MV* Framework
  12. 12. Server provides the initial app
  13. 13. Section our HTML page in views
  14. 14. Get data via RESTful requests
  15. 15. Bind the data to our UI
  16. 16. Business logic in our MV* framework
  17. 17. MV* framework handles URL requests
  18. 18. Why SPA?
  19. 19. Create desktop-like apps in the web
  20. 20. Increase responsiveness
  21. 21. Reduce loadtime of pages
  22. 22. Less time spent on the server
  23. 23. Control user interactions on the client
  24. 24. Improved end-user experience
  25. 25. History
  26. 26. In the Beginning Reign of the post back
  27. 27. Everything done on the server
  28. 28. Full page refreshes
  29. 29. We got wiser Ajax & XHR Requests
  30. 30. Serve some content via server
  31. 31. Do asynchronous calls to server
  32. 32. Partial page refreshes
  33. 33. Focus on responsiveness Introduce the SPA concept
  34. 34. Move all items over to the client
  35. 35. What makes up a SPA?
  36. 36. MV* Framework
  37. 37. Basic pieces of a MV* Model View *
  38. 38. A full SPA framework also has Routing
  39. 39. Model
  40. 40. In charge of holding data
  41. 41. Communication with server
  42. 42. Work with server end-points
  43. 43. Define what data should be used
  44. 44. Controller
  45. 45. Control applications' State Logic Behavior
  46. 46. Custom business logic
  47. 47. Communicate between the View and Model
  48. 48. Provide validation
  49. 49. Bind data to our Views (UI)
  50. 50. View
  51. 51. Responsible for the UI of our app
  52. 52. Modifies and interacts with our DOM
  53. 53. Main point of interaction from users
  54. 54. Bound to the controller for data and events
  55. 55. Often works with a template engine
  56. 56. Router
  57. 57. Responds to URL changes via JavaScript
  58. 58. Changes between various views
  59. 59. Browser initiated routes Type in a URL Hyperlink
  60. 60. Client initiated routes
  61. 61. Change from one page or a view to another
  62. 62. Utilizes hash fragments ht:/yr.o//rdcs tp/mulcm#pout/
  63. 63. JS rights to modify page URL Anything after '#' is fair game
  64. 64. Just like the anchor tag
  65. 65. Examples
  66. 66. Wild SPA Apps Gmail Facebok Twitter Trello Asana
  67. 67. Popular MV* Frameworks
  68. 68. Backbone Angular Kendo UI Ember Durandal Meteor
  69. 69. Today's Focus Backbone Angular Kendo UI
  70. 70. Backbone
  71. 71. Light-weight library
  72. 72. The basic foundation
  73. 73. Not a ton of extra frills
  74. 74. Heavy lifting is up to you
  75. 75. Huge community for tooling
  76. 76. Offers a set of helpful classes
  77. 77. Each one can - and will be extended
  78. 78. Backbone main classes Model Collection View Router
  79. 79. Model
  80. 80. Deals with all of our data
  81. 81. Bound to a view
  82. 82. Syncs back to our server
  83. 83. Backbone.Model vrmMdl=nwBcbn.oe(}; a yoe e akoeMdl{)
  84. 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. 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. 86. Collections
  87. 87. Group related models together
  88. 88. Methods for adding/removing models
  89. 89. Simple array-like object
  90. 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. 91. View
  92. 92. The link between models and the UI
  93. 93. Renders the models and their data
  94. 94. Views are bound to models or collections
  95. 95. Receives events from the Model and HTML document
  96. 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. 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. 98. Resulting HTML <i dt-utm"24"i=smlDv cas"apels"<dv dv aacso=135 d"apei" ls=smlCas>/i>
  99. 99. Default templates by Underscore jsBin.com/IWewESE/8/
  100. 100. Router
  101. 101. Use of hash fragments ht:/yr.o//hrces tp/mulcm#caatr/
  102. 102. Parses URL and finds appropriate function
  103. 103. Uses HTML5 History API if possible
  104. 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. 105. Backbone Summary
  106. 106. Barebones tools to build our app
  107. 107. Emphasis on data and Models
  108. 108. Not a ton of tools for the View
  109. 109. .extend({}) everything
  110. 110. Backbone main classes Model Collection View Router
  111. 111. Model deals with all of our data
  112. 112. A collection has multiple Models
  113. 113. View needs a Model Works with Model and DOM
  114. 114. Router works with URL to serve correct View
  115. 115. Angular
  116. 116. Created by Google
  117. 117. Believes HTML can be more powerful
  118. 118. Extends HTML vocabulary
  119. 119. Tries to follow a pure HTML path
  120. 120. Angular components Expressions Controllers Directives Routing
  121. 121. Expressions
  122. 122. Allows us to bring data to the view
  123. 123. Uses a simple syntax {{ model.FieldName }}
  124. 124. One-way binding <i n-otolr"apeotolr> dv gcnrle=SmlCnrle" <pn{ caatrnm }<sa> sa>{ hrce.ae }/pn <dv /i>
  125. 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. 126. Controllers
  127. 127. Central component of Angular apps
  128. 128. Contains data, logic, and states
  129. 129. Creates a scope for the HTML element $scope variable
  130. 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. 131. $scope only available within the HTML element it is defined in
  132. 132. Directives
  133. 133. HTML-like attributes
  134. 134. Declared in view code
  135. 135. Helps with setting up Angular App Controllers and binding Attributes Conditional display Events
  136. 136. Sample Directives ng-app="appName" ng-controller="SampleCtrl" ng-model="ScopeVar" ng-src="{{scopeUrlVar}}" ng-click="eventHandler()"
  137. 137. Routing
  138. 138. Works with URL like you'd think
  139. 139. Single main view Placeholder element for content
  140. 140. Load other views via partials Just HTML pages
  141. 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. 142. Angular Summary
  143. 143. Extension of HTML
  144. 144. Empowering your regular HTML code
  145. 145. Controllers rule all
  146. 146. Data can be bound one- or twoway
  147. 147. DOM manipulation via controller Drop that jQuery ;)
  148. 148. Directives are extremely helpful Wire upp events and such
  149. 149. Routers use partials of HTML
  150. 150. Kendo UI
  151. 151. Part of Kendo UI Web
  152. 152. Combine SPA and MVVM Frameworks
  153. 153. Additional helpful items Template engine Effects and animations UI widgets Charts and gauges
  154. 154. Tooling across all parts of your SPA
  155. 155. Kendo UI key pieces Observable View Layout Router
  156. 156. Observable
  157. 157. Part of the Kendo UI MVVM framework
  158. 158. All fields are observable
  159. 159. All changes will propogate
  160. 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. 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. 162. View
  163. 163. Can be defined with simple HTML string
  164. 164. Works with Kendo UI templates
  165. 165. Tie in with our observables to create data bound UI
  166. 166. kendo.View() vridx=nwknoVe(<pnAvnueTm!/pn'; a ne e ed.iw'sa>detr ie<sa>) idxrne(#lchle'; ne.edr'paeodr)
  167. 167. With Kendo UI Templates and Observables jsbin.com/imAnimo/5/
  168. 168. Layout
  169. 169. Provides a layout for views to adhere to
  170. 170. MasterPages for you .NET folks
  171. 171. Easily display views in content section
  172. 172. Can also be nested
  173. 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. 174. Router
  175. 175. Responsible for application state
  176. 176. Navigate between views
  177. 177. Use of hash fragments ht:/yr.o//hrces tp/mulcm#caatr/
  178. 178. Can programmatically navigate
  179. 179. Use with Layout to show new content
  180. 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. 181. Kendo UI Summary
  182. 182. Tools across the board
  183. 183. Classes for dealing with data
  184. 184. Helpful UI and View classes
  185. 185. Large set of UI widgets
  186. 186. Kendo UI SPA key items Observable View Layout Router
  187. 187. The End Thanks for attending! @carlbergenhem github.com/bergenhem/talks

×