🚀 Understanding Web Apps with a Real-World Analogy

In this discussion, I would like to draw some real-world parallels with a Web Application. I hope you've read my previous article where I talked about how to get into Coding. In this segment, I am assuming you've completed learning the basics of C or an introductory programming language of your choice.

If you need a quick refresher, here is the link to my previous post

🧱 Building Blocks

Now you want to jump into developing web apps or perhaps even started with PHP. But you feel a bit confused about the different parts that make up a Web App. It's not easy to wrap your head around everything from HTML, CSS, JavaScript, PHP, MySQL, and what they are used for. These are legitimate questions that may come to your mind. Let's demystify them together.

So, what are those high-level parts that make up a Web App?

• The Backend
• The Frontend

Well, that's anti-climactic. We all know that much... Let's go one step deeper.

• Backend
  • PHP
  • MySQL
• Frontend
  • HTML
  • CSS
  • JavaScript

If you notice now it is a bit more complex to understand what they do and how they work, especially when you are starting out.

🧐 The Analogy

I'm going to take an analogy here; it will help you understand these technologies with real-world examples.

"The web app is like an Apartment."

Let me explain them one by one from the user's perspective for you to understand.

HTML

It is the structure of the apartment when it is being built. It defines where your doors are, the balcony, the living room, the kitchen, the bedrooms, and even the bathrooms.

It is the specification of that apartment. When we say 2 Bedroom Apartment, what comes to our mind?

That there is a living room, a kitchen space, a master bedroom, a guest bedroom, and 2 bathrooms.

At this point, the apartment is not finished. So, you have a basic layout of the space and in terms of decoration, you only have bricks. You technically can live there but it wouldn't be fun.

CSS

Think of it as the decoration you do. Like the color of different walls, floor material, the type of Taps & Sinks, even type of switches, and so on.

JavaScript

It is the functionalities that come with the apartment. Like the electricity, the water supply, or maybe even a fireplace. Think of it as everything that serves a function within the apartment.

You can also consider the doors and windows as JavaScript if the mechanism they operate is different than traditional ones.

MySQL Database

It is simply a piece of furniture that stores something. Like the cupboard, wardrobe, fridge among other things. And the data is the utilities, cosmetics, clothing, groceries that you use every day.

PHP

It is actually you, the people living there operating these things. You work with the parts every day depending on what needs to be done. You need to go out and buy groceries and store them in the fridge. This is a task that you do to keep the apartment functioning.

😕 Ambiguity

I've just used this example to help you contextualize various parts of a Web App. There are things that travel the lines of multiple things. Like a Fridge, it is both a database and functionality. So, you might think it is JavaScript and also a DB, and be confused.

For that, I will just say it is a JavaScript State Manager. What I mean by that is JavaScript can also store some data in the browser like Cookies, they help maintain the state when you visit a site.

In this context, the job of a fridge is to store and keep something cool.

Some things can come in both CSS & JavaScript. Like the lights or the AC or the TV. In that case, JavaScript is the functionality of that equipment and CSS is the design, color, and shape of that piece of equipment.

😇 Combined View

• So now if you want to change the decoration of the place. You know exactly which part needs work, it's the CSS.
• If you want to make a new window in the wall, you know that it would not only take the HTML but also CSS and even some JavaScript.
• If you need to change the apartment, you can, but your utilities, food, clothing, and furniture you take with you. That means your backend and database and the data stored in it can stay the same but the frontend will change.
• You can stay in the same apartment but modernize all the furniture and clothing. You organize them in a different way. That means you will have to perform altered steps to get a job done that you previously used to do differently. Maybe now the wardrobe has 5 racks instead of 2 that were there previously. So, it's the Backend and the Database that needs to change.

You might ask the question at this point who is the User? In this case, it is the visitors or guests. Considering you are only the maintainer of the property.

There are a few ways your friends can communicate,

• They can visit your place.
• Or they can call you.

When they visit your place, they are interacting with the place. That means they are using your address, which is the URL, to come to your place, they use different things which means they interact with the HTML & CSS and yes also the Backend is there to serve them.

But when they call, they are only just communicating with you, and you are the Backend Language. So, they are calling an API and asking for information or a response. Your phone number in this case is the address.

✊ Value & Benefit

The question that might come to your mind that why do you need all this mental model.

If you are an entry-level developer, it might help you to better understand the requirements or scope of the product that you are building. It might also help you to ask the right question about the product before you estimate the effort.

For the product engineers, it might help set up expectations and acceptance criteria. Because you are not only thinking about the visual aspect but also about the internal mechanism as well.

🥳 Next Steps

If you want to go even deeper into the concept of Microservice. It is just breaking the entire apartment into smaller pieces, conceptually.

Like, Kitchen is a Microservice. Its only job is related to cooking and storing things related to cooking.

The workplace is only used for work-related things. You store pens and notebooks there.

Then you have the authentication & authorization. You only let the trusted visitors get into the apartment, you don't want to get robbed.

✌️ Wrapping Up

I hope this helps you understand different pieces of a Web App and what purpose they serve with a real-world example. If you still have some confusion about some things in the apartment about what they fall under, feel free to post a comment down below.

There are many different analogies for this concept out there. By no means this is the only one. One popular one I can think of is "A Web App is like a Super Market or a Restaurant".

I would really like you to take this as an exercise and try to fit different parts of the web in the Super Market or Restaurant analogy and tell me in the comments below which parts relate to what things in your analogy.