The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
5 single page application principles developers need to know
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
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
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
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));
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