by Akshay Agarwal
Photo by Glenn Carstens-Peters on Unsplash
When you click on your favourite youtube video or gaming website, what is actually happening? Is it just some designers who design the website to look attractive and appealing so that you want to use it? Well, no. While certain website editors such as Wix and Wordpress seem to give off that impression, when using those editors, you don’t really understand what’s going on in your website. Every website has its own architecture, and similar to a building, an understanding of the architecture is imperative to the designers and builders. A full-fledged website, one which can support your favourite video games and youtube videos, cannot be created without a complex architecture. So, in construction projects, the architect decides the materials and dimensions; what does the programmer choose for their own website architecture?
The basis of website architecture lies in the front-end and back-end. All other complexities to enhance the functionality of your website are simply extensions to the front-end and back-end frameworks (Hubspot, 2021). So what exactly are “front-end” and “back-end”? Front-end is the stereotype of making a website: all the designing, colors, fonts, etc. In technical terms, it is everything the user sees on the page. Back-end is everything that goes behind the scene-everything the user doesn’t see (Switchup, 2020). Before diving into how front-end and back-end systems interact with each other, let’s first see an example to understand the distinction between front-end and back-end. I’ll use something we’ve all relied on millions of times: Amazon.
Here is Amazon’s front page:
Let’s analyze the sections highlighted in red: the banner, the sign-in, and the cart. The first component of the webpage, the large blue banner, will be classified as front-end, as users are seeing it. On the other hand, the process of signing in is in the back-end framework of the web-application. Although you see the input bars to insert your username and password, the entire validation of your information cannot be seen; hence, the backend system. See if you can guess the systems the cart process is part of (it’s pretty tricky!)
In a cart, we can always see all the items in our cart at a particular point in time. Also, as opposed to the search bar and sign-in, there is no large database some piece of information needs to be derived from. The cart is seemingly a front-end process...but no. This is where the nuance of full-stack, or front-end and back-end, programming begins. The functionality of front-end and back-end systems comes through the idea of requests.
These two different ‘parts’ of a website lie on different servers, which means that the only way they communicate is through requests. Just as if you were to send an email to someone, the front-end sends a request to the back-end, and the back-end successively replies with whatever the front-end has asked for. In more technical language, the front-end sends a request containing a header for the type of request and it may also contain data to give to the back-end. The “header” shows what type of request the front-end is sending. While there are several different request types, the two prominent request types are GET and POST requests. The names essentially suggest what each type of request entails: GET requests try to GET information from the back-end while POST requests intend to POST data to the back-end server (Mozilla, 2021). In a standard web application, GET and POST requests will be used in a multitude of ways, making them essential for any aspiring website creator to understand. As the trend in this article, we’ll analyze the requests present in the Amazon website.
Firstly, prior to even utilizing any of the website features, typing Amazon.com in your search bar will send a GET request to the back-end server. At the time of hitting enter, your browser needs to GET the html website data from the back-end server, hence a GET request. From the previous example, we got stuck on how the cart system exactly operates; with requests, doing so is trivial. When the user hits a button to add an item to the cart, the front-end needs to send that information to the back-end. It therefore needs to POST the data to the back-end, so that the back-end could do the necessary actions: add it to a database, charge more to the credit card, etc.
There you go, the absolute basics of website architecture. With an understanding of the information presented in this article, you should easily be able to extend your horizons and add tools such as databases and sockets to your arsenal of knowledge. Hopefully, this article helped encourage you to give self-programming your website a try, even if you’re gonna have to spend a few more hours on your keyboard. And frankly, once you take the step to make a couple of websites on your own, you’ll begin to understand the limitations of ‘premade’ website alternatives. But more importantly, even if the convenience of Wordpress is critical, I hope this article helped you appreciate the beauty of website architecture.
Reference
HTTP request methods. (2019, March 23). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
SwitchUp. (2019). Backend vs. Frontend Development: Which Is Best? Switchup.org. https://www.switchup.org/blog/backend-vs-frontend
Chi, C. (n.d.). What Is Website Architecture? A 3-Minute Rundown. Blog.hubspot.com. https://blog.hubspot.com/marketing/website-architecture
Vasan Subramanian. (2019). Pro MERN stack: full stack web app development with Mongo, Express, React, and Node. Apress, New York, Ny.
Comments