Upload
chris-love
View
653
Download
3
Embed Size (px)
Citation preview
Develop a Vanilla.js SPA you and your
customers will love
Chris Love@ChrisLove
Love2Dev.com
Who Am I• Microsoft MVP• ASP Insider• Edge 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 MonthsNothing To Reference
Lessons Learned
Can’t Load Everything At Once
Mobile MattersTest Over Sprint 3G
Let’s Call it A Single Page Application
A SPA Is All InclusiveViews/
Pages
CSS/StylesJavaScriptJS
A SPA Leverages
AJAX/Sockets
Storage
Hash Fragment
#
Mobile Browsers
Aggressively Purge Cache
Weaker ProcessorsLess Memory
Cellular Connections
Slower
More ExpensiveUnreliable
The Web Is Obese100 Files Requests – 2.2MB22 JavaScript Files - 354KB7.4 CSS Files – 71KB54 Images – 1.4MB2.9 Fonts – 111kb39 TCP Connections18 Domains48% Cacheable http://httpArchive.org
Cant Use Fast Food Frameworks
Cant Use Fast Food Frameworks
Dumping 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
Fast Food Frameworks Are Bad
Full of Processed Carbs
Loaded With Preservatives
Syntactic Sugar
MicroJS LibrariesSmall
Promote Modular Architecture
Single Focus
•Performance•Modularity•Small Footprint•Scalability•Maintainability•Long Lifespan
Architecture Goals
The Modern Web Hour GlassHTML5
JavaScriptCSS3 Web Server
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 PARTSRoutingCachingDataRendering
APIWe 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
Questions