An Intro to Web Apps

by Robert Dalton

A quick note: this post is designed for true beginners - those who have little to no knowledge of software and web development. That disclaimer aside - let's dive in!

What is a Web Application?

A Web Application is a software application that is accessed and used via the internet, typically via a web browser. However, before we dive into what a Web Application is, we must first answer two prerequisite questions:

How does the Internet Work?

The internet is simply a network of computers that can communicate with each other. Computers communicate over the internet via the "Client-Server Model", in which a one computer (the "client") asks another computer (the "server") for some data via a request. The server then replies to this request with a response.

The specifics behind how internet communications work and are structured are vast and complex, and I won't dive into them here. For now, the model above is enough for our purposes.

What is a Software Application?

A software application, or app, is a program that enable users to view and manipulate data. At a high level, you can use the "Model/View/Controller (MVC)" framework to visualize the basic structure of most apps:



In this framework, you can think of an app as consisting of 3 components, controlled by a user. The components are:

  • Model: A model that represents and stores data.
  • View: A view of the data model, which is shown to the user.
  • Controller: A component that the user uses to manipulate the data model.

Let's bring all of these concepts together and via an example you're likely familiar with: FaceBook. The data that represents your profile is an example of a model. It might be represented in a table like this:

Name Birthday Hometown ...
John Doe     3/14/1998     Norfolk, VA     ...    

A view of this model would be your profile page. And a controller that manipulates this model would be one of FaceBook's servers.

How does a Web Application Work?

While the MVC framework is useful for visualizing the purpose and function of software applications, it isn't quite accurate for web applications. Most basic web applications actually consist of these 3 components: a frontend, a backend, and a database.

  • Frontend: Renders and displays views.
  • Backend: Controls data and builds views.
  • Database: Stores models.

You, as a user, interact with the app via a view, which is shown to you via a web browser on some client (laptop, phone, etc.). Whenever you want a new view, the following happens:

  1. Your browser (aka the frontend) makes a request for a view.
  2. The request is sent to a server running the app.
  3. The server forwards this request to the backend component.
  4. The backend uses the database to manipulate and retrieve data from the model.
  5. The backend uses this data to construct the view.
  6. The server sends the view to the client as the response.
  7. Your browser renders the view and displays it.


Please note - this is only one way to conceptualize the architecture of a basic web app. In reality, most apps rely on multiple backend components, and the frontend for some apps performs some controller functions.

An Example: FaceBook

Let's return to our FaceBook example. FaceBook is a web app that stores, and allows you to view, data from you and your friends.

It uses a PHP and C++ based backend with a MySQL database. NOTE: This isn't strictly true. FaceBook is hugely complex with dozens of components. This is my best guess at their core components based on what I could find on the interwebs.

Your profile page is an example of a view: it is a representation of the data model that represents your profile. When you open up FaceBook and go to your profile page, this is what happens:

  1. Your browser makes sends a request to facebook.com.
  2. This request is forwarded to a server running a PHP backend.
  3. The backend accesses the model representing your profile via the MySql database, and retrieves your profile information.
  4. The backend uses this information to construct a view of your profile.
  5. The server sends this view back to your browser via a response.
  6. Your browser renders the view as your profile page.

Closing Remarks

That's it! Hope it was helpful. While Web Applications are much more complicated than the simple overview I've provided here, I hope that this is at least enough to get you started on whatever projects or learning journey you have planned.

Next, we'll be diving into how you can use Flask to construct and manage basic web apps.