Living in 2022 means that we’re spending an average of 6 hours and 43 minutes a day online. What are we doing online?
We would be browsing the average of 130 websites per day.
Browsing got so easy and so fast – by just typing the URL and clicking enter – that 40% of Internet consumers would not wait more than 3 seconds for a web page to load. They would just exit. This explains why Single Page Applications, or SPA for short, are slowly but surely being normalized as the future of all websites.
Markets, companies, and developers from all over the globe are embarking on board for transforming the digital world’s front end into a Single Page Application. But, what are Single Page Applications? What are examples of Single Page Applications you visit everyday? How does their architecture work? And why are they so important?
This blog will answer all of these questions, so, follow along.
Single Page Applications Definition
Let’s start with defining a Multi Page Application, MPA, simply called a website. A website is a set of multiple web pages located under a single domain name, typically produced by a single person or organization.
Next, a web page is a hypertext document displayed on a browser that is identified by a unique uniform resource locator, URL. A web page is commonly written in HTML, styled in CSS, and sometimes in JavaScript.
For example, when you type in www.teckyou.com, you would be actually sending a request to your server for displaying the main web page of the TeckYou website. The server then sends the web page to your browser with all of its sections, text, multimedia features, and rich media. Voila.
During this operation, the web page would be loaded to your browser. That’s loading… the uncomfortable wait users hate. Which brings us to Single Page Application. In Single Page Applications, there’s no more loading. A Single Page Application is a website made of one, and only one web page to offer users a better experience akin to a desktop application.
Single Page Applications Architecture
You’re probably wondering how all information found on different web pages will fit on one page. You could be even worried by now about how much a Single Page Application would look crammed. To ease your confusion, you should know that a Single Page Application doesn’t practically add up the information of multiple web pages on a single web page.
What actually happens is that a Python or JavaScript framework would be responsible for writing, displaying, and changing the content on the single web page. One familiar example is the Gmail page where you can check your inbox, click on a selected email to read it, reply to it, forward it, schedule its sending time, and read another email all in the same mail.google.com page.
As you can see, the displayed content on your browser, or parts of the displayed content are removed and replaced without loading a different page. These changing structures are called Document Object Model or DOM manipulation.
You can compare the DOM manipulation to a real-life white board. You could always wipe the board clean and write whatever you want to again on the same board space. Unlike a paper notebook for instance. Once a paper page is filled with content, you have to start writing on a new page, and to read the old content again, you got to flip to the previous page.
Single Page Applications Pros
First and foremost, speed. Browsing through a Single Page Application website is way faster than a typical MPA because the whole loading process is canceled, as explained earlier. That’s why Single Page Applications websites are not labeled as a “website” anymore. Instead, they are considered as a “web application” for 2 reasons.
One, due to their high resemblance to desktop or mobile applications. And two, because they work by assembling data on different parts of a web page.
Second characteristic is the coding of the Single Page Application. SPAs’ coding totally separates between the frontend coding and the backend coding of the app. After coding them separately, the frontend and backend are linked using APIs. APIs are a sort of intermediary interface through which the front and end can communicate with each other.
Third, Single Page Applications drastically reduce the load exerted on the server. In a Single Page Application, clicking is not really requesting a complete web page. It’s just requesting a limited amount of data. Easy. No pressure.
Single Page Applications Using Python
To build a Single Page Application, a developer will need Django and a JavaScript framework. Django is a Python framework or Python library that will handle the backend of a SPA. JavaScript frameworks will then fetch the APIs for asynchronous communication between the backend and frontend. The most popular JavaScript frameworks include, but are not limited to, Angular, React, and VueJS.
Final tip for developers is to research the market and try for themselves when it comes to choosing the framework that best suits their work. When it comes to programming, there’s no right or wrong. There’s only trials on repeat. And it’s these trials that got us here in 2022, spending the quarter of our lives online.
