Your SlideShare is downloading. ×
Introduction tosinglepageapplications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction tosinglepageapplications

2,017
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,017
On Slideshare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The Trusted Technology Partner in Business Innovation PASSION  DISCIPLINE  INNOVATION  TEAMING  INTEGRITY
  • 2. INTRODUCTION TO SINGLE PAGE APPLICATIONS By Muhammad Nabeel November 20, 2012
  • 3. 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
  • 4. AGENDA• What is Single Page Application?• Key features• Pros and Cons• Developing a Single Page Application• Demo• Q &A
  • 5. 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
  • 6. 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.
  • 7. 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.
  • 8. PROS AND CONS
  • 9. PROS• Fluid UI – Means better user experience• More interactive – By the use of Async calls• Better for perceived performance• Separation of Concerns• Better for mobile apps• Offline story
  • 10. CONS• Complex architecture• Need better understanding of different JavaScript libraries• Special attention is needed for huge applications• Bad for Search Engine Optimization
  • 11. EXAMPLE OF SINGLE PAGE APPLICATIONS• Gmail• iCloud• www.morphix.si• http://fuelbrandinc.com• http://learn.knockoutjs.com/
  • 12. SINGLE PAGE APPLICATION - ARCHITECTURE
  • 13. DEVELOPING A SINGLE PAGE APPLICATION
  • 14. AVAILABLE PATTERNS AND FRAMEWORKS• HTML 5, WebAPI, Knockout and jQuery• Pager.js (http://oscar.finnsson.nu/pagerjs)• ScaleApp (http://scaleapp.org/)
  • 15. SINGLE PAGE APPLICATION – LIFE CYCLE
  • 16. LIBRARIES• KnockoutJS – For data binding.• upshotJS – For retrieving data from server and caching at client side.• Nav.js – For navigation and history management.
  • 17. SPA - BEST PRACTICES• Define Goal – Preplan the sequence of web site and what you want to achieve.• Start with establishing a file structure• Establish tools and libraries that are needed.• Develop the HTML and CSS before the JavaScript• Add JavaScript• Inspect the HTML• Add unit tests
  • 18. DEMORequirements• Visual Studio 2010+• ASP.NET MVC 4.0• Libraries
  • 19. 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.
  • 20. RESOURCES• Book – Single Page Web Applications by Josh C. Powell• http://knockoutjs.com• http://www.asp.net/single-page-application
  • 21. QUESTIONS AND ANSWERSmnabeelkhan.blogspot.com

×