The internet has become quite the force in the modern age. While this holds true in more ways than one, its bread and butter is undoubtably the website. So easy it is to take for granted the dynamism of the sites we use every day, but an enormous amount of progress has been made since the days of static webpages. A static webpage means that each time a change should be made, likely due to user interaction, a brand new page must replace the current one. Each page is contained as its own file, which holds the code to display that one page; and it will display it exactly as said code dictates. If you were to click a link, the code for the linked page would then be rendered to the screen. Etc., etc. This actually makes static webpages very secure, since there are little or no external dependencies, however the ‘pros’ list is vastly outweighed by just the first entry on the ‘cons’ list. Can you guess it? You’re correct! The main issue is that this is a super slow method of ‘internetting’. And in steps the web application…
Web Application Architecture
In the simplest of terms, a web application can be thought of as a normal computer application, that works over the internet. Certain principles were established in order to optimize web applications, and various architectural styles were also created to serve different webpages’ needs. These principles and styles were combined to form the slightly vague catch-all term of “Web Application Architecture.” At its most basic of meanings, web application architecture refers to the “interactions between applications, databases, and middleware systems on the web.” ¹
Following the usual HTTP request sent by your browser, when visiting a website, your browser will execute the code contained in those pages’ files, ultimately rendering the requested page to the screen. The browser knows how to display the page, because it parses the code it receives. This code may, or may not, have instructions regarding how it should react to different inputs the user might make. Due to this, web app architecture must include anything and everything it would need in order to function dynamically. In other words, “a web application architecture has to not only deal with efficiency, but also with reliability, scalability, security, and robustness.” ¹
HTTP requests involve two parties which must work together to make web applications possible. They are called the client-side and the server-side. The server-side code is built using one or a combination of programming languages such as Java, NodeJS, PHP, Python, etc. This component is broken down into two or more parts. The control center for the web app, otherwise known as the ‘app logic’, as well as a database that will store all persistent data, such as a user profiles.
The client-side code is responsible for the code that changes the webpage based on user input. It can only communicate with the server through the HTTP requests it sends, and will never have access (read or write) to the files stored in the server. Client side code is built with CSS, HTML, and Javascript. It is the look, feel, and functionality of the website which will dynamically update based on the end-user inputs. A single web application can utilize multiple server components and databases.
Types of Web Application Architecture
Legacy HTML Web Application
This type of architecture is another term for the static webpage as described above. It is slow and lumbering, not to mention lacking in any ability to update dynamically. The slower speed is due to the need for a brand new HTTP request whenever the user tries to display a different page of the website. It is however highly secure since all the data is stored on the server, and user does not have direct access to it.
Microservices
This is the practice of using smaller individual services to run a website. Each service is responsible for executing one single function. This technique makes it so that the components of the web app are not directly dependent on one another. Because the components are more self reliant, different parts of the app can be written in different programming languages.
Single Page Applications (SPAs)
SPAs are based on a single webpage which can update dynamically when necessary, as opposed to needing to load a new page. Changing and maintaining a single page in this way creates a more seamless and fluid experience for the user. SPAs would not be possible without the existence of AJAX.
Serverless Architecture
This just means that the application developer outsources their server needs, thus simplifying both the app creation process and allows them to need not worry about server maintenance.
References[1] Banga, Swapnil, et al. “What Is Web Application Architecture? Components, Models, and Types.” Hackr.Io, 16 June 2020, hackr.io/blog/web-application-architecture-definition-models-types-and-more.
Further Reading- Banga, Swapnil, et al. “What Is Web Application Architecture? Components, Models, and Types.” Hackr.Io, 16 June 2020, hackr.io/blog/web-application-architecture-definition-models-types-and-more.- Fulton, Jonathan. “Web Architecture 101 - Storyblocks Product & Engineering.” Medium, 13 Dec. 2018, engineering.videoblocks.com/web-architecture-101-a3224e126947.- Inc, AltexSoft. “Web Application Architecture: How the Web Works - The Startup.” Medium, 26 Sept. 2019, medium.com/swlh/web-application-architecture-how-the-web-works-d6c48171b244.- Yaskevich, Anastasia. “Web Application Architecture: Components, Models and Types.” ScienceSoft, 21 Oct. 2020, www.scnsoft.com/blog/web-application-architecture.
