Single page applications

Single Page Applications

Rumesh ErangaUniversity of Colombo School of Computing

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

Great user experience (speed)

Runs on any device

Can work offline

App-store deployable

Any benefits?

Gmail http://www.hipmunk.com

Few Examples

Simple answer is NO

Single Page Applications are build using the combination of HTML, JavaScript, CSS

SPA == Rocket Science ????

Major JS Frameworks used in SPA

Visual Studio 2012

Asp.Net and Web Tools 2012.2 Update Can be installed using Microsoft Web Platform

Optional Templates

Requirements

Provides a foundation for SPA Development

Most of the templates are created by the community

Answers “How do I get started?”

SPA Templates

Sample/Bare bone Template

Lets develop our first SPA with a sample provided by the ASP team

Hello SPA Demo

Demonstration on how to create an SPA from Scratch

SPA from Scratch

Resources

Resources

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

UI Requirements for SPA

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

Lets dive into a bare bone template where we can find many more functionalities of SPA

Using Hot Towel

CodeCamper by John Papa https://github.com/johnpapa/CodeCamper

Another Sample App

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

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…

Email : rehrumesh@hotmail.comrehrumesh@gmail.com

Skype : rehrumesh

Slideshare : http://www.slideshare.net/rehrumesh

Skydrive : http://sdrv.ms/137ivjT

Q/A