The document discusses Single Page Applications (SPAs), highlighting their characteristics, advantages, challenges, and technologies. Key features include a fluid user interface, offline capabilities, and the use of RESTful APIs. It also addresses routing, templating, and different SPA frameworks that facilitate development.

1. Single Page Apps
Presented By Mike Acord
Microsoft Solutions Architect
May 12, 2014
http://www.omniresources.com
https://www.linkedin.com/in/michaelacord

2. SPA Agenda
• What is a SPA?
• Examples
• Advantages/Challenges
• SPA Technologies
• SPA Frameworks
• Q & A

3. So, What is SPA?

4. Single Page Applications
• Native-like user interface
• Fluid
• Fast
• Page loaded once, updates with
JavaScript
• Interactive

5. Traditional Characteristics
• HTML5
• JSON
• Routing
• RESTful web services
• Data binding
• Templates

6. Traditional Page Lifecycle
Credit:
http://msdn.microsoft.com/en-us/magazine/dn463786.aspx

7. SPA Page Lifecycle
Credit:
http://msdn.microsoft.com/en-us/magazine/dn463786.aspx

8. SPA Examples

9. Example: Twitter

10. Advantages
• Fluid interface
• Native feel
• Server scale
• Mobile friendly
• Can distribute as an App
• Ability to work offline
• Client-side caching
• Trendy

11. Challenges
• New skills required (JavaScript)
• SEO
• Bookmarking
• Duplicate logic server/client side
• Testing
• Debugging
• Large initial page load

12. SPA Technologies
Welcome to your new tech stack

13. SPA Technologies
Routing
{{View Templates}}

14. 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

15. 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

16. Routing
• Determines what page to display
Routing

17. Routing
• Allows direct linking
• Allows bookmarking
• Allows History (Back/Forward)
• Preserves page state
Routing

18. View Templates
• Clean separation of html (View)
from JavaScript
• Allows reuse
• Use separate template files
{{View Templates}}

19. Other SPA Technologies
• HTML5 Storage
• PushState
• Data Binding
• On-demand file loading
• OAuth
• PhoneGap

20. SPA Frameworks
Helping put it all together

21. SPA Frameworks

22. Thank you!
Q & A
http://www.omniresources.com
https://www.linkedin.com/in/michaelacord