27.1.2014, Tampere. Perinteinen mobiilimaailma murroksessa. Petri Niemi: Single-Page Applications
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 639 views

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 ...

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?

Statistics

Views

Total Views
639
Views on SlideShare
639
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Single-Page Applications
  • 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 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 Multi-Page vs. Single-Page 1/2 • Examples of traditional multi-page web sites • tieturi.fi • iltalehti.fi • amazon.com • Examples of single-page web applications • Gmail • Hotmail • Twitter used to be an SPA, but they went multi-page due to performance reasons • https://blog.twitter.com/2012/improving-performance-on-twittercom Copyright © Tieturi Oy
  • 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 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 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 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 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 • https://developers.google.com/webmasters/ajax-crawling/ • 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 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 • http://caniuse.com/#feat=history • https://github.com/browserstate/history.js/wiki/The-State-of-the-HTML5-History-API Copyright © Tieturi Oy
  • 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 Thank You! Any Questions? http://www.tieturi.fi/web Helsinki, Tampere, Tukholma, Göteborg Copyright © Tieturi Oy