Understanding Single Page Appliactions
An SPA is a way of building a web application. In a traditional application, the server returns an HTML response containing the page content. Visiting another page on the application requires an HTTP request to the server, which returns the HTML for the second page and any associated resources, such as the same JavaScript and CSS as the previous page. In an SPA, the page content is generated via JavaScript calling DOM functions directly (for example, document.createElement
), and links on the page simulate a new page load but don't result in an HTTP request to the server. Many well-known websites, such as Gmail, Facebook, and Twitter are single page applications.
The tradeoffs of SPAs
SPAs have advantages and disadvantages over conventional web applications; we will look at both here.
Advantages:
- Provides richer UI
- Easier to deal with client-side state and data
- Easier to deal with AJAX
- Faster client interactions once the page is loaded
Disadvantages...