View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
The Trusted Technology Partner in Business Innovation PASSION DISCIPLINE INNOVATION TEAMING INTEGRITY
INTRODUCTION TO SINGLE PAGE APPLICATIONS By Muhammad Nabeel November 20, 2012
ABOUT ME• Sr. Consultant at Neudesic• More than 12 years of experience• Currently working on HTML5, Web API and jQuery• Blogs at mnabeelkhan.blogspot.com
AGENDA• What is Single Page Application?• Key features• Pros and Cons• Developing a Single Page Application• Demo• Q &A
WHAT IS SINGLE PAGE APPLICATIONRich and responsive web application that fits in a singlepage providing a fluid interface by loading all necessarycode with a single page load
TYPICAL WEB APPLICATION• Has multiple pages• Server is called multiple times during user interaction• Typically web applications does not have offline story.• Set established frameworks.
KEY FEATURES OF SINGLE PAGE APPLICATION• Fits on a single page• Maintains navigation history and deep linking• Persisting important state on the client• Fully* loads on initial page load• Using Asynchronous downloads of features if needed.
LIBRARIES• KnockoutJS – For data binding.• upshotJS – For retrieving data from server and caching at client side.• Nav.js – For navigation and history management.
DEMORequirements• Visual Studio 2010+• ASP.NET MVC 4.0• Libraries
DEVELOPMENT CONSIDERATIONDeveloping a huge single page application should be likedeveloping multiple small pages. That is the only way youllbe able to scale up and out the development.
RESOURCES• Book – Single Page Web Applications by Josh C. Powell• http://knockoutjs.com• http://www.asp.net/single-page-application