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?

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