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

Meet Stacey Mulcahy | ‏@bitchwhocodes Technical Evangelist, Microsoft NYC Focuses on HTML/JS, IoT, Design & UX Interviews designers & developers http://bit.ly/1CPUJNX Talks Marketing & IoT on Channel 9 http://channel9.msdn.com/niners/bitchwhocodes Blogs at http://thebitchwhocodes.com

Meet Dave Voyles | @davevoyles Senior Technical Evangelist, Philadelphia Focusing on Gaming and HTML/JS Interviews independent game developers on the Indie Dev Podcast http://indiedevpodcast.wordpress.com/ Blogs at http://davevoyles.azurewebsites.net/ Twitter @davevoyles

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

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

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 http://aka.ms/MVA-Voucher Enter this code: PowerJump1 (expires 8/15/2013)

What is a Single Page Application?

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

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

Benefits and Challenges of SPAs

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

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

Deconstructing SPAs

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

Deconstructing a Single Page Application