Single page applications the basics

Single page applications the basics

• 1.
  Single Page Applications:The Basics Concepts, Gotchas and Just Things You Need To Know
• 2.
  High Performance SinglePage 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 aSPA? • 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 aSPA? • Single Page Applications have become a must do approach as more and more end users utilize mobile class computers.
• 5.
  What is aSPA? • The modern web client requires a different approach, a user first approach.
• 6.
  SPA Fundamentals • NotMeant 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 ModernBrowsers? • The APIs, performance and many features modern browsers offer were not implemented in legacy browsers.
• 8.
  Early Feature Detectionto ‘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 Heckis 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 URLto 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 toGet 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 • Exchangingviews 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 ViewTransitions • 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! • ResponsiveDesign • Touch • Mobile First • SPA • Extensible, Scalable Architecture • Web Build and Workflow • Goes Really Fast! • ~395 Pages • 20 Chapters • $9.99 http://amzn.to/1a55L89