5 single page application principles developers need to know


Published on

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

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

5 single page application principles developers need to know

  1. 1. 5 Single Page ApplicationPrinciples Developers Need ToKnowChris Love@ChrisLoveProfessionalASPNET.com
  2. 2. Who Am I?ASP.NET MVPASP InsiderInternet Explorer User AgentAuthorSpeakerTweaker, Lover of Mobile Web, JavaScript, CSS & HTML5
  3. 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. 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. 5. ResourcesSlide Deck – http://www.slideshare.net/docluv <- Only URL UNeed!Source Code – Coming Soon!Live Site - Coming Soon!
  6. 6. Brief History of Web Application ArchitectureWay Back in the Dark Ages….Static HTMLCGI/ASP – Enter the Dynamic Web PageASP.NET WebFormsWebServices
  7. 7. Brief History of Web Application ArchitectureServerBrowserRequestResponse HTML
  8. 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. 9. How AJAX WorksServerBrowserRequestResponse JSON
  10. 10. The World Is An API
  11. 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. 12. Principle #1 – Performance MattersHonor the 23 Rules of Web PerformanceUse HTML5 AdvantagesWebStorage Is Your Friend
  13. 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. 14. Manage Your Sizehttp://bit.ly/PVlLOC91 Files Requests1.47MB15 JavaScript Files219KB56 Images872KB16 Domains
  15. 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. 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. 17. hashchange Eventwindow.addEventListener("hashchange", function (e) {//swap the View Here});
  18. 18. Markup ManagementInsert and Remove HTML on DemandIf(currentView){//insert before current view}else{//inset into the content wrapper}
  19. 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. 20. Demo Time!
  21. 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. 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. 23. Demo Time!
  24. 24. Principle #4 – Use CSS3Use For Modern LayoutsMedia Queries for Responsive Design
  25. 25. Get Fancy With AnimationsTransformsTransitionsKey-Frame AnimationsGreat for ‘page’ Transitions
  26. 26. Demo Time!
  27. 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. 28. Demo Time!
  29. 29. Dealing With Older BrowsersUPGRADE!!!!!!!
  30. 30. Dealing With Older BrowsersDetect Outdated BrowserFake Classic Request-Response