5 single page application principles developers need to know
12 likes10,601 views
An Introduction to 5 important principles Web Developers need to understand in order to build modern Single Page Web Applications
![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);](https://image.slidesharecdn.com/5singlepageapplicationprinciplesdevelopersneedtoknow-130614215607-phpapp02/85/5-single-page-application-principles-developers-need-to-know-22-320.jpg)
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (19)
Viewers also liked (20)
Ad
Similar to 5 single page application principles developers need to know (20)
Ad
More from Chris Love (20)
Recently uploaded (20)
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
- 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