Introduction tosinglepageapplications

  • 1,865 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,865
On Slideshare
0
From Embeds
0
Number of Embeds
37

Actions

Shares
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