Single page applications (SPAs) are web applications that load all necessary content at once so that subsequent page changes do not require additional page loads, providing a more fluid user experience similar to a desktop application. SPAs use a combination of HTML, CSS, and JavaScript and are commonly built using frameworks like AngularJS, Ember.js, and Durandal. This document provides an overview of SPAs and discusses development tools and techniques for building SPAs using ASP.NET and common JavaScript frameworks.

1. Single Page Applications
Rumesh Eranga
University of Colombo School of Computing

2. 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 site with the goal of providing
a more fluid user experience akin to a desktop
application.
Wikipedia
What is SPA???

3. Great user experience (speed)
Runs on any device
Can work offline
App-store deployable
Any benefits?

4. Gmail
http://www.hipmunk.com
Few Examples

5. Simple answer is NO
Single Page Applications are build using the
combination of HTML, JavaScript, CSS
SPA == Rocket Science ????

6. Major JS Frameworks used in SPA

8. Visual Studio 2012
Asp.Net and Web Tools 2012.2 Update
Can be installed using Microsoft Web Platform
Optional
Templates
Requirements

9. Provides a foundation for SPA Development
Most of the templates are created by the community
Answers “How do I get started?”
SPA Templates

10. Sample/Bare bone Template

11. Lets develop our first SPA with a sample provided by
the ASP team
Hello SPA Demo

12. Demonstration on how to create an SPA from Scratch
SPA from Scratch

13. Resources

14. Resources

15. Showing a view
Navigate from page to page
Load JS & HTML pages (on demand)
Listen for app life cycle events
UI Requirements for SPA

16. View & View Model composition
Dynamically load modules
App Life Cycle (Activation & deactivation of screens)
Async programming with Promises
Convention based (Customizable)
Core Durandal.js features

17. Lets dive into a bare bone template where we can
find many more functionalities of SPA
Using Hot Towel

18. CodeCamper by John Papa
https://github.com/johnpapa/CodeCamper
Another Sample App

19. Search engine optimization
Security vulnerability of breezejs/WebApi
http://stackoverflow.com/questions/13670948/isnt-it-
dangerous-to-have-query-information-in-javascript-
using-breezejs
http://stackoverflow.com/questions/13662496/how-is-
breeze-js-handling-security-and-avoiding-exposing-
business-logic
Downside of SPA

20. http://learn.knockoutjs.com/
http://learn.breezejs.com/
http://www.johnpapa.net/spa
http://omegacoder.com/?p=986
http://www.asp.net/single-page-application
http://singlepageappbook.com/
Learn More…

21. Email : rehrumesh@hotmail.com
rehrumesh@gmail.com
Skype : rehrumesh
Slideshare : http://www.slideshare.net/rehrumesh
Skydrive : http://sdrv.ms/137ivjT
Q/A