Single page application

388 views

Published on

Presentation about Single Page Application

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
388
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Single page application

  1. 1. SINGLE PAGE APPLICATION ENG. ISMAIL ENJRENY
  2. 2. DEFINITION • IT IS WEB APPLICATION • FITS ON A SINGLE WEB PAGE • PROVIDING A MORE FLUID USER EXPERIENCE AKIN TO A DESKTOP APPLICATION
  3. 3. HOW • EITHER ALL NECESSARY CODE – HTML, JAVASCRIPT, AND CSS – IS RETRIEVED WITH A SINGLE PAGE LOAD • OR THE APPROPRIATE RESOURCES ARE DYNAMICALLY LOADED AND ADDED TO THE PAGE AS NECESSARY, USUALLY IN RESPONSE TO USER ACTIONS • THE PAGE DOES NOT RELOAD AT ANY POINT IN THE PROCESS, NOR DOES CONTROL TRANSFER TO ANOTHER PAGE
  4. 4. CHARACTERISTICS • CHUNKING: THE WEB PAGE IS CONSTRUCTED BY LOADING CHUNKS OF HTML FRAGMENTS AND JSON DATA • CONTROLLERS: JAVASCRIPT CODE THAT HANDLES COMPLEX DOM AND DATA MANIPULATIONS, APPLICATION LOGIC AND AJAX CALLS IS REPLACED BY CONTROLLERS THAT SEPARATE VIEWS AND MODELS USING MVC OR MVVM PATTERNS • TEMPLATING: CODING OF UI AND DOM MANIPULATIONS ARE REPLACED BY DECLARATIVE BINDING OF DATA TO HTML TEMPLATES
  5. 5. CHARACTERISTICS (CONT.) • ROUTING: SELECTION OF VIEWS AND NAVIGATION (WITHOUT PAGE RELOADS) THAT PRESERVES PAGE STATE, ELEMENTS AND DATA • REAL-TIME COMMUNICATION: TWO-WAY COMMUNICATION OF A CLIENT APPLICATION AND WEB SERVER REPLACES ONE-WAY REQUESTS FROM A BROWSER • LOCAL STORAGE: CAPABILITIES OF STORING DATA ON A BROWSER FOR PERFORMANCE AND OFFLINE ACCESS REPLACE COOKIES AND INTENSIVE DATA LOADS FROM WEB SERVER
  6. 6. FRAMEWORKS • ANGULARJS: HTTPS://ANGULARJS.ORG • THE YUI APP: HTTP://YUILIBRARY.COM/YUI/DOCS/APP/ • KNOCKOUT: HTTP://KNOCKOUTJS.COM
  7. 7. SERVER ARCHITECTURE • THIN SERVER ARCHITECTURE: A SPA MOVES LOGIC FROM THE SERVER TO THE CLIENT • THICK STATEFUL SERVER ARCHITECTURE: THE SERVER KEEPS THE NECESSARY STATE IN MEMORY OF THE CLIENT STATE OF THE PAGE • THICK STATELESS SERVER ARCHITECTURE: IS A VARIANT OF THE STATEFULL SERVER APPROACH. IN THIS CASE, THE CLIENT PAGE SENDS DATA REPRESENTING ITS CURRENT STATE TO THE SERVER, USUALLY THROUGH AJAX REQUESTS
  8. 8. CHALLENGES • SEARCH ENGINE OPTIMIZATION • CLIENT/SERVER CODE PARTITIONING • BROWSER HISTORY • ANALYTICS • GOOGLE ANALYTICS • SPEED OF INITIAL LOAD
  9. 9. NEXT?

×