Do you want to leverage HTML, CSS and JavaScripts APIs to deliver rich user experiences that outlive the framework du jour? Do You want to understand good front-end application architecture and performance principles. Then you want to build applications in Vanilla JS. Despite popular belief Vanilla JS is not as difficult to master and implement as you might think. In this tutorial Chris Love will demonstrate how to apply many common web performance optimization, good architecture and tricks to build a fast, native-like application user experience customers desire without dependency on large, fast food frameworks. This tutorial will demonstrate the following concepts: - Applying the 14kb Rule for Instant Loading - Markup Management - Eliminating Excess AJAX Calls - Working With and Around Application Cache - Applying Service Workers and HTTP/2 For Even Better User Experiences - Leveraging common browser APIs & good architecture

1. Develop a Vanilla.js
SPA you and your
customers will love
Chris Love
@ChrisLove
Love2Dev.com

2. Who Am I
• Microsoft MVP
• ASP Insider
• Edge 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

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

8. 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
JavaScriptJS

13. A SPA Leverages
AJAX/Sockets Storage 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.2MB
22 JavaScript Files - 354KB
7.4 CSS Files – 71KB
54 Images – 1.4MB
2.9 Fonts – 111kb
39 TCP Connections
18 Domains
48% Cacheable http://httpArchive.org

17. Cant Use Fast Food Frameworks

18. Cant Use Fast Food Frameworks

19. 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

20. Fast Food Frameworks Are Bad
Full of Processed Carbs
Loaded With Preservatives
Syntactic Sugar

21. MicroJS Libraries
Small
Promote Modular
Architecture
Single Focus

22. •Performance
•Modularity
•Small Footprint
•Scalability
•Maintainability
•Long Lifespan
ArchitectureGoals

23. The Modern Web Hour Glass
HTML5
JavaScript
CSS3
Web Server
DB – SQL Server/
NoSQL

24. Application Loading Process
The 1st 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. SPAPARTS
Routing
Caching
Data
Rendering

28. 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

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. Questions