An Introduction to 5 important principles Web Developers need to understand in order to build modern Single Page Web Applications

1. 5 Single Page Application
Principles Developers Need To
Know
Chris Love
@ChrisLove
ProfessionalASPNET.com

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

3. Podcast Interviews
The Tablet Show
Chris Love Talks Surface Pro, Mobile Development and More
http://thetabletshow.com/?ShowNum=80
Chris Love Does Enterprise Mobility
http://thetabletshow.com/?ShowNum=22
Deep Fried Bytes
Mobile Web Is Not What The Other Guys Say It Is
http://deepfriedbytes.com/podcast/episode-74-mobile-web-is-not-what-the-other-guys-say-it-is/
Technology & Friends
Talking About Touch & Mobile Web
http://bit.ly/12IduAd

4. JavaScript Libraries
DeepTissueJS – A Touch Gesture Abstraction Library
http://deeptissuejs.com
PanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5
https://github.com/docluv/panoramajs
ToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phone
http://toolbarjs.com
Coming Soon!
SPA – Single Page Application Router, View Manager
Backpack – Markup Manager leveraging LocalStorage
FannyPack – Markup Manager leveraging on page markup
??????

5. Resources
Slide Deck – http://www.slideshare.net/docluv <- Only URL U
Need!
Source Code – Coming Soon!
Live Site - Coming Soon!

6. Brief History of Web Application Architecture
Way Back in the Dark Ages….
Static HTML
CGI/ASP – Enter the Dynamic Web Page
ASP.NET WebForms
WebServices

7. Brief History of Web Application Architecture
Server
Browser
Request
Response HTML

8. Hello AJAX
Asynchronous JavaScript and XML
But Don’t Use XML
Use JSON
Internet Explorer Introduced xmlHttpRequest object
Provides the Ability to Query the Server W/O Reloading the URL
First Popularized by Google Maps

9. How AJAX Works
Server
Browser
Request
Response JSON

10. The World Is An API

11. What Is a SPA?
Single Page Web Application
Means a More ‘Native Like’ Experience
Heavy Client-Side Application Model
Loads all Markup ‘on initial load’
Tectonic Shift In the Way Web Sites Are Built

12. Principle #1 – Performance Matters
Honor the 23 Rules of Web Performance
Use HTML5 Advantages
WebStorage Is Your Friend

13. YSlow Rules
1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Avoid empty src or href
4. Add an Expires or a Cache-Control Header
5. Gzip Components
6. Put StyleSheets at the Top
7. Put Scripts at the Bottom
8. Avoid CSS Expressions
9. Make JavaScript and CSS External
10. Reduce DNS Lookups
11. Minify JavaScript and CSS
12. Avoid Redirects
13. Remove Duplicate Scripts
14. Configure ETags
15. Make AJAX Cacheable
16. Use GET for AJAX Requests
17. Reduce the Number of DOM Elements
18. No 404s
19. Reduce Cookie Size
20. Use Cookie-Free Domains for Components
21. Avoid Filters
22. Do Not Scale Images in HTML
23. Make favicon.ico Small and Cacheable
http://yhoo.it/W7BFIw

14. Manage Your Size
http://bit.ly/PVlLOC
91 Files Requests
1.47MB
15 JavaScript Files
219KB
56 Images
872KB
16 Domains

15. Principle #2 – Things You Did On The Server Now
Live in the Browser
Only one Request for HTML (sort of…)
In the Browser
Routing
Markup Management
Data Caching

16. Please Press #
SPAs Reply on the URL hash
Prevents the Browser from Requesting URL from Server
Google SEO ‘Recommends’ #!
_escaped_fragement_ - http://bit.ly/1bFmIQT
Need a Route Management System

17. hashchange Event
window.addEventListener("hashchange", function (e) {
//swap the View Here
});

18. Markup Management
Insert and Remove HTML on Demand
If(currentView){
//insert before current view
}else{
//inset into the content wrapper
}

19. Use WebStorage to Store Markup
Keep HTML Elements To A Minimum
Using localStorage to Storage Markup - http://bit.ly/13qi7R2
localStorage.setItem(viewInfo.pageId,
JSON.stringify(viewInfo));

20. Demo Time!

21. Principle #3 – Learn a JavaScript Templating Library
Templating Libraries Merge Data With Markup
Dynamically Create Markup in the Browser
Check out MicroJS - http://microjs.com/#template
Micro Templates - http://bit.ly/XLhd2x
jsRender - http://bit.ly/145wNnS
HandleBars * - http://handlebarsjs.com/

22. Using HandlebarsJS
<script id="movie-list-template" type="text/x-handlebars-template">
{{each}}
<div>
<h1>{{title}}</h1>
<img src="{{poster}}" alt="{{title}}"/>
</div>
{{/each}}
</script>
target.innerHTML = Handlebars.compile(template[i].innerHTML)(data);

23. Demo Time!

24. Principle #4 – Use CSS3
Use For Modern Layouts
Media Queries for Responsive Design

25. Get Fancy With Animations
Transforms
Transitions
Key-Frame Animations
Great for ‘page’ Transitions

26. Demo Time!

27. Principle #5 – Design With Offline In Mind
Leverage the AppCache
Create a Manifest File
Don’t Let it be a Handicap
http://bit.ly/117q27A
Makes Sure Your App Will Work Without Connectivity
Good for Caching Images and Resources
Makes the Browser look Local Before Going to the Server

28. Demo Time!

29. Dealing With Older Browsers
UPGRADE!!!!!!!

30. Dealing With Older Browsers
Detect Outdated Browser
Fake Classic Request-Response