Upload
rehrumesh
View
2.147
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
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 : [email protected]@gmail.com
Skype : rehrumesh
Slideshare : http://www.slideshare.net/rehrumesh
Skydrive : http://sdrv.ms/137ivjT
Q/A