Single page applications
-
Upload
rehrumesh -
Category
Technology
-
view
2.147 -
download
1
description
Transcript of Single page applications
![Page 1: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/1.jpg)
Single Page Applications
Rumesh ErangaUniversity of Colombo School of Computing
![Page 2: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/3.jpg)
Great user experience (speed)
Runs on any device
Can work offline
App-store deployable
Any benefits?
![Page 4: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/4.jpg)
Gmail http://www.hipmunk.com
Few Examples
![Page 5: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/5.jpg)
Simple answer is NO
Single Page Applications are build using the combination of HTML, JavaScript, CSS
SPA == Rocket Science ????
![Page 6: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/6.jpg)
Major JS Frameworks used in SPA
![Page 7: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/7.jpg)
![Page 8: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/8.jpg)
Visual Studio 2012
Asp.Net and Web Tools 2012.2 Update Can be installed using Microsoft Web Platform
Optional Templates
Requirements
![Page 9: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/9.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/10.jpg)
Sample/Bare bone Template
![Page 11: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/11.jpg)
Lets develop our first SPA with a sample provided by the ASP team
Hello SPA Demo
![Page 12: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/12.jpg)
Demonstration on how to create an SPA from Scratch
SPA from Scratch
![Page 13: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/13.jpg)
Resources
![Page 14: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/14.jpg)
Resources
![Page 15: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/16.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/17.jpg)
Lets dive into a bare bone template where we can find many more functionalities of SPA
Using Hot Towel
![Page 18: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/18.jpg)
CodeCamper by John Papa https://github.com/johnpapa/CodeCamper
Another Sample App
![Page 19: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/19.jpg)
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 20: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/20.jpg)
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…
![Page 21: Single page applications](https://reader034.fdocuments.us/reader034/viewer/2022051609/547087aeb4af9fc80a8b47b1/html5/thumbnails/21.jpg)
Email : [email protected]@gmail.com
Skype : rehrumesh
Slideshare : http://www.slideshare.net/rehrumesh
Skydrive : http://sdrv.ms/137ivjT
Q/A