Introduction tosinglepageapplications

2,554 views
2,540 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,554
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction tosinglepageapplications

  1. 1. The Trusted Technology Partner in Business Innovation PASSION  DISCIPLINE  INNOVATION  TEAMING  INTEGRITY
  2. 2. INTRODUCTION TO SINGLE PAGE APPLICATIONS By Muhammad Nabeel November 20, 2012
  3. 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. 4. AGENDA• What is Single Page Application?• Key features• Pros and Cons• Developing a Single Page Application• Demo• Q &A
  5. 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. 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. 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. 8. PROS AND CONS
  9. 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. 10. CONS• Complex architecture• Need better understanding of different JavaScript libraries• Special attention is needed for huge applications• Bad for Search Engine Optimization
  11. 11. EXAMPLE OF SINGLE PAGE APPLICATIONS• Gmail• iCloud• www.morphix.si• http://fuelbrandinc.com• http://learn.knockoutjs.com/
  12. 12. SINGLE PAGE APPLICATION - ARCHITECTURE
  13. 13. DEVELOPING A SINGLE PAGE APPLICATION
  14. 14. AVAILABLE PATTERNS AND FRAMEWORKS• HTML 5, WebAPI, Knockout and jQuery• Pager.js (http://oscar.finnsson.nu/pagerjs)• ScaleApp (http://scaleapp.org/)
  15. 15. SINGLE PAGE APPLICATION – LIFE CYCLE
  16. 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. 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. 18. DEMORequirements• Visual Studio 2010+• ASP.NET MVC 4.0• Libraries
  19. 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. 20. RESOURCES• Book – Single Page Web Applications by Josh C. Powell• http://knockoutjs.com• http://www.asp.net/single-page-application
  21. 21. QUESTIONS AND ANSWERSmnabeelkhan.blogspot.com

×