Successfully reported this slideshow.

27.1.2014, Tampere. Perinteinen mobiilimaailma murroksessa. Petri Niemi: Single-Page Applications


Published on

Perinteisistä web-sivustoista kohti moderneja web-sovelluksia: mitä ovat niin sanotut ’single page applications’ ja mihin niitä käytetään? Entä miten taikasanat HTML5, AJAX ja HTTPRest liittyvät asiaan?

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

  • Be the first to like this

27.1.2014, Tampere. Perinteinen mobiilimaailma murroksessa. Petri Niemi: Single-Page Applications

  1. 1. Single-Page Applications
  2. 2. 2 Introduction • Petri Niemi, Tieturi Oy • Web stuff • Java stuff • Also a bit of mobile, C# and C++ stuff • Are you already familiar with single-page applications (SPA)? • Related Tieturi courses (for developers): • Pre-requisite: "Advanced JavaScript Programming" • Under construction: "Single-Page Applications Workshop" Copyright © Tieturi Oy
  3. 3. 3 Single-Page Application Wikipedia: "A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application." Copyright © Tieturi Oy
  4. 4. 4 Multi-Page vs. Single-Page 1/2 • Examples of traditional multi-page web sites • • • • Examples of single-page web applications • Gmail • Hotmail • Twitter used to be an SPA, but they went multi-page due to performance reasons • Copyright © Tieturi Oy
  5. 5. 5 Multi-Page vs. Single-Page 2/2 • Main difference is in the way content is loaded and rendered • Example: user navigating from index.html to e.g. the news section of the page/app • Multi-page: index.html  news.html • Full reload incl. HTML, CSS, JavaScript, images, … • Note that the page changes to news.html, constructed by the server • Single-page: index.html  index.html/#news • Only load the content that changes (using e.g. AJAX/JSON) • Use JavaScript to modify the current page's content accordingly • Page always remains index.html, constructed by the client Copyright © Tieturi Oy
  6. 6. 6 Hashbang (#) URLs • A way to keep track of navigation history without causing a full page reload • Example: navigating from index.html to index.html/#news • Does not cause a round-trip to the server • The portion of the URL after # is never sent to the server • You can react to the hash change in JavaScript • E.g. fetch new data and update (part of) the page yourself • What if the user has JavaScript disabled in the browser? Copyright © Tieturi Oy
  7. 7. 7 Cross-Platform HTML 5 SPAs • SPAs enable cross-platform mobile applications – in theory, at least… • Still lack some capabilities compared to native applications • PhoneGap is a popular solution to this • However, "Vast majority of PhoneGap developers use it solely for cross-platform publishing purposes, they do not need the device API access it provides" • Performance is still also worse than in native apps Copyright © Tieturi Oy
  8. 8. 8 Pros of SPAs • Improved user experience (UX) • Similar to native applications • Animations, user interaction • Faster navigation from one page to another • Less data to transfer after initial page load • The initial load might actually be slower (the Twitter problem) • Very important especially on mobile • Thick clients take part of the work load from the server • It's distributed computing again! • Servers can become dumber, all they need to do is to provide the data (AJAX, HTTPRest, JSON) • Light-weight server technologies on the rise: node.js, for example Copyright © Tieturi Oy
  9. 9. 9 Cons of SPAs • Thicker clients require (much) more JavaScript • JavaScript is DIFFICULT (testing, productivity, …)! • How to pick the right helper libraries (gazillion options available)? • You must implement low-level stuff yourself on the client • E.g. page navigation (the back button) • SPAs are not automatically search-engine friendly • Due to hashbang URLs and JavaScript generating page content • • Analytics is also an issue • Server does not know what kind of errors happen on the client-side • The server is dumb, remember? Copyright © Tieturi Oy
  10. 10. 10 HTML5 History API • Will be a cleaner solution to the hashbang URLs we see today • Allows you to manipulate the URL and navigation history stack without causing a page reload • The URL will be a "proper" URL without hashbangs • Allows a web app to be treated as a traditional web page and a single page app at the same time • Browser support not quite there yet • Implementations are incoherent! • IE 9 and older + some older mobile browsers have no support at all • • Copyright © Tieturi Oy
  11. 11. 11 Conclusions • Single-page applications are not a one-size-fits-all-solution • Think about the pros and cons – which matter more in your case? • When done right, SPAs provide a much better user experience • • • • Especially on mobile clients You will need to know your JavaScript(!) You might need to limit your supported browsers list You might need to figure out how to speed up the initial page load Copyright © Tieturi Oy
  12. 12. 12 Thank You! Any Questions? Helsinki, Tampere, Tukholma, Göteborg Copyright © Tieturi Oy