Single Page Application

494 views

Published on

This presentation contains details about single page application and why they important than traditional systems.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
494
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
50
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • As is just like a cast but when failed will return a null reference
  • Single Page Application

    1. 1. SPA SINGLE-PAGE APPLICATION © 2009 IFS 1 By Isuru Madusanka
    2. 2. © 2009 IFS 2 Traditional Life Cycle Of a Page GET /?a=1&b=2 HTTP/1.1 musicList.html HTTP 1.1 200K content html/text Header + Footer + music List + All Images After refreshing Whole document Processing The requested document
    3. 3. PROBLEMS OF TRADITIONAL APPROACH © 2009 IFS 3 CLIENT SIDE: • A load entire page every time make a request to the server. • User have to wait until all documents downloaded from the server (HTML + JS+ CSS + IMAGES). • After download the content document has to be rendered again from the beginning in the client device. • No business logic inside the front end (client-side). • No MVC model in client side. • If network lost interaction with application will be terminated. • No real time update data with server. © 2009 IFS 3
    4. 4. PROBLEMS OF TRADITIONAL APPROACH © 2009 IFS 4 SERVER SIDE: • Have to render page from the beginning for every request made by clients. • Consume huge network bandwidth unnecessary to upload same whole documents over and over again. • Duplication of code in server side. • Every computations have to done in the server. • If moving back end to other technology have to rewrite all page rendering codes ones again from scratch.
    5. 5. SINGLE PAGE APPLICATION IS A WEB APP IN WHICH THE MAJORITY OF INTERACTION ARE HANDLED ON THE CLIENT WITHOUT THE NEED TO REACH A SERVER, WITH A GOAL OF PROVIDING A MORE FLUID USER EXPERIENCE. © 2009 IFS 5 HOW SPA SOLVE THE PROBLEM?
    6. 6. HIGH LEVEL PICTURE OF SPA © 2009 IFS 6 Client side routing Client side rendering SINGLE PAGE APPLICATION+
    7. 7. © 2009 IFS 7 © 2009 IFS 7 SPA Life Cycle GET /?a=1&b=2 HTTP/1.1 musicList.html (template) HTTP 1.1 200K content html/text Header + Footer + JS app + CSS Processing The requested document JS app run and request Index page Header + footer + app Processing The requested document GET /?a=1&b=2 HTTP/1.1 initial page HTTP 1.1 200K content html/text Muisc List.html(template) Header + footer + app + Music List(template) 1 2
    8. 8. © 2009 IFS 8 1 Header + Footer + JS app + CSS Header + footer + app + Music List(template) General Area which Load template From the Web app Music List template Load from the Web application But no data to display 2
    9. 9. © 2009 IFS 9 SPA Life Cycle continue … JS app run and ask data form server API getMusicList() render template From JSON data after received it Processing The requested document Header + footer + app + Product List(rendered by JSON data) POST /request HTTP/1.1 Accept: application/jsonrequest HTTP 1.1 200K content application/json {“pId":“iPhone",“price":7500.0,“type":“smart","zip":94089 } getProductList() Final output 3
    10. 10. © 2009 IFS 10 Header + footer + app + Product List(rendered by JSON data)3 Now template is full with Data to view
    11. 11. Powered by © 2009 IFS 11 Can Load any contain Without refreshing the Whole page Infinite scrolling Push updates Rest / JSON API
    12. 12. SERVER ARCHITECTURES FOR SPA © 2009 IFS 12 • Thin server architecture • Thick stateful server architecture • Thick stateless server architecture
    13. 13. HIGH LEVEL PICTURE OF SPA © 2009 IFS 13
    14. 14. ADVANTAGES OF USING SPA © 2009 IFS 14 CLIENT SIDE • “Application like” interaction • Back/Forward Button works as expected • More JavaScript than actual HTML • Ability to go offline • Dynamic data loading from the server-side API, Works with Restful Web services • Fluid transitions between page states, Richer Interaction between UI Components. • Markup, CSS and JS required for the application sent with the initial request • Page changes occur via JavaScript using Templates and DOM manipulation • URL hashes are used to track state and provide bookmark able links.
    15. 15. SPA CORE BENEFITS © 2009 IFS 15 PERFORMANCE IMPROVEMENT • Load time: 1 file each of HTML, CSS, JS • Static files not dynamic • Less data transfer: XHR calls only send • Raw data, not HTML markup • Load distribution: Less load on the server by distributing it to clients • Can use local storage and caching to decrease amount of network traffic.
    16. 16. BUSINESS USAGE OF SPA © 2009 IFS 16 EXAMPLES • Create “App-like user experience” • Bind to your own(or 3rd party) RESTful API • Build Hybrid(native) HTML5 applications • Mobile version of your web site
    17. 17. JAVASCRIPT FRAMEWORKS SUPPORT SPA © 2009 IFS 17
    18. 18. FEATURES SUPPORTED BY SPA FRAMEWORK © 2009 IFS 18 • Client-Side Templates (Data binding) • Chunking • Controllers • Routing • Real-time communication • Local storage • AJAX • Data transport (XML, JSON and AJAX)
    19. 19. HYBRID MOBILE APPLICATIONS SPA MOBILE FRAM © 2009 IFS 19
    20. 20. CLOUD COMPUTING WITH INTEGRATE WITH SPA? © 2009 IFS 20 SPA application will deploy in there
    21. 21. WEB OPERATING SYSTEMS EXIST IN TODAY USING © 2009 IFS 21 FIREFOX OS Mozilla's attempt to create their own operating system hence the result is Firefox OS. It's based on the Firefox browser and the Gecko rendering engine. Each app using web technologies HTML5, CSS3 and JS and using connect SPA. Those applications some of reside their user data and application on the cloud. This more similar to Chrome OS develop which by Google.
    22. 22. WEB OPERATING SYSTEMS EXIST IN TODAY USING © 2009 IFS 22 CHROME OS One of the famous cloud base operating system ins Google chrome OS (fork of the chromium OS project). Google announced Chrome OS on July 7, 2009 describing as an operating arrangement in which both application and user data reside in the cloud. This OS capable to deal with cloud applications(SPA) using SPA. Google also design special hardware for the run Chrome OS.
    23. 23. ADVANTAGES AND DISADVANTAGES © 2009 IFS 23 OF USING SPA CONCEPT Disadvantage • Client must enable JavaScript, Single Page Application build with JavaScript, So JavaScript should be enabled in client browser. JavaScript enabled in all modern browsers by default. • Security: Compare to traditional page Single Page Application is less secure due to Cross-site scripting (XSS). • Memory Leak: Memory leak in JavaScript can even cause powerful system to slow down. Advantages • Single Page Application is good for making Responsive Websites, Support mobile, Tablet & Desktop. • No extra queries to the server to download pages. • User friendly. • Performance Improvement, Single Page Application can improve performance in many ways, Single time file load each of HTML, CSS, JS.
    24. 24. www.IFSWORLD.com © 2009 IFS 24

    ×