【My Study Note】SPAs (Single Page Applications)
Contents
- 1. How traditional Website works
- 2. What is SPA?
- 3. Approaches to serve code and resources in SPA
- 4. Additional Infos about SPA
How traditional Website works
In traditional websites, most websites were implemented as multi-page Applications
What’s the problem with multi-page applications?
This makes traditional applications resource intensive to web servers because sending entire web pages for every request consumes excessive bandwidth and it takes time to generate dynamic pages for every single time.
What’s the result
If your website is complex, the site browsing experience may appear slow to users. It will be even slower if they have a poor or limited internet connection.
What is SPA?
SPA (Single Page Application) doesn’t mean the website has only one page of content.
What it actually means is that there’s only one HTML page that gets sent from the server to the browser, but the page will update its content as users interact with the website.
A SPA allows the user to interact with the website without the application needing to download entire new web pages. Instead, it rewrites the current web page as the user interacts with it.
What’s the result
The result is a browsing experience that feels faster and more responsive to user input. When the user navigates to the web application in the browser, the web server returns the necessary resources to run the application.
Approaches to serve code and resources in SPA
- Bundling
- Lazy Loading (Code Splitting)
Bundling
With bundling, when the browser requests the application, the server returns and loads all necessary HTML, CSS, and JavaScript immediately.
That’s why, it might take more time to download if the application is complex and has a lot of resources.
Lazy Loading (Code Splitting)
With lazy loading, the browser requests the application and the server returns only the minimum HTML, CSS, and JavaScript needed to load the application. And additional resources are downloaded as required.
Additional Infos about SPA
1. JSON (JavaScript Object Notation) object
When the browser sends a post request to the web server, they will return a JSON object.
Then the application reads the object and updates by displaying the updated part. That’s more efficient because the rest of the page remains as it was and its whole content doesn’t need to be sent by the server and rendered by the browser.
2. Templates (Views) — still not understanding completely
When the web application has more than 1 page, different pages are broken into templates, also known as views. Each view will have HTML code that can be updated by the application.
When the web browser sends the request to the web server, and the JSON object sends back from the web server, it contains only the data to be displayed, such as the user’s first name and last name, and the SPA will update the HTML.
This is much smaller than sending an entire web page. The web browser then updates the web page by inserting the template with items replaced by the values in the JSON object.