21
Single Page Applications Rumesh Eranga University of Colombo School of Computing

Single page applications

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Single page applications

Single Page Applications

Rumesh ErangaUniversity of Colombo School of Computing

Page 2: Single page applications

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

Page 3: Single page applications

Great user experience (speed)

Runs on any device

Can work offline

App-store deployable

Any benefits?

Page 4: Single page applications

Gmail http://www.hipmunk.com

Few Examples

Page 5: Single page applications

Simple answer is NO

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

SPA == Rocket Science ????

Page 6: Single page applications

Major JS Frameworks used in SPA

Page 7: Single page applications
Page 9: Single page applications

Provides a foundation for SPA Development

Most of the templates are created by the community

Answers “How do I get started?”

SPA Templates

Page 10: Single page applications

Sample/Bare bone Template

Page 11: Single page applications

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

Hello SPA Demo

Page 12: Single page applications

Demonstration on how to create an SPA from Scratch

SPA from Scratch

Page 13: Single page applications

Resources

Page 14: Single page applications

Resources

Page 15: Single page applications

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

UI Requirements for SPA

Page 16: Single page applications

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

Page 17: Single page applications

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

Using Hot Towel

Page 18: Single page applications

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

Another Sample App

Page 19: Single page applications

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

Page 21: Single page applications

Email : [email protected]@gmail.com

Skype : rehrumesh

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

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

Q/A