Difference between Single Page Application and Web Application.

Question

What are difference between Single Page Application and Web Application. What are advantages and disadvantages. When SPA should be used and when Web application should be used

Answer 1

See this answer. An overly simplified comparison, in terms of development effort, is

Multi page application:

1. User action embodied in HTTP request (e.g. HTTP POST, HTTP GET)
2. Request is handled, server responds with HTTP page

Drawbacks: requires many pages just to respond to every user action (e.g. add item to list, update form data), whereas in a SPA data binding can do much of the work of updating the view for you. Secondly, it's the responsibility of the web application to maintain state which is otherwise lost between full page requests. In contrast, the SPA can maintain its state in memory, between XHRs without additional work while the browser stays on the same page.

Single page application (SPA):

1. configure routing on both client and server side
2. code "controllers" on both client and server
3. initialize the framework on client
4. Handle user actions in JavaScript
5. Handle XHR request/response

These are just typical steps I've noticed in developing both single- and multi-page apps, and this doesn't necessarily or extensively represent all cases.

To develop SPAs, frameworks such as AngularJS are highly encouraged and highly opinionated, an advantage of which is guidance on structuring your client-side JavaScript.

Where multi page applications respond to user actions with full page loads, single page applications by definition are limited to 1 page (otherwise they'd be multi page) and instead rely on XHR.

Answer 2

From: Adam Freeman Book “Pro Angular 9.” :

For a long time, web apps were developed to follow a
( Round-Trip Model ).

• The browser requests an initial HTML document from the server.
• User interactions—such as clicking a link or submitting a form lead the browser to request and receive a completely new HTML document.
• The browser is essentially a rending engine for HTML content, and all of the application logic and data resides on the server.
• The browser makes a series of stateless HTTP requests that the server handles by generating HTML documents dynamically

A lot of current web development is still for round-trip applications, not least because they require little from the browser, which ensures the widest possible client support.
But there are some drawbacks to Round-Trip applications:

• they make the user, wait while the next HTML document is requested and loaded.
• they require a large server-side infrastructure to process all the requests and manage all the application state
• they require more bandwidth because each HTML document has to be self-contained (leading to a lot of the same content being included in each response from the server).

( Single-page applications ) take a different approach.

• An initial HTML document is sent to the browser
• user interactions lead to **Ajax requests for small fragments of HTML or data inserted into the existing set of elements being displayed to the user.
• The initial HTML document is never reloaded or replaced
• the user can continue to interact with the existing HTML while the Ajax requests are being performed asynchronously, even if that just means seeing a “data loading” message.**

Answer 3

(Single Page Application) SPA:

• Operates within a single web page.
• Loads resources upfront, updates content without full page reloads.
• Utilizes client-side routing and dynamic loading.
• Provides smoother user experience and interactivity.
• Built with front-end frameworks like React, Angular, Vue.js.

Web Application:

• Can consist of multiple interconnected web pages.
• Often involves full page reloads for interactions.
• Relies on server-side rendering and generates HTML on the server.
• Navigation driven by links and forms.
• Encompasses both SPAs and traditional multi-page apps.