Website Front End Performance Testing Series - Part 2 - What is the Front End of a Website?

At the beginning of the month of April 2014, I started writing this article series named Website Front End Performance Testing. As I mentioned in the Part 1, this series contains dozen of articles which covers web application or website front end performance testing from basics to advanced concepts. This is the second part of WFEPT article series and we cover up separating frontend of a web application within this part. 

Backend Vs. Frontend

When I was starting my career as a Product Performance Engineer, I had this mess in my mind about how to separate backend and frontend of a software product for performance testing. I had to went through several article readings to resolve that mess about backend vs. frontend.

At the end of the day, I understood that, separation of backend and frontend of a software product in performance testing depends on the behavior of that particular software product. Before we start website frontend performance testing, it is necessary to clearly identify and understand what is the frontend.

Figure 1 - Web Application Architecture

Backend

The backend of a web application usually consists of three parts: a server, an application, and a database. If you search about something on google or buy concert tickets, you usually open a website and interact with the frontend. Once you've entered that information, the application stores it in a database that was created on backend.

All of that information stays on the backend, so when you log back into the application to print your tickets, all of the information is still there in your account.

We call a person that builds all of this technology to work together a backend developer. Backend technologies usually consist of languages like C#, PHP, Ruby, Python, etc.

In figure 1, we can see that backend performs its activities, then prepare information and send them to end user using the network. In backend test or load testing, we test the performance of those backend activities.

Frontend

When we discuss the "frontend" of website or a web application, we can describe it as the interface that provides user read contents, input data and interact with the system. Website frontend is rendered inside browser.

It is everything that you see when browsing a website, is a combination of HTML, CSS and Javascript all being controlled by your computer's browser. These includes things like images, fonts, menus, buttons, contact forms, lists, etc.

According to figure 1, information sent by the backend is rendered inside end user's browser. Frontend of the web application does all necessary operations to render webpage. In frontend performance testing, we test the performance of these frontend operations.

Summary

This part of article series covers up introduction to web application frontend. It will help in isolating frontend of a software product for performance testing. In the next part of article series we will discuss about what is referred as frontend performance testing.