1. Single Page Applications with jQuery or AngularJS
Stacey Mulcahy | Technical Evangelist
Dave Voyles | Sr Technical Evangelist

2. Meet Stacey Mulcahy | ‏@bitchwhocodes
Technical Evangelist, Microsoft NYC
Focuses on HTML/JS, IoT, Design & UX
Interviews designers & developers
Talks Marketing & IoT on Channel 9
Blogs at

3. Meet Dave Voyles | @davevoyles
Senior Technical Evangelist, Philadelphia
Focusing on Gaming and HTML/JS
Interviews independent game developers on the Indie Dev Podcast
Blogs at

4. Course Topics Getting Started with Single Page Applications
01 | Understanding SPAs
06 | Using Angular JS
02 | Using jQuery
07 | Deploying to Azure
03 | Debugging and Testing
04 | Introduction to Frameworks
05 | Introduction to AngularJS

5. Setting Expectations Target Audience Front End Developers
Front End Designers
Basic understanding of JavaScript or jQuery
Backend Developers

6. Join the MVA Community! Microsoft Virtual Academy
Free online learning tailored for IT Pros and Developers
Over 1M registered users
Up-to-date, relevant training on variety of Microsoft products
“Earn while you learn!”
Get 50 MVA Points for this event!
Visit
Enter this code: PowerJump1 (expires 8/15/2013)

7. What is a Single Page Application?

8. Module Overview What is a Single Page Application?
Benefits and Drawbacks
Popular Single Page Applications

9. What is a Single Page Application
A single page application, or an SPA, is a web application that that fits on one page
Initial page render – considered a shell, chunking of html
A SPA can redraw any part of the UI without refreshing the page
They provide native-application like experience in the browser
Data is separated from the presentation
Often include templating, AJAX, routing

10. Benefits and Challenges of SPAs

11. Benefits with SPAs Quick experience with smart loading
Load data & views on demand
Provide native-like experience in the browser
Performance and User Experience

12. Challenges with SPAs SEO Considerations
Browser History and evolution of browsers– pushState, replaceState
Requires JavaScript Enabled
Potential Memory leaks – must deal carefully with JavaScript

13. Deconstructing SPAs

14. Examples of Single Page Applications
Twitter
Clients in the browser
Azure Portal
Kippt

15. Deconstructing a Single Page Application