Slide 1

Putting Performance Best Practices Together to Create the Perfect SPA Chris Love @ChrisLove Love2Dev.com Slide 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 Slide 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 ! Slide 4 Slide Deck & Source Code Slide Deck http://slideshare.net/docluv Source Code http://github.com/docluv Slide 5 Let Me Take You On A Journey Slide 6 The jQueryUI Dialog Slide 7 The jQueryUI Dialog Markup Slide 8 Slide 9 My First Big SPA Experience 0 to 400 Views Modular & Extensible 4 Months Nothing To Reference Slide 10 Lessons Learned Cant Load Everything At Once Mobile Matters Test Over Sprint 3G Slide 11 Lets Call it A Single Page Application Slide 12 A SPA Is All Inclusive Views/Pages CSS/Styles JavaScript JS Slide 13 A SPA Leverages AJAX/Sock ets Storag e Hash Fragment # Slide 14 Mobile Browsers Aggressively Purge Cache Weaker Processors Less Memory Slide 15 Cellular Connections Slower More Expensive Unreliable Slide 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 Slide 17 Cant Use Fast Food Frameworks Slide 18 Slide 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 Slide 20 Fast Food Frameworks Are Bad Full of Fat Loaded With Preservatives Syntactic Sugar Slide 21 MicroJS Libraries Small Promote Modular Architecture Single Focus Slide 22 Performance Modularity Small Footprint Scalability Maintainability Long Lifespan Architecture Goals Slide 23 The Modern Web Hour Glass HTML5 JavaScript CSS3 ASP.NET/IIS Express/Node DB SQL Server/ NoSQL Slide 24 Application Loading Process The 1 st Time a User Visits They Install the Application Slide 25 The Initial Request Contains Critical Path Assets Master Layout HTML + CSS Inline Initial Possible Views Initial Views CSS Core Application JavaScript + Initial Views Controllers Application Loading Process Slide 26 Deferred Request(s) Contains Additional View HTML, CSS and JavaScript Application Loading Process Slide 27 SPA PARTSRouting Caching Data Rendering Slide 28 API Web Application AJAX SPA CACH E DATA APP VIEW Controller View Engine Template Engine Slide 29 Markup Management Keep the DOM Lean Leverage Browser Storage to Persist Markup http://bit.ly/H2qhZ2 Slide 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 Slide 31 View Engine Lazy Loading Reduces Initial Load Enables 14kb Goal View Engine Still Parses Markup & Caches Also caches and injects CSS & Script References Slide 32 Cutting the Mustard Feature Detection Do Not Code to Legacy Browsers DO NOT USE Polyfils Also Helps With SEO Googles Specification for AJAX Applications http://bit.ly/117sTgL Slide 33 Cutting the Mustard Slide 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 Slide 35 Above the Fold Slide 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 dont make Slide 37 Caching Data jQuery AJAX Pre-Filter http://bit.ly/117p7E9 Intercept AJAX GET Requests Determine if Data is Cached Slide 38 Caching Data Data Requested Is In Cache? Yes No Return Data Make AJAX Request Cache Data Return Data Slide 39 Responsive Images Slide 40 Custom Fonts http://fontello.com/ Create Custom Font from various Icon Fonts Slide 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 Slide 42 Questions