Scribd
Upload
6 views18 pages

Single Page Applications

A Single Page Application (SPA) is a web solution that allows users to interact with a single page without reloading, enhancing mobile experience and speed. SPAs utilize AJAX technology for seamless content updates and are suitable for dynamic platforms, social networks, and applications requiring live updates. However, they face challenges like poor SEO performance and vulnerability to online threats compared to Multi Page Applications (MPAs).

Uploaded by

lukekang9875
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views18 pages

Single Page Applications

A Single Page Application (SPA) is a web solution that allows users to interact with a single page without reloading, enhancing mobile experience and speed. SPAs utilize AJAX technology for seamless content updates and are suitable for dynamic platforms, social networks, and applications requiring live updates. However, they face challenges like poor SEO performance and vulnerability to online threats compared to Multi Page Applications (MPAs).

Uploaded by

lukekang9875
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Single Page Application

Chapter 5

April 20, 2025


Single Page Application
• What is a single page application?
• SPA versus MPA: difference between single page and typical website
• SPA: the good an bad
• Which projects are SPAs good for?
• How to build a single page application?
What is single page application? (1)
• Single Page Application is website or app that only one page containing
content. Clicking on certain buttons, tabs or links doesn’t force the page
to reload. Only the requested content is changed
• A single page application, or SPA, is a web solution that directly
renders JS code in a browser without requiring the user to reload the
page at any point.
What is single page application? (2)
• Its primary objective is to optimize the mobile experience; SPA does this
by generating a native-like experience right inside the user's mobile
browser. After opening the page for the very first time, all the data is
loaded automatically.
Multi Page Application
• Multi-page websites typically load completely new pages in response to
user actions such as clicking on certain buttons, tabs or links. The user is
therefore required to wait for the page to load even though the majority
of the page's content is still the same.
Single page application (SPA) versus Multi page application
(MPA) (1)
• Users in MPAs alternate between different pages to access the
desired content. However, in SPAs, users are sent to many states of
the same page.
• In an SPA, clicking a link or button won't cause the page to reload.
The browser only displays a certain state of the page, and when
prompted, only the requested content is changed. The rest is
unchanged.
Single page application (SPA) versus Multi page application
(MPA) (2)
• SPA uses AJAX technology. AJAX, which allows the client to
communicate with the server without reloading the page. SPA sends
an AJAX request to the server, gets JSON data back from the server
and renders certain parts of the web page directly in the browser.
• For Example: Gmail, Trello or even your Facebook newsfeed are
examples of SPA
Single page application (SPA) versus Multi page application
(MPA) (3)
SPA MPA

Initial load takes longer than in case of MPAs, but further


Speed Loads slower and reloads each time when the user clicks on any button
usage of the app is seamless and faster

Prone to hackers’ attacks, however, security can be improved


Security Require a thorough approach to protect each separate page of the website
with the right approach

Reusable back-end code and completely separated back-end


Development process Numerous dependencies between front-end and back-end
and front-end development

Are present so depending on the type and version of a


JavaScript dependencies No JS dependencies
browser, problems may occur with an initial load

One single link to the entire app, however, deep linking allows
Link sharing A separate link for every page of the MPA
linking to a specific piece of content

User experience Responsive, uninterrupted and mobile-friendly Better information architecture

Examples Gmail, Google Maps, Trello etc Forbes, CNN etc


How does a Single Page Application Work? (1)

• image from source https://www.monocubed.com/blog/what-is-single-


page-application/
How does a Single Page Application Work? (2)
• The architecture of a one page application is rather simple.
• As shown in the figure above, and it includes server-side and client-side
technologies.
Pros of the Single Page Application (1):
• Better speed: Web applications must offer faster speed and not waste
users’ time; otherwise, users can find other efficient venues. SPAs
provide shorter response times as the entire page doesn’t have to reload
and only the data changes in the requested content parts. Thus, the web
app’s speed improves considerably.
• Enhanced user experience :with SPAs, users don’t have to wait again to
reload the full content only to gain a portion of it. Instead, they can gain
the requested information faster, which improves their experience using
a SPA.
Pros of the Single Page Application (2):
• Efficient caching: A Single Page App can cache data efficiently as it
sends a request to a server for one time only and then updates the other
data.
• Simplified development: Developing a SPA is easier as the developers
don’t need to spend more time writing code and rendering the web pages
on a server. Instead, they can reuse the server-side code and decouple the
SPA from the frontend user interface. It implies that frontend and
backend teams can concentrate on their jobs without worries.
Pros of the Single Page Application (3):
• Easy to Debug: Single Page Applications are easy to debug with Google
Chrome as they are built using popular frameworks like React, Angular,
Vue.js, etc. You can easily monitor and investigate page elements, data,
and network operations.
• Less resource consumption: Single Page Apps consume less bandwidth
as they load the pages just once. They also work in areas with a slower
internet connection, hence, convenient to use for everyone. Besides, they
work offline, saving your data, so you don’t have to supply them with
consistent internet to access and work on them, unlike MPAs like Google
Docs.
Pros of the Single Page Application (4):
• Cross-platform compatibility: Developers can build applications that can
run on any operating system, device, and browser easily using a single
codebase. Hence, it adds to customer experience as well because they can
use the SPA anywhere they want.
Cons of the Single Page Application (1):
• Poor SEO performance :The SPAs architecture involves just a single page
with a single URL. It limits the SPAs’ ability to benefit from search engine
optimization (SEO). SEO techniques help improve your site’s ranking in
the search engine results, as there’s high competition out there.

• Initial load times: Although SPAs are praised for showcasing great
performance and speed, it takes a while to load the complete site. It may
irritate some users who may not open the app again.
Cons of the Single Page Application (2):
• Online threats: SPAs are more vulnerable to online threats such as cross-
site scripting (XSS) than MPAs. Attackers can utilize XSS to inject client
side scripts into a web app and compromise it. In addition, access control is
not tight at the operational level. It can expose sensitive data and functions
if the developers don’t take precautions.
• Browser history: SPAs don’t store browser history. If you check the
history for any valuable data, you only see the SPA’s link to the entire
website. Also, you can’t move back and forth in the SPA. However, this
drawback can be neutralized by using the HTML5 History API.
When should you use SPAs? (1)
• SPAs come with a lot of benefits but also drawbacks, as you saw in the
previous section. So, it’s not wise to say that it’s entirely good or bad. It
depends upon your requirements and goals to create an application.
• If you want to build a website with smaller data volumes and a dynamic
platform, you can use single-page applications.
• It’s also fruitful if you plan to build a mobile application in the future, you
can use the backend API for both your site and mobile app.
• Choose SPAs if you want to offer a native-like, consistent, and dynamic
user experience across different operating systems, browsers, and devices.
When should you use SPAs?
• SPAs architecture is also suitable to build social networks (for instance,
Facebook), closed communities, and SaaS platforms as they don’t need
much SEO.
• If you wish to offer a seamless user interaction in your application, go for a
SPA. Single Page Apps like Google Maps use this approach to provide live
changes when users move from one place to another.
• SPAs are also great if you want to offer live updates on your application for
purposes like data streaming, real-time charts, notifications, alerts, etc.

You might also like