1. Putting Performance Best Practices Together to Create the Perfect SPA Chris Love @ChrisLove Love2Dev.com

2. Who Am I ASP.NET MVP ASP Insider Internet Explorer User Agent Author Speaker Tweaker, Lover of Web, JavaScript, CSS & HTML5 @ChrisLove Love2Dev.com

3. High Performance Single Page Web Applications Responsive Design Touch Mobile First SPA Extensible, Scalable Architecture Web Build and Workflow Goes Really Fast! ~395 Pages 20 Chapters $9.99 http://amzn.to/1a55L89 BUY NOW !

4. Slide Deck & Source Code Slide Deck – http://slideshare.net/docluv Source Code – http://github.com/docluv

5. Let Me Take You On A Journey

6. The jQueryUI Dialog

7. The jQueryUI Dialog Markup

9. My First Big SPA Experience 0 to 400 Views Modular & Extensible 4 Months Nothing To Reference

10. Lessons Learned Can’t Load Everything At Once Mobile Matters Test Over Sprint 3G

11. Let’s Call it A Single Page Application

12. A SPA Is All Inclusive Views/Pages CSS/Styles JavaScript JS

13. A SPA Leverages AJAX/Sock ets Storag e Hash Fragment #

14. Mobile Browsers Aggressively Purge Cache Weaker Processors Less Memory

15. Cellular Connections Slower More Expensive Unreliable

16. The Web Is Obese 100 Files Requests – 2+MB 21 JavaScript Files - 353KB 7.4 CSS Files – 69KB 55 Images – 1.4MB 2.8 Fonts – 111kb 39 TCP Connections 18 Domains 48% Cacheable http://httpArchive.org

17. Cant Use Fast Food Frameworks

19. Dump jQuery & What it means Faster Load Times Master DOM APIs Alternatives Create DollarBill Learn to be Modular And Yes This Was Painful For about 2 weeks But Was A Great Experience

20. Fast Food Frameworks Are Bad Full of Fat  Loaded With Preservatives  Syntactic Sugar 

21. MicroJS Libraries Small  Promote Modular Architecture  Single Focus 

22. Performance Modularity Small Footprint Scalability Maintainability Long Lifespan Architecture Goals

23. The Modern Web Hour Glass HTML5 JavaScript CSS3 ASP.NET/IIS Express/Node DB – SQL Server/ NoSQL

24. Application Loading Process The 1 st Time a User Visits They ‘Install’ the Application

25. The Initial Request Contains Critical Path Assets Master Layout HTML + CSS Inline Initial Possible Views Initial View’s CSS Core Application JavaScript + Initial View’s Controllers Application Loading Process

26. Deferred Request(s) Contains Additional View HTML, CSS and JavaScript Application Loading Process

27. SPA PARTSRouting Caching Data Rendering

28. API Web Application AJAX SPA CACH E DATA APP VIEW Controller View Engine Template Engine

29. Markup Management Keep the DOM Lean Leverage Browser Storage to Persist Markup http://bit.ly/H2qhZ2

30. View Engine – Cache Markup Parses Markup For Views & Templates Stores All Markup Related Concerns in Storage Retrieves View Markup On Demand Abstracts Templating or Binding Library

31. View Engine – Lazy Loading Reduces Initial Load Enables 14kb Goal View Engine Still Parses Markup & Caches Also caches and injects CSS & Script References

32. Cutting the Mustard Feature Detection Do Not Code to Legacy Browsers DO NOT USE Polyfils Also Helps With SEO Google’s Specification for AJAX Applications http://bit.ly/117sTgL

33. Cutting the Mustard

34. Above the Fold Determine Possible Initial Views Usually 5-10 Views Accessible from Initial View Within 1 Click Critical Task to Achieve 14kb Initial Payload

35. Above the Fold

36. Data Management Cache Data in Storage Assign Time To Live Value to All Data Eliminate Redundant HTTP Requests The Fastest HTTP Request is the one you don’t make

37. Caching Data jQuery AJAX Pre-Filter http://bit.ly/117p7E9 Intercept AJAX GET Requests Determine if Data is Cached

38. Caching Data Data Requested Is In Cache? Yes No Return Data Make AJAX Request Cache Data Return Data

39. Responsive Images

40. Custom Fonts http://fontello.com/ Create Custom Font from various Icon Fonts

41. Common Web Perf Best Practices Bundle & Minify CSS @ Top Scripts @ Bottom Async Use CDN Optimize Images HTTP Caching Shard Assets, but not too much

42. Questions