Loosely speaking, a web application is a program that runs on a computer with a web server.
A web application (or web app) is application software that runs on a web server, unlike computer-based software programs that are run locally on the operating system (OS) of the device. Web applications are accessed by the user through a web browser with an active network connection. These applications are programmed using a client–server model—the user ("client") is provided services through an off-site server that is hosted by a third-party. Examples of commonly-used web applications include: web-mail, online retail sales, online banking, and online auctions.
So what’s a web server? Wikipedia says:
A web server is computer software and underlying hardware that accepts requests and send responses via HTTP or its secure variant HTTPS, the network protocols created to distribute web contents (web pages, etc.) to client user agents.
What does this mean? It means the client sends requests to the server and the server responds::
If the server always sends back the same data in the form of HTML, CSS, images, videos, and similar resources, without any user interaction, we call the app a web site.
If there is user interaction (mouse clicks, tapping and swiping, phone shaking, keypresses, etc.) that affect the execution of the program, we have a web app.
If the server only produces raw data (generally in text or JSON), then we speak of a web service.
Strawberry Pop-Tart Blow-Torches is a web site. It’s just HTML with images. Last updated in 1994. Looks great.
Gmail is a web app. All users need is a web browser. They login, create and organize filters, read messages, reply, forward, send, and delete, and logout. Messages exist in a data store on the server, as does all the code to generate pages. Of course the "pages" include a fair number of scripts that the browser knows how to execute, but these scripts are kept on the server and downloaded on demand.
The Poké API is a web service. Enter
https://pokeapi.co/api/v2/pokemon/ditto into your browser’s address bar. You got back pure data.
With webapps, you do not have to package up software for distribution and installation on client computers. Updating the software is easier too, since you don't have to ship an update and hope users know how do install it. You just make the change on the server yourself, and users see the new version the next time they visit your site (though some browsers cache old pages a bit too aggressively).
If your app is very simple, you can let your web browser take care of all of the details of the HTTP protocol so you don’t have to be concerned with it at all!
Now where can you host your web app? That is, where is your web server? You can get your own server of course, or use one provided by a service. Services for simple web apps include The p5js Web Editor, Replit, Glitch, and Code Sandbox.
Here is a code sandbox for a simple webapp:
We are going to look at each of the files in the web app and discuss them in class.
Each of the services listed above will host your webapps! For Code Sandbox, you’ll see the deployment url right above your preview window. The sandbox above is hosted at https://g83hi.csb.app/.
We’ll do a code-along here so you can write and deploy your first webapp!
You may have heard about APIs. These are services out there on the web for people to bring in data on such things as the weather, restaurants, recipes, spaceship locations, movies, and countless other things. Some APIs are free and some you have to pay for.
Now what about storage? There’s one thing you need to know about HTTP requests. They are stateless. They don’t remember anything. If you need to keep track of anything you have to store it. You can store information client-side within your browser’s localStorage or server-side in a database. Whichever way you choose to store data, you as a programmer are responsible for security. This is a big topic that we will cover later in the course.
Here’s something with a bit more. Don’t worry, you don’t have to understand every piece of this right now:
This shows that distributed programs like web apps have lots of different elements:
Here are discussion points for class:
Believe it or not, here’s another set up:
That’s right, the whole backend as one giant service, accessible via SDKs on the clients, or via APIs, or a console for admins.
One of the more popular such services for web apps is Firebase.