The Elements of a Web Application
Understand essential web application elements such as asynchronous vs synchronous communication, single-page and multi-page apps, REST API principles, and database types. Learn how these concepts combine to build modern full stack web applications with React, Flask, and SQL.
We'll cover the following...
The following concepts are important to know in web application development: asynchronous communication, single-page applications,
Types of communication
There are two types of communications between the client and the server:
- Asynchronous communication
- Synchronous communication
The properties of both types are explained in the following table:
Synchronous | Asynchronous |
One side will wait for the response from the other before doing anything else. This is also called a blocking call. | A message is sent by one side, but it continues doing something else and reacts to the response when it arrives. |
Easier to code because there’s a single flow of logic | Difficult to code. |
It can make for poor user experience. | Better user experience. |
Example: Phone call | Example: Email |
Types of application
On the front-end, there are two types of applications.
- Multi-page application: The server sends a new page every time the user does something.
- Single-page application: The server only sends the relevant information and leaves it up to the client to determine how to update itself.
The names are not great, as evidenced by the following riddle.
Question: How many pages are in a single-page application?
Nowadays, a site that reloads on every click feels outdated. Almost all websites have switched to asynchronous communication in single-page applications. The front-end developer must create code that responds to events from both the user and the server.
Types of databases
The following table shows some specifications of
SQL | NoSQL |
| Offers more variety in how the data is structured, through the following features:
|
Requires you to specify your data structure up-front. | The data structure is flexible. It doesn't require specifications. |
Robustness of the database in:
| Has advanced capabilities that are well suited for:
|
SQL databases are an older and more mature technology but lack the flexibility of NoSQL databases. Usually, for small projects, both SQL and NoSQL options suffice.
REST API
A REST API server is a server that complies with certain limiting rules that make it easier to scale the server to many processes. Most notably, each request must be fully self-contained, and cannot rely on the server process to remember anything extra. For this reason, REST APIs are called stateless.
Question: How much state is used by a stateless server?
Statelessness means that the server cannot itself track the state, but the client can submit state information, and the server can access a data store. There’s no real limit to the state that a server can access and process. The restriction determines where the state can be stored and when it must be transmitted.
Data Model
The data model is how data is organized within the database, as shown in the table in the types of databases section, sometimes also called a database schema. A well-chosen data model can simplify the code and make the program easier to write. Bad choices in the data model can haunt the project until they are corrected.
When we put all these concepts together, we summarize, our goals are summarized as follows:
We want to create a React single-page web application that asynchronously communicates with a Flask REST API, which in turn uses a PostgreSQL SQL database to store and access application data according to the data model.
Quiz
(Select all that apply) Asynchronous communication can provide a better user experience because: Multi-select
Users can often see new information without a full page reload.
The server sends only new data, which can reduce latency.
It reduces the workload on the client.
It’s simpler to implement.