🧠Knowledge Series #27: What exactly is a web app?
Web apps, mobile apps and progressive web apps (PWAs) explained
🔒The Knowledge Series is a collection of easy to read guides designed to help you plug the gaps in your tech knowledge so that you feel more confident when chatting to colleagues. Clearly explained in plain English. One topic at a time.Â
If you’re a free subscriber and you’d like to upgrade to unlock them you can do so below. Or you can find out more about paid access here.
Hi product people 👋,
When software engineers talk about building an app, most non-technical people assume they mean a mobile app. But that’s not always the case. For product teams who are building products for the web, when an engineer says this, they’re often referring to a different kind of app: web apps.
In this Knowledge Series, we’ll take a look at what web apps are, how they compare to static websites and mobile apps and everything you need to know about progressive web apps (PWAs).
Coming up
The difference between web apps, websites and mobile apps
The technical components of a web app explained: front end, backend, databases and devops
What are progressive web apps (PWAs) and how are they different from web apps?
What does the future of web apps look like?
PS, if you missed some of our related Knowledge Series, you can check those out here:
The difference between web apps, websites and mobile apps
The word app confuses things and there is significant cross over between web apps, websites and mobile apps:
Web apps are interactive web-based products that run in a browser.
Websites are static collections of web pages designed to be browsed but not necessarily interacted with in the same way as web apps.
Mobile apps are native applications that are downloaded onto a mobile device.
We might take web apps for granted in the 2020s but in the early days of the web, users were mostly limited to interacting with static websites only. In other words, because of slow internet connections, users would typically interact with a website by viewing content - rather than uploading, liking, sharing and processing server side information. Some of the technologies used in web apps were available in the early web days but speed restrictions made a lot of it very difficult to actually use.
Here’s a deeper look at how web apps compare with other technologies:
A real world examples of web apps
Most of the products we use on the web today would be considered web apps. And many companies have several different versions of their products that include a mix of web apps, websites and dedicated mobile apps.
Take Slack, for example. It has:
A web version of Slack, accessible via the browser (the web app)
A native app version of Slack for desktop operating systems (Windows, MacOS
A native app version of Slack available for mobile operating systems (iOS, Android)
When we talk about a web app, we’re referring only to the version of the product that is served on the web via a browser.
Technical components of a web app explained
A web app works using the client server model. The client (browser) makes a request to the server and the server responds with whatever it is you’ve requested and renders this in the browser.Â
Unlike mobile or desktop apps, users don’t download them - they are rendered in the browser.
Web apps typically involve more complex development processes, including both frontend and backend, to handle data processing, user authentication, and state management. This complexity allows for personalized user experiences based on interactions and data.Â
A typical web app tech stack
A typical tech stack for a web application includes a blend of different technologies that work together to deliver the experience of using an application:
Frontend: HTML, CSS, and JavaScript are foundational technologies, responsible for rendering the web app in the browser. Frameworks like React, Angular, Vue.js, and tools like TypeScript can enhance development.
Backend programming languages: Programming languages like Python (Django, Flask), Ruby (Ruby on Rails), PHP, Java, and Node.js are popular for server-side development.Â
Databases: Database technologies like MySQL, PostgreSQL, MongoDB, and Firebase are used for data storage.
Deployment and Hosting: Web apps are deployed on web servers and accessible via domain names. Cloud services like AWS, Google Cloud, and Azure, along with hosting platforms like Heroku and Netlify, provide infrastructure for web apps.
How each of these technologies work in the context of a web app
Front end technologies work together to render the presentation layer of the web app and include a mix of HTML, CSS and javascript. HTML elements can include things like text, links, tables and more. Javascript adds interactivity to web pages which essentially transforms a website into a web app.
Backend technologies including programming languages like Python, Ruby, PHP, Node and others work to power the more complex parts of a web application.