Single page applications the basics
Download as PPTX, PDF3 likes732 views
Single Page Applications or SPAs are a hot topic today, however most developers feel lost. We are going to explore the basic concepts of a SPA, go over a few gotchas and traps and cover some best practices. This is not a talk about a specific framework, but more of a breakdown of how a SPA is composed, many key working concepts and some techniques you should employ for a successful modern web application.
Ad
More Related Content
What's hot (20)
Similar to Single page applications the basics (20)
Ad
More from Chris Love (20)
Ad
Single page applications the basics
- 1. Single Page Applications: The Basics Concepts, Gotchas and Just Things You Need To Know
- 2. High Performance Single Page Web Applications • Responsive Design • Touch • Mobile First • SPA • Extensible, Scalable Architecture • Web Build and Workflow • Goes Really Fast! • ~395 Pages • 20 Chapters • $9.99 http://amzn.to/1a55L89
- 3. What is a SPA? • A SPA is a new architecture for delivering rich user experiences in web applications that leverage modern web (HTML5, CSS3 and AJAX) capabilities. • The Application Resides in the Browser • User Experience is Primary Goal
- 4. What is a SPA? • Single Page Applications have become a must do approach as more and more end users utilize mobile class computers.
- 5. What is a SPA? • The modern web client requires a different approach, a user first approach.
- 6. SPA Fundamentals • Not Meant for Legacy Browsers • Many Server-Side responsibilities now reside in the browser • Applications are composed of APIs • The role of the web server has changed from service that performs the heavy lifting to compose markup to a much simpler process • Only 1 URL to GET core Markup • AJAX is used to GET Data • Routing is managed using the URL hash fragment, # • #! has become the defacto standard and is reccomended by Google for SEO • Data is bound to markup to compose rendered views in the browser • The client application is decoupled from the server • The client is responsible for managing markup and data • CSS transitions and animations provide a rich experience to transition between views • SEO does not have to be sacrificed. Google has a SPA specification
- 7. Why Only Modern Browsers? • The APIs, performance and many features modern browsers offer were not implemented in legacy browsers.
- 8. Early Feature Detection to ‘Cut the Mustard’ <script> var ef = "?_escaped_fragment_="; if (!('querySelector' in document) || !('localStorage' in window) || !('addEventListener' in window) || !('matchMedia' in window)) { if (window.location.href.indexOf("#!") > 0) { window.location.href = window.location.href.replace("#!", ef); } else { if (window.location.href.indexOf(ef) < 0) { window.location.href = window.location.href + ef; } } } else { if (window.location.href.indexOf(ef) >= 0) { window.location.href = window.location.href.replace(ef, "#!"); } } </script>
- 9. What the Heck is a Core Site? • Allows You to Serve Legacy Browsers & Search Engine Spiders • Is a ‘minimal’ site • Use Progressive Enhancement Concepts • Use Legacy Web Site Development Techniques • Minimal JavaScript and CSS
- 10. Only 1 URL to GET Core Markup • Just as the name, Single Page Application, implies a single request to the server for a web page is made during the application's life cycle. This means developers need to make some architectural decisions to deliver the application. • Inline Views • Script Tags • Hidden Elements
- 11. Markup Management & Persistence • Non-Current View Markup Should Not Reside in the DOM • Persist it Outside the DOM • Cache Markup • Memory • Browser Storage
- 12. AJAX Used to Get Data & The Role of the Server • AJAX Makes it Possible to Request Data from Server • No Longer Need Full Page Request • Can Return All Sorts of ‘Data’ • APIs Should Return JSON Formatted Data • Use Data Caching Strategy • The Fastest HTTP Request is the one Never Made • Browser Storage Is a Good Caching Medium
- 13. SPA Routing Fundamentals • Routing drives any web site or application • Utilizes the Address’s Hash Fragment, # • #! Is the Defacto Standard • Triggers hashchange Event • #!movie/:id/:title
- 14. SPA Routing Fundamentals • Hard Coded Routing is Most Common • Brittle • Difficult to Maintain • Declarative • Embeds Route with View <section id="movieView" class="content-pane" spa-title=" " spa-transition="slide" spa-route="movie/:id/:title"> </section>
- 15. View Swapping • Exchanging views or view swapping is at the heart of a SPA's user experience
- 16. Data Binding Options • A good SPA experience injects data as the view is being hydrated • Push Libraries like MUSTACHE • Compile Markup with Data Before Stamping it in the DOM • Binding Libraries • Knockout, Angular’s Compiler • Rivets • Evaluate for Memory Leaks!!!
- 17. Creating Rich View Transitions • You Can just Show and Hide Views • But that is Boring • Instead Use Animations • CSS Transitions & Key-Frame Animations • Animate.css is a Set of Turn-Key CSS Animations • http://daneden.github.io/animate.css/
- 18. Accounting for SEO & Legacy Browsers • Utilize a Core Site • Google Published a Specification • http://bit.ly/117sTgL • Convert SPA Route to a QueryString Parameter • ?_escaped_fragment_={SPA Route}
- 19. Thank You! • Responsive Design • Touch • Mobile First • SPA • Extensible, Scalable Architecture • Web Build and Workflow • Goes Really Fast! • ~395 Pages • 20 Chapters • $9.99 http://amzn.to/1a55L89