single page apps
DESCRIPTION
Presentation on Single Page Applications I recently gave for a client. Feel free to contact Omni Resources at http://www.omniresources.com or myself on LinkedIn at https://www.linkedin.com/in/michaelacord if you would like to learn more about builiding Single Page Apps.TRANSCRIPT
![Page 1: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/1.jpg)
Single Page AppsPresented By Mike Acord
Microsoft Solutions Architect
May 12, 2014http://www.omniresources.comhttps://www.linkedin.com/in/michaelacord
![Page 2: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/2.jpg)
SPA Agenda
• What is a SPA?• Examples• Advantages/Challenges• SPA Technologies• SPA Frameworks• Q & A
![Page 3: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/3.jpg)
So, What is SPA?
![Page 4: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/4.jpg)
Single Page Applications
• Native-like user interface• Fluid• Fast• Page loaded once, updates with
JavaScript• Interactive
![Page 5: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/5.jpg)
Traditional Characteristics
• HTML5• JSON• Routing• RESTful web services• Data binding• Templates
![Page 6: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/6.jpg)
Traditional Page Lifecycle
Credit:http://msdn.microsoft.com/en-us/magazine/dn463786.aspx
![Page 7: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/7.jpg)
SPA Page Lifecycle
Credit:http://msdn.microsoft.com/en-us/magazine/dn463786.aspx
![Page 8: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/8.jpg)
SPA Examples
![Page 9: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/9.jpg)
Example: Twitter
![Page 10: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/10.jpg)
Advantages
• Fluid interface• Native feel• Server scale• Mobile friendly• Can distribute as an App• Ability to work offline• Client-side caching• Trendy
![Page 11: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/11.jpg)
Challenges
• New skills required (JavaScript)• SEO• Bookmarking• Duplicate logic server/client side• Testing• Debugging• Large initial page load
![Page 12: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/12.jpg)
SPA TechnologiesWelcome to your new tech stack
![Page 13: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/13.jpg)
SPA Technologies
Routing
{{View Templates}}
![Page 14: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/14.jpg)
RESTful API
• "REpresentational State Transfer• Alternative to complex SOAP/WSDL• Use HTML Action headers to distinguish
actions• Methods:
• GET: Get the item details• PUT: Update an item• POST: Create an item• DELETE: Delete the item
![Page 15: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/15.jpg)
RESTful API
• Tree-like hierarchy URI, often human readable• Example: /food/fruit/apples/fuji
• Typically returns JavaScript Object Notation (JSON)
• Stateless: server does not keep track of user state
• Standard: most libraries understand REST
![Page 16: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/16.jpg)
Routing
• Determines what page to display
Routing
![Page 17: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/17.jpg)
Routing
• Allows direct linking• Allows bookmarking• Allows History (Back/Forward)• Preserves page state
Routing
![Page 18: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/18.jpg)
View Templates
• Clean separation of html (View) from JavaScript
• Allows reuse• Use separate template files
{{View Templates}}
![Page 19: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/19.jpg)
Other SPA Technologies
• HTML5 Storage• PushState• Data Binding• On-demand file loading• OAuth• PhoneGap
![Page 20: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/20.jpg)
SPA FrameworksHelping put it all together
![Page 21: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/21.jpg)
SPA Frameworks
![Page 22: Single Page Apps](https://reader033.vdocuments.us/reader033/viewer/2022061112/54567016b1af9f33608b4aeb/html5/thumbnails/22.jpg)
Thank you!Q & A
http://www.omniresources.comhttps://www.linkedin.com/in/michaelacord