Adventure Time with JavaScript and Single Page Applications

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.

Transcript

1. Adventure Time with JavaScript & Single Page Apps - Web Unleashed 2013 - Carl Bergenhem @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 h t t p : / / m y u r l . c o m / # / p r o d u c t s /
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 Facebook 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 v a r m y M o d e l = n e w B a c k b o n e . M o d e l ( { } ) ;
84. Extend Method v a r C h a r a c t e r = B a c k b o n e . M o d e l . e x t e n d ( { d e f a u l t s : { n a m e : ' B l a n k s ' , s p e c i e s : ' H u m a n ' , d e s c r i p t i o n : ' N o d e s c r i p t i o n y e t . ' } , i n i t i a l i z e : f u n c t i o n ( ) { c o n s o l e . l o g ( ' N e w c h a r a c t e r c r e a t e d ' ) ; } } ) ; v a r j a k e = n e w C h a r a c t e r ( { n a m e : ' J a k e t h e D o g ' , s p e c i e s : ' D o g ' , d e s c r i p t i o n : ' A m a g i c a l d o g . B e s t f r i e n d , a n d b r o t h e r , w i t h F i n n . ' } ) ;
85. Use get() or set() to change data v a r f i n n = n e w C h a r a c t e r ( { n a m e : ' F i n n t h e H u m a n ' } ) ; f i n n . s e t ( { s p e c i e s : ' H u m a n ' } ) ; v a r n a m e = f i n n . g e t ( ' n a m e ' ) ; / / F i n n t h e H u m a n
86. Collections
87. Group related models together
88. Methods for adding/removing models
89. Simple array-like object
90. Backbone.Collection v a r C h a r a c t e r = B a c k b o n e . M o d e l . e x t e n d ( { d e f a u l t s : { n a m e : ' B l a n k s ' , s p e c i e s : ' H u m a n ' , d e s c r i p t i o n : ' N o d e s c r i p t i o n y e t . ' } , i n i t i a l i z e : f u n c t i o n ( ) { c o n s o l e . l o g ( ' N e w c h a r a c t e r c r e a t e d ' ) ; } } ) ; v a r C a s t = B a c k b o n e . C o l l e c t i o n . e x t e n d ( { m o d e l : C h a r a c t e r } ) ; v a r j a k e = n e w C h a r a c t e r ( { n a m e : ' J a k e t h e D o g ' , s p e c i e s : ' D o g ' , d e s c r i p t i o n : ' A m a g i c a l d o g . B e s t f r i e n d , a n d b r o t h e r , w i t h F i n n . ' } ) ; v a r f i n n = n e w C h a r a c t e r ( { n a m e : ' F i n n t h e H u m a n ' , s p e c i e s : ' H u m a n ' , d e s c r i p t i o n : ' T h e l a s t h u m a n i n t h e L a n d o f O o o . H a n g s o u t w i t h J a k e . ' } ) ; v a r c a s t L i s t = n e w C a s t ( [ j a k e , f i n n ] ) ; c o n s o l e . l o g ( c a s t L i s t . m o d e l s ) ;
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 v a r F i n n V i e w = B a c k b o n e . V i e w . e x t e n d ( { t a g N a m e : ' d i v ' , i d : ' f i n n D i v ' , c l a s s N a m e : ' f i n n C l a s s ' , a t t r i b u t e s : { ' d a t a - c u s t o m ' : 1 2 3 4 5 } } ) ; v a r q u i c k V i e w = n e w F i n n V i e w ( ) ; $ ( ' # p l a c e h o l d e r ' ) . p r e p e n d ( q u i c k V i e w . e l ) ;
98. Resulting HTML < d i v d a t a - c u s t o m = " 1 2 3 4 5 " i d = " s a m p l e D i v " c l a s s = " s a m p l e C l a s s " > < / d i v >
99. Default templates by Underscore jsBin.com/IWewESE/8/
100. Router
101. Use of hash fragments h t t p : / / m y u r l . c o m / # / c h a r a c t e r s /
102. Parses URL and finds appropriate function
103. Uses HTML5 History API if possible
104. Backbone.Router v a r S a m p l e R o u t e r = B a c k b o n e . R o u t e r . e x t e n d ( { r o u t e s : { ' c h a r a c t e r / : n a m e ' : ' c h a r a c t e r ' / / r o u t e p a t t e r n : h a n d l e r n a m e } , c h a r a c t e r : f u n c t i o n ( n a m e ) { / / h a n d l e r / / . . . } } ) ;
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 < d i v n g - c o n t r o l l e r = " S a m p l e C o n t r o l l e r " > < s p a n > { { c h a r a c t e r . n a m e } } < / s p a n > < / d i v >
125. Two-way binding < s e l e c t n g - m o d e l = " s e l e c t e d C h a r a c t e r " > < o p t i o n v a l u e = " 0 " > F i n n < / o p t i o n > < o p t i o n v a l u e = " 1 " > J a k e < / o p t i o n > < o p t i o n v a l u e = " 2 " > B M O < / o p t i o n > < / s e l e c t >
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 v a r s a m p l e A p p C o n t r o l l e r s = a n g u l a r . m o d u l e ( ' s a m p l e A p p C o n t r o l l e r s ' , [ ] ) ; s a m p l e A p p C o n t r o l l e r s . c o n t r o l l e r ( ' S h o w C o n t r o l l e r ' , [ ' $ s c o p e ' , f u n c t i o n S h o w C o n t r o l l e r ( $ s c o p e ) { $ s c o p e . s a m p l e V a r i a b l e = 1 ; $ s c o p e . s a m p l e A r r a y = [ { f i e l d O n e : 0 , f i e l d T w o : " T e s t " } , { f i e l d O n e : 1 , f i e l d T w o : " S a m p l e " } ] $ s c o p e . s a m p l e F u n c t i o n : f u n c t i o n ( ) { / / F u n c t i o n l o g i c } } ] ) ;
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 v a r s a m p l e A p p = a n g u l a r . m o d u l e ( ' s a m p l e A p p ' , [ ' n g R o u t e ' , ' m y C o n t r o l l e r s ' ] ) ; ; s a m p l e A p p . c o n f i g ( [ ' $ r o u t e P r o v i d e r ' , f u n c t i o n ( $ r o u t e P r o v i d e r ) { $ r o u t e P r o v i d e r . w h e n ( ' / t e s t ' , { t e m p l a t e U r l : ' p a r t i a l s / t e s t . h t m l ' , c o n t r o $ r o u t e P r o v i d e r . w h e n ( ' / s a m p l e : i d ' , { t e m p l a t e U r l : ' p a r t i a l s / s a m p l e . h t m l ' , $ r o u t e P r o v i d e r . o t h e r w i s e ( { r e d i r e c t T o : ' / ' } ) ; } ] ) ;
142. Angular Summary
143. Extension of HTML
144. Empowering your regular HTML code
145. Controllers rule all
146. Data can be bound one- or two- way
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 v a r f i n n M o d e l = k e n d o . o b s e r v a b l e ( { n a m e : ' F i n n t h e H u m a n ' , s p e c i e s : ' H u m a n ' , d e s c r i p t i o n : ' T h e l a s t h u m a n i n t h e L a n d o f O o o . H a n g s o u t w i t h J a k e . ' } ) ;
161. Use get() or set() with fields v a r f i n n M o d e l = k e n d o . o b s e r v a b l e ( { n a m e : ' F i n n t h e H u m a n ' , s p e c i e s : ' D o g ' , d e s c r i p t i o n : ' T h e l a s t h u m a n i n t h e L a n d o f O o o . H a n g s o u t w i t h J a k e . ' } ) ; f i n n M o d e l . s e t ( ' s p e c i e s ' , ' H u m a n ' ) ; v a r s p e c i e s = f i n n M o d e l . g e t ( ' s p e c i e s ' ) ; / / H u m a n
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() v a r i n d e x = n e w k e n d o . V i e w ( ' < s p a n > A d v e n t u r e T i m e ! < / s p a n > ' ) ; i n d e x . r e n d e r ( ' # p l a c e h o l d e r ' ) ;
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 v a r v i e w = n e w K e n d o . V i e w ( ' < s p a n > F i n n t h e H u m a n < / s p a n > ' ) ; v a r l a y o u t = n e w k e n d o . L a y o u t ( ' < h e a d e r > H e a d e r < / h e a d e r > < d i v i d = " c o n t e n t " > < / d i v > < f o o t e r > F o o t e r < / f o o t e r > ' ) ; l a y o u t . r e n d e r ( $ ( ' # a p p ' ) ) ; l a y o u t . s h o w I n ( ' # c o n t e n t ' , v i e w ) ;
174. Router
175. Responsible for application state
176. Navigate between views
177. Use of hash fragments h t t p : / / m y u r l . c o m / # / c h a r a c t e r s /
178. Can programmatically navigate
179. Use with Layout to show new content
180. kendo.Router() v a r r o u t e r = n e w k e n d o . R o u t e r ( ) ; r o u t e r . r o u t e ( ' / ' , f u n c t i o n ( ) { l a y o u t . s h o w I n ( ' # c o n t e n t ' , h o m e V i e w ) ; } ) ; r o u t e r . r o u t e ( ' / c h a r a c t e r ' , f u n c t i o n ( ) { l a y o u t . s h o w I n ( ' # c o n t e n t ' , c h a r a c t e r V i e w ) ; } ) ; $ ( f u n c t i o n ( ) { r o u t e r . s t a r t ( ) ; / / v e r y i m p o r t a n t r o u t e r . n a v i g a t e ( ' / c h a r a c t e r ' ) ; } ) ;
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