View
1.658
Download
0
Category
Tags:
Preview:
Citation preview
Putting Performance Best
Practices Together to Create the
Perfect SPA
Chris Love
@ChrisLove
Love2Dev.com
Who Am I
• ASP.NET MVP• ASP Insider• Internet Explorer User Agent• Author• Speaker• Tweaker, Lover of Web, JavaScript, CSS & HTML5• @ChrisLove• Love2Dev.com
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 Deck & Source Code
• Slide Deck – http://slideshare.net/docluv• Source Code – http://github.com/docluv
Let Me Take You On A Journey
The jQueryUI Dialog
The jQueryUI Dialog Markup
The jQueryUI Dialog Markup
My First Big SPA Experience
0 to 400 Views
Modular & Extensible
4 Months
Nothing To Reference
Lessons Learned
Can’t Load Everything At Once
Mobile Matters
Test Over Sprint 3G
Let’s Call it A Single Page Application
A SPA Is All InclusiveViews/
Pages
CSS/Styles
JavaScriptJS
A SPA Leverages
AJAX/Sockets
Storage
Hash Fragment
#
Mobile Browsers
Aggressively Purge Cache
Weaker Processors
Less Memory
Cellular Connections
Slower
More Expensive
Unreliable
The Web Is Obese
99 Files Requests –
2+MB
18 JavaScript Files -
318KB
6.4 CSS Files – 61KB
53 Images – 1.3MB
38 TCP Connections
17 Domains
46% Cacheable
http://httpArchive.org
Cant Use Fast Food Frameworks
Cant Use Fast Food Frameworks
Dump jQuery & What it means
• Faster Load Times
• Master DOM APIs
• Alternatives
• Create DollarBill
• Learn to be Modular
• And Yes This Was
Painful
• But Was A Great
Experience
Fast Food Frameworks Are Bad
Full of Fat
Loaded With Preservatives
Syntactic Sugar
MicroJS Libraries
Small
Promote Modular Architecture
Single Focus
•Performance•Modularity•Small Footprint•Scalability•Maintainability•Long Lifespan
Arch
itectu
re G
oals
The Modern Web Hour Glass
HTML5JavaScriptCSS3
ASP.NET/IISExpress/Node
DB – SQL Server/ NoSQL
Application Loading Process
The 1st Time a User Visits They ‘Install’ the Application
•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
•Deferred Request(s)•Contains Additional View HTML, CSS and JavaScript
Application Loading Process
SPA
PARTS
Routing
Caching
Data
Rendering
API
We b A p p l i c a t i o n
A J A X
S PA
C A C H E
D ATA A P P
V I E WV I E WV I E WV I E WV I E WC o n t r o l l e r
V i e w E n g i n e
Te m p l a t e E n g i n e
Markup Management
•Keep the DOM Lean•Leverage Browser Storage to Persist Markup• http://bit.ly/H2qhZ2
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
View Engine – Lazy Loading
•Reduces Initial Load•Enables 14kb Goal•View Engine Still Parses Markup & Caches•Also caches and injects CSS & Script References
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
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
Above the Fold
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
Caching Data
• jQuery AJAX Pre-Filter• http://bit.ly/117p7E9
• Intercept AJAX GET Requests• Determine if Data is
Cached
Caching Data
Data Requested
Is In Cache?
Yes
No
Return Data
Make AJAX Request
Cache DataReturn Data
Responsive Images
Custom Fonts
• http://fontello.com/• Create Custom Font from
various Icon Fonts
Common Web Perf Best Practices
• Bundle & Minify• CSS @ Top• Scripts @ Bottom• Async• Use CDN• Optimize Images• HTTP Caching• Shard Assets, but not too much
Questions
Recommended