Your SlideShare is downloading. ×
0
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
5 single page application principles developers need to know
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

5 single page application principles developers need to know

8,889

Published on

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
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,889
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×