Single Page Application

SPA
SINGLE-PAGE
APPLICATION
© 2009 IFS
1
By Isuru Madusanka

© 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

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

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.

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?

HIGH LEVEL PICTURE OF SPA
© 2009 IFS
6
Client side
routing
Client side
rendering
SINGLE PAGE
APPLICATION+

© 2009 IFS
7
© 2009 IFS
7
SPA Life Cycle
GET /?a=1&b=2 HTTP/1.1 musicList.html (template)
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
Muisc List.html(template)
Header + footer + app + Music List(template)
1
2

© 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

© 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

© 2009 IFS
10
Header + footer + app + Product List(rendered by JSON data)3
Now template is full with
Data to view

Powered by
© 2009 IFS
11
Can Load any contain
Without refreshing the
Whole page
Infinite scrolling
Push updates
Rest / JSON API

SERVER ARCHITECTURES FOR SPA
© 2009 IFS
12
• Thin server architecture
• Thick stateful server architecture
• Thick stateless server architecture

HIGH LEVEL PICTURE OF SPA
© 2009 IFS
13

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.

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.

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

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)

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.

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.

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.

Single Page Application

In this document