When we surf online these days, surprisingly many of the web pages we use are, in fact, web applications.
These are applications we use via our web browsers. We read our e-mails, share our holiday photos, congratulate our friends on their birthdays, and share our favorite links online.
But what is a web application exactly? And what are the differences between web apps vs conventional websites from a technical perspective?
Web apps have a user interface, a client, which is the part you see and interact with. The client is basically the front-end side of the web app.
To support the front-end, there’s also a back-end part: it’s simply a database on a server where all user data is stored and processed. This client-server environment is what makes all your favourite web apps work.
If you want to learn how web apps work or perhaps wish to create one of your own, this post is for you.
I will cover all the basics of how they are built and how they work. And more importantly: how you can start building some of your own!
Here are a few related posts you might want to read:
- What Does a Web Developer Do Exactly?
- How Computer Science Basics Can Help You Learn Coding Faster
- Why I Started to Teach Myself to Code
What we will cover in this post
I first got interested in programming because I wanted to create my own web apps in the future. That’s why in this post I’ll share with you a bit of what I’ve learned about web apps, going through the following points:
- What is a web application?
- How do web apps work?
- Typical web app framework structure
- Web applications vs desktop software
Let’s jump right in!
1: What is a web application?
Basically web applications differ from conventional websites in terms of the content they display to the user.
Although the two are far from being mutually exclusive, there are some distinct differences. Hence, it is often impossible to tell where the one ends and the other one starts.
A traditional website is static.
Take a news page, for example. It presents you with articles about the biggest, latest events in the world. There are sub-pages for specific news fields, such as politics or culture, but the content displayed for each reader is more or less the same.
Web applications, on the other hand, can process user input and react to it.
The easiest example to think of is pretty much any website where you have a profile and can log in.
Once logged in to your account, the website looks different. You see your own profile, your connections on social media, and updates from people in your network. The site’s look and content is unique to your user account.
The ability to process user input is the main characteristic of web applications. They are able to store and retrieve data and present it to the user in a web browser.
One could say that conventional websites are for consumption and web apps for interaction. Does that make sense?
2: How do web applications work?
So now we know a web application needs to have a database for storing all the data from its users. This server-side functionality is programmed by back-end developers.
The client-side is taken care of front-end programmers. They make sure a web application has an efficient, beautiful, user-friendly interface.
Related: Back-End Development vs Front-End Development
Now, let’s think about what is stored in the database. A web application has quite the perfect memory, really. It doesn’t forget anything you do while you’re using it.
Every status update, photo upload, or another input on your social media account has its own little spot in the database.
Also, the database is aware of every single like, every comment, and every like for a comment, too. Let alone your personal information and your network of friends! And pretty much your every click you made since you first registered.
Thus, the amount of data stored by some of the biggest web apps we use is ginormous! Especially on social media where our behavior is tracked on a particularly detailed level.
With a web app like this, constructing an efficient data structure for managing all the data is probably the single most important task for back-end developers.
3: Typical web app framework structure: Model-view-controller (MVC)
There are of course several solutions and different ways to construct the back-end fundamentals for a web application in terms of programming.
So far, I’ve been working with Python and Django to create my own simple web applications. They use one of the most common type of framework architecture called the Model-view-controller (MVC) pattern.
The MVC pattern divides the back-end processes into three interconnected parts:
Manages the data and logic of the application.
Creates the user interface.
Commands the first two parts and coordinates the tasks between them.
For a more thorough explanation, check out my post about the Model-view-controller (MVC) design pattern.
How does the MVC pattern work?
When you’re using a web app, for example when you log in to your account in social media, you interact with the view.
The view part sends your input to the controller. It knows exactly what to do with your username and password.
The view then tells the model what to retrieve from the database.
Obviously, you eventually want to get onto your landing page when you log in. The model then updates the view, so that the view renders your landing page in your web browser.
All this happens in the blink of an eye. Pretty neat!
In fact, a social network web app is a collection of several applications running in the background.
One app could be responsible for managing user accounts, while another one administrates the photos you post online. A third application could then process and maintain the comments for those photos.
The MVC structure and the interactions between the modules are, of course, open to interpretation.
This video gives one particularly great explanation of the MVC pattern. It compares the view to a pretty sales clerk who has to ask the bossy controller for everything. The controller knows its business and forwards the request to the model, the smart employee in the storage room. The model knows how to find exactly what the customer wants and forwards it to the sales clerk, who in turn presents it to the customer.
4: Web applications vs desktop software
In addition to adding depth and functionalities to websites, web applications also offer cool opportunities for traditional desktop software developers.
Some time ago, most software was sitting tight on the user’s computer, installed on the hard drive. There was software for e-mails, text processing, spreadsheet work, and so on.
Now, most of us have e-mail accounts that we can access via any web browser.
Furthermore, we can now do our spreadsheets and text processing using web-based applications. That way, not only can we access our documents across several devices and platforms, but we also save the trouble of installing programs on our computers.
This also makes lives easier for programmers: they only need to write the code for one platform instead of several operating systems.
Final thoughts: Develop your own web apps
All in all, web applications have become a huge part of the Web. Most of us use some daily, especially in social media.
Even total programming newbies have the chance to create their own web apps with frameworks such as Django for Python or Ruby on Rails fairly quickly. They are both web frameworks, making it easier to develop data-driven websites.
Pinterest and Instagram use Django, for example. Ruby on Rails powers AirBnb and Hulu, to name a couple.
To start learning web development right away, check out this list of beginner level courses in HTML, CSS, and other tools I recommend!
I hope you found some useful information in this post on what web applications are all about. If you’re interested in developing some on your own, go for it!
Recommended posts for you:
- The Best Websites to Learn Coding and Web Development
- Web Developer Salary: How Much Do Web Developer Make?
- 4 Practical Steps to Get You Started With Coding
If you enjoyed this post about what is a web application, please drop me a line in the comments section!
P.S. If you found this article helpful, please share it with others! Thanks for your support!