Single-Page Applications

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

2

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

3

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

4

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

5

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

6

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

7

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

8

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

9

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

10

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

11

Helsinki, Tampere, Tukholma, Göteborg

Thank You!

Any Questions?

Copyright © Tieturi Oy

12

http://www.tieturi.fi/web