• Like
  • Save
5 single page application principles developers need to know
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

5 single page application principles developers need to know


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

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

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. 5 Single Page ApplicationPrinciples Developers Need ToKnowChris Love@ChrisLoveProfessionalASPNET.com
  • 2. Who Am I?ASP.NET MVPASP InsiderInternet Explorer User AgentAuthorSpeakerTweaker, Lover of Mobile Web, JavaScript, CSS & HTML5
  • 3. Podcast InterviewsThe Tablet ShowChris Love Talks Surface Pro, Mobile Development and Morehttp://thetabletshow.com/?ShowNum=80Chris Love Does Enterprise Mobilityhttp://thetabletshow.com/?ShowNum=22Deep Fried BytesMobile Web Is Not What The Other Guys Say It Ishttp://deepfriedbytes.com/podcast/episode-74-mobile-web-is-not-what-the-other-guys-say-it-is/Technology & FriendsTalking About Touch & Mobile Webhttp://bit.ly/12IduAd
  • 4. JavaScript LibrariesDeepTissueJS – A Touch Gesture Abstraction Libraryhttp://deeptissuejs.comPanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5https://github.com/docluv/panoramajsToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phonehttp://toolbarjs.comComing Soon!SPA – Single Page Application Router, View ManagerBackpack – Markup Manager leveraging LocalStorageFannyPack – Markup Manager leveraging on page markup??????
  • 5. ResourcesSlide Deck – http://www.slideshare.net/docluv <- Only URL UNeed!Source Code – Coming Soon!Live Site - Coming Soon!
  • 6. Brief History of Web Application ArchitectureWay Back in the Dark Ages….Static HTMLCGI/ASP – Enter the Dynamic Web PageASP.NET WebFormsWebServices
  • 7. Brief History of Web Application ArchitectureServerBrowserRequestResponse HTML
  • 8. Hello AJAXAsynchronous JavaScript and XMLBut Don’t Use XMLUse JSONInternet Explorer Introduced xmlHttpRequest objectProvides the Ability to Query the Server W/O Reloading the URLFirst Popularized by Google Maps
  • 9. How AJAX WorksServerBrowserRequestResponse JSON
  • 10. The World Is An API
  • 11. What Is a SPA?Single Page Web ApplicationMeans a More ‘Native Like’ ExperienceHeavy Client-Side Application ModelLoads all Markup ‘on initial load’Tectonic Shift In the Way Web Sites Are Built
  • 12. Principle #1 – Performance MattersHonor the 23 Rules of Web PerformanceUse HTML5 AdvantagesWebStorage Is Your Friend
  • 13. YSlow Rules1. Minimize HTTP Requests2. Use a Content Delivery Network3. Avoid empty src or href4. Add an Expires or a Cache-Control Header5. Gzip Components6. Put StyleSheets at the Top7. Put Scripts at the Bottom8. Avoid CSS Expressions9. Make JavaScript and CSS External10. Reduce DNS Lookups11. Minify JavaScript and CSS12. Avoid Redirects13. Remove Duplicate Scripts14. Configure ETags15. Make AJAX Cacheable16. Use GET for AJAX Requests17. Reduce the Number of DOM Elements18. No 404s19. Reduce Cookie Size20. Use Cookie-Free Domains for Components21. Avoid Filters22. Do Not Scale Images in HTML23. Make favicon.ico Small and Cacheablehttp://yhoo.it/W7BFIw
  • 14. Manage Your Sizehttp://bit.ly/PVlLOC91 Files Requests1.47MB15 JavaScript Files219KB56 Images872KB16 Domains
  • 15. Principle #2 – Things You Did On The Server NowLive in the BrowserOnly one Request for HTML (sort of…)In the BrowserRoutingMarkup ManagementData Caching
  • 16. Please Press #SPAs Reply on the URL hashPrevents the Browser from Requesting URL from ServerGoogle SEO ‘Recommends’ #!_escaped_fragement_ - http://bit.ly/1bFmIQTNeed a Route Management System
  • 17. hashchange Eventwindow.addEventListener("hashchange", function (e) {//swap the View Here});
  • 18. Markup ManagementInsert and Remove HTML on DemandIf(currentView){//insert before current view}else{//inset into the content wrapper}
  • 19. Use WebStorage to Store MarkupKeep HTML Elements To A MinimumUsing localStorage to Storage Markup - http://bit.ly/13qi7R2localStorage.setItem(viewInfo.pageId,JSON.stringify(viewInfo));
  • 20. Demo Time!
  • 21. Principle #3 – Learn a JavaScript Templating LibraryTemplating Libraries Merge Data With MarkupDynamically Create Markup in the BrowserCheck out MicroJS - http://microjs.com/#templateMicro Templates - http://bit.ly/XLhd2xjsRender - http://bit.ly/145wNnSHandleBars * - 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 CSS3Use For Modern LayoutsMedia Queries for Responsive Design
  • 25. Get Fancy With AnimationsTransformsTransitionsKey-Frame AnimationsGreat for ‘page’ Transitions
  • 26. Demo Time!
  • 27. Principle #5 – Design With Offline In MindLeverage the AppCacheCreate a Manifest FileDon’t Let it be a Handicaphttp://bit.ly/117q27AMakes Sure Your App Will Work Without ConnectivityGood for Caching Images and ResourcesMakes the Browser look Local Before Going to the Server
  • 28. Demo Time!
  • 29. Dealing With Older BrowsersUPGRADE!!!!!!!
  • 30. Dealing With Older BrowsersDetect Outdated BrowserFake Classic Request-Response