What is a web framework?

A web framework is a software framework that facilitates the creation of web applications, such as web services, web resources, and web APIs. It standardizes the way web applications are produced and deployed, easing the development process using pre-made modules, libraries, and tools.

Web frameworks often handle standard tasks like URL routing, database interaction, and form handling, allowing developers to focus on creating unique features for their applications. These frameworks frequently use the model-view-controller (MVC) or a similar architectural pattern, which encourages a disciplined and organized approach to development.

Web frameworks help us to structure our applications by giving us the features we can add them without any extra workload. They help us to focus on key details to code our app rather than fixing our eyes on unnecessary configuration details. Frameworks cut out much of the work and save a lot of time by implementing their feature of reusability so that we won't be repeating our work again and again.

Some of the top server-side web frameworks listed by Stackoverflow are -

1. Express.js - node.js framework

2. Spring Boot - java based framework

3. Django, Flask - python based framework

Some of the frontend frameworks include Angular, React.js, Vue, Bootstrap, Svelte, and so on...

Relationship between a web framework and a web server

Say that we have an e-commerce website that is hosted on a web server that is hosted on a web server. When a user opens a browser and enters the address to the server, a request is sent to the server that is hosting the application.

On receiving a request, the server sends back a response which is a web page along with some data that lists products of the website. The machine where the website and its application logic reside is the web server and the browser which displays the beautiful UI to the user is the client.

What we see here is there are two sets of code.

The code that is hosting the runs on the server side that is hosting the web server and is listening from the users and querying the database, etc. This is called the server-side code or the backend code and is usually written in Java, Python, or express.js.

The response sent back by the server could be another set of code that runs on the client side that is used to display webpages. These are called the client-side or the front-end code. These are usually in the form of HTML, CSS, and Javascript that run on users's browsers.

So both these sets of code are developed together as part of the same application.

Understanding with the help of some examples

Here is a sample server-side code snippet in Java that uses the Spring Boot web framework.

App.java -

package.com.example.demo

@SpringBootApplication
@RestController
public class App { -
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
    @GetMapping("/products")
        public String[] getProducts() {
            return getProductList();
        }
}

So with Spring Boot framework, we can define mapping for HTTP calls as shown in the code and here we have a mapping from the "products" call that fetches a list of products from the database and returns them.

Similarly, down below, we have a javascript jQuery code running in the user's browser that makes the same call to get a list of products from the server and then displays that on the web page.

app.js -

$(document).ready(function) {
    $.get("/products", function(data, status) {
        displayProducts(data)
    });
});

The code snippets we saw in Spring Boot and javascript JQuery are frameworks. They provide an easy way to develop a web application where web servers can listen for request, perform some operations, and respond back with data.

Python frameworks such as Flask or Django and node.js based framework like express.js help us to easily develop web applications on these programming languages.

testApp.js -

const express = require("express")
const app = express()
app.get("/products", (req, res) =>
    res.send(getProductList())
)

app.py -

from flask import Flask
app = Flask(__name__)
@app.route("/products")
def hello():
    return getProductList()

How do we run the code such that it listens on a port and responds to the users? Flask provides a way to run the app natively ->

from flask import Flask
app = Flask(__name__)
@app.route("/products")
def hello():
    return getProductList()

if __name__ == '__main__':
    app.run()

Using this "app.run", it can run the Flask web server using an internal server available at Flask but it is not recommended for hosting the application in a production-ready environment. That is where a web server comes in for more flexible and scalable options to deploy your app in production mode.

While a web framework helps us to develop the server-side application code, a web server is what hosts the app. So you take all the code that you've written and put in a web server.

Some examples of web servers are Apache HTTPD Web server, Apache Tomcat, GlassFish, NGINX, Gunicorn, WSGi, uWSGI.

The web servers run one or more processes that listen on a particular port for requests and perform the required operations and respond to the users once done. For example, Apache Tomcat listens on port 8080 by default whereas NGINX listens on port 80 and Gunicorn listens on 8000 and yes these ports can be changed.

The web servers can host multiple apps at the same time. So they can redirect requests based on the URL you're hosting or path to different applications.

Static vs Dynamic websites

Websites can be broadly classified into two categories - Static and Dynamic

A website that only uses pages that include some CSS styling, a list of images as an image gallery, simple texts, etc is classified as a static website because it only uses static content, I.e., the content that doesn't change. There is no real interaction with the server after the content is served.

On the other hand, e-commerce websites that list products and provide the ability to add a cart and make purchases are called dynamic websites. They have a backend and some logic running for processing payments, getting order for products, purchases, etc.

Dynamic websites require both static and dynamic content. Static content such as HTML pages, and images are used to show the webpage but at the same time information such as product retrieval from the database for displaying on a webpage is also executed by the website. The webpages are likely to be displayed differently based on the data living on the database. That's why they are dynamic.

Apache HTTP web server and NGINX are good examples of static web servers that serve static content. On the other hand, Apache Tomcat, uWSGI, and Gunicorn are examples of dynamic web servers.

Static web servers are usually referred to as a web server and the servers that host dynamic websites are known as application servers.