This document provides an overview of single page applications (SPAs) including: - An introduction to SPAs and their goals of providing a more responsive user experience similar to desktop applications. - Key characteristics of SPAs like more responsive UIs, ability to work offline, and less data traffic. - A brief history noting the coining of the term "single page application" in 2005 and early examples from 2002-2003. - Common techniques in SPAs like DOM manipulation, managing application state and data, and module composition. - Challenges in SPAs like managing the browser back button and integration with analytics. - Specific libraries and frameworks mentioned that can be used to implement features in SPAs.

1. Single Page Applications
ronald@nforza.nl
@ronaldhamsen

2. •
•
•
•
13:00 – 14:15 Introduction SPA
14:15 – 15:30 Break
15:30 – 15:45 Practice!
15:45 – 16:00 Q&A

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

5. • More responsive UI / UX
• “Application like” interaction
• Distributed computing (offloading rendering
tasks to the client)
• Ability to go offline
• Less data traffic
• Back/forward button work as expected?

6. 2005 - The term single-page application was
coined by Steve Yen
2003 – Article: Inner-browsing extending the
browser navigation paradigm (MDN)
2002 - Self-Contained website at
http://slashdotslash.com with the same goals
and functions (Stuart Morris)

7. • DOM manipulation:
Viewmanagement, Templating
• Managing state
• Databinding
• Data-access / Calling services
• Modules and application composition
• Testing

8. • Showing and hiding elements (views)
• Templating
EJS
}
Hogan.js

9. • Originally managed by page (url)
• Backbutton in browser?
• Integration with google analytics?
• How to handle in SPA?
• But also: credentials, sessions etc.

10. • <url>/#somestate -> <url>#somesecondstate
window.onhashchange = function () {
// do something
}
• window.location.hash (beware ie6 and 7)
• jquery.hashchange.js (Ben Alman)

11. •
•
•
•
•
window.history.back()
window.history.forward()
window.history.pushState(stateObj,title,url)
window.history.replaceState(stateObj, title, url)
window.onpopstate
gives back state on page back/forward
jquery.pathchange.js

14. • Dependencies in code on frameworks

17. http://www.sidewaffle.com
+ take a look at hot towel by John Papa

18. http://yeoman.io

20. Ideas:
“Build a simple time tracking app.
Date, description, number of hours”
“Create a simple CRM simpel. Contacts, history
of events per contact.”
Tips:
Use bootstrap! http://getbootstrap.com
Choose a framework:
Durandal or Angular, or start with jQuery.
Focus on front-end, never mind the database,
rest-services etc.