M3- Single page applications (SPAs)

Question 1

What is a traditional website and how does it work?

Answer 1

A traditional website uses a multi-page architecture. Each time a user interacts with the site, such as clicking a link or submitting a form, the browser sends a request to the server. The server responds by sending back a completely new HTML page, which replaces the old one in the browser. This process can be resource-intensive because every user interaction requires the server to send the entire HTML document, along with all associated CSS, JavaScript, and images, resulting in slower load times and a less fluid user experience.

Question 2

What is a Single-Page Application (SPA) and how does it differ from a traditional website?

Answer 2

A Single-Page Application (SPA) is different from a traditional website in that it loads a single HTML page when you first visit the site. As you interact with the SPA, instead of loading new pages, it dynamically updates the existing page in the browser using JavaScript. The SPA only fetches the necessary data from the server, usually in the form of JSON, and uses it to update parts of the page. This results in a faster and more responsive user experience compared to traditional websites, which reload the entire page on each interaction.

Question 3

What is JSON?

Answer 3

In the context of Single-Page Applications (SPAs), JSON (JavaScript Object Notation) is a lightweight data format used to exchange data between the client (the user’s browser) and the server.

Question 4

How JSON is used in SPAs?

Answer 4

When an SPA needs to update part of the webpage based on user interaction, it sends a request to the server. Instead of sending back an entire HTML page (as in traditional websites), the server responds with a JSON object. This JSON object contains the data needed to update the relevant parts of the page.

Question 5

How is JSON more efficient?

Answer 5

JSON is more efficient than sending entire web pages because it only includes the necessary data, not the HTML structure, CSS, or other resources. This makes the data transfer faster and reduces the amount of data that needs to be processed by the browser.

Question 6

What are the advantages of using an SPA over a traditional website?

Answer 6

• Efficiency: SPAs only request and send the data needed to update the page, resulting in less bandwidth usage.
• Faster User Experience: SPAs don’t require full-page reloads, making interactions smoother and more responsive.
• Fluidity: Users don’t see a full-page refresh; instead, only the relevant parts of the page update, providing a more desktop-like experience.

Question 7

What are the two approaches to resource management in SPAs?

Answer 7

• Bundling: The server sends all the necessary HTML, CSS, and JavaScript to the browser in one go during the initial load. This is good for small or simple applications but can lead to longer load times if the application is large.
• Lazy Loading (Code Splitting): Only the essential resources needed to load the application are sent initially. As the user interacts with the app, additional resources are loaded as needed. This approach speeds up the initial load but might introduce slight delays when new resources are fetched on demand.

Question 8

When should you choose a traditional website over an SPA, or vice versa?

Answer 8

• Choose a traditional website if your site is simple, doesn’t require much interactivity, or if static content is sufficient. This approach is easier to build and maintain for straightforward use cases.
• Choose an SPA if your site is highly interactive, requires a seamless user experience, or if you want to reduce server load and bandwidth usage. SPAs are ideal for applications like social networks, messaging apps, or dashboards where frequent and varied user interactions occur.