Presentation about Single Page Application

1. SINGLE PAGE APPLICATION
ENG. ISMAIL ENJRENY

2. DEFINITION
• IT IS WEB APPLICATION
• FITS ON A SINGLE WEB PAGE
• PROVIDING A MORE FLUID USER EXPERIENCE AKIN TO A DESKTOP APPLICATION

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. 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. 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. FRAMEWORKS
• ANGULARJS: HTTPS://ANGULARJS.ORG
• THE YUI APP: HTTP://YUILIBRARY.COM/YUI/DOCS/APP/
• KNOCKOUT: HTTP://KNOCKOUTJS.COM

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. CHALLENGES
• SEARCH ENGINE OPTIMIZATION
• CLIENT/SERVER CODE PARTITIONING
• BROWSER HISTORY
• ANALYTICS
• GOOGLE ANALYTICS
• SPEED OF INITIAL LOAD

9. NEXT?