Web Frameworks: A Beginner's Reference

What a web framework actually is, the main families of frameworks, real "Hello, world" code in six of them, the vocabulary everyone assumes you already know, and a glossary you can come back to.

1. What is a web framework?

A web framework is a collection of pre-written code and rules that handles the boring, repetitive parts of building a website or web API — so you can write only the parts that are unique to your project.

Almost every web app has to do the same things:

• Listen for HTTP requests and decide which code should answer them
• Read data the user sent (a form, a JSON body, a URL parameter)
• Talk to a database
• Produce a response (HTML, JSON, a file, a redirect)
• Handle errors, security, sessions, and configuration

A framework gives you all of that out of the box. You fill in the blanks.

Framework vs. library — the one distinction that matters

2. The big picture: client vs. server

Every web request is a conversation between two computers. Frameworks exist on both sides, and knowing which side you're on clears up a lot of confusion.

Some frameworks deliberately blur the line — Next.js, Nuxt, SvelteKit and Remix let you write front-end and back-end code in the same project. These are often called meta-frameworks or full-stack frameworks.

3. The six families

"Web framework" is an umbrella term. These are the buckets beginners actually encounter.

4. Hello, world × 6

The same trivial app — respond to GET / with "Hello, world!" — in six popular frameworks. Notice how much is framework convention versus your code.

Express (Node.js) — microframework

server.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, world!');
});

app.listen(3000, () => console.log('http://localhost:3000'));

Flask (Python) — microframework

app.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, world!"

if __name__ == "__main__":
    app.run(debug=True)

Django (Python) — full-stack

Django splits this across files by convention. You write the view and register the URL.

views.py

from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, world!")

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.home, name="home"),
]

Ruby on Rails — full-stack, convention over configuration

config/routes.rb

Rails.application.routes.draw do
  get "/", to: "home#index"
end

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index
    render plain: "Hello, world!"
  end
end

Rails infers file locations from names. That's the whole idea behind convention over configuration.

React — front-end component framework

React doesn't have "routes" or a server. It renders components. This one uses state — data the component remembers between renders.

Hello.jsx

import { useState } from 'react';

function Hello() {
  const [name, setName] = useState('world');

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={() => setName('friend')}>
        Greet
      </button>
    </div>
  );
}

export default Hello;

Next.js — meta-framework

Here the file path is the route. Creating app/page.tsx automatically creates the page at /.

app/page.tsx

export default function Page() {
  return <h1>Hello, world!</h1>;
}

Spring Boot (Java) — full-stack, enterprise

HelloController.java

import org.springframework.web.bind.annotation.*;

@RestController
public class HelloController {

    @GetMapping("/")
    public String home() {
        return "Hello, world!";
    }
}

5. Core concepts & idioms

These ideas appear in nearly every framework, sometimes under different names. Learn them once and you can read any framework's documentation.

Routing

Mapping a URL + HTTP method to a function. This is the heart of every server framework.

app.get('/users/:id', handler)   // Express: GET /users/42
@app.route("/users/<int:id>")   # Flask
path("users/<int:id>/", view)    # Django

Middleware

A function that sits in front of your handlers and can inspect, modify, allow, or reject a request before it reaches them. Logging, auth, CORS, compression, and parsing request bodies are all typically middleware. Think of it as an assembly line.

app.use((req, res, next) => {
  console.log(req.method, req.url);   // log it
  next();                             // pass it along
});

app.use(express.json());              // parse JSON bodies

MVC — Model, View, Controller

The classic way to split a server app into three responsibilities:

• Model — the data and the rules around it (often backed by a database table).
• View — how the data is presented (HTML template, JSON).
• Controller — receives the request, asks the model for data, picks a view.

Rails, Laravel, Django (which calls it MVT — Model, View, Template) and Spring MVC all follow this pattern.

ORM — Object-Relational Mapper

Lets you work with database rows as ordinary objects in your language, instead of writing SQL by hand.

# Raw SQL
cursor.execute("SELECT * FROM users WHERE age > 18")

# With an ORM (Django)
User.objects.filter(age__gt=18)

# With an ORM (Prisma / TypeScript)
prisma.user.findMany({ where: { age: { gt: 18 } } })

Related terms: ODM (same idea for document databases like MongoDB), migration (a versioned, scripted change to your database schema), seed (sample data for development).

Templating

Generating HTML on the server by filling placeholders with data.

<!-- Jinja2 (Flask/Django-style) -->
<h1>Hello, {{ user.name }}</h1>
<ul>
  {% for item in items %}
    <li>{{ item.title }}</li>
  {% endfor %}
</ul>

Components, props, and state

Front-end framework vocabulary:

• Component — a reusable chunk of UI, usually a function that returns markup.
• Props — read-only data passed into a component from its parent.
• State — data a component owns and can change; changing it re-renders the UI.
• Hook — a special function (e.g. useState, useEffect) that gives a component access to framework features.
• Virtual DOM — an in-memory copy of the page that the framework diffs to decide the minimum set of real DOM updates.

Convention over configuration

The framework assumes sensible defaults based on naming, so you write less setup code. In Rails, a model named User is assumed to map to a users table with a UserController — no config file required. The trade-off: you must learn the conventions, and breaking them costs you.

Scaffolding & boilerplate

• Boilerplate — repetitive code you must write before anything interesting happens.
• Scaffolding — a generator command that writes that boilerplate for you (e.g. rails generate scaffold Post title:string creates a model, controller, views, routes, and migration in one shot).
• CLI — the command-line tool every framework ships with (ng, create-react-app, django-admin, artisan).

Rendering strategies

Dependency Injection (DI)

Instead of a class creating the things it needs, they're handed to it from outside. Common in Angular, Spring, NestJS and ASP.NET Core. It makes code easier to test, because you can pass in a fake in tests.

6. How to choose (for a beginner)

Don't optimise for the "best" framework. Optimise for these, in order:

1. What does your project actually need? A blog does not need React. A complex dashboard probably does.
2. What language do you already know? You'll learn the framework faster than you'll learn a new language. Know Python → Flask or Django. Know JS → Express or Next.js.
3. How big is the community? More users means more tutorials, more Stack Overflow answers, and more AI training data that can help you.
4. How opinionated do you want it? If you like being told where things go, pick Rails or Django. If you like deciding for yourself, pick Express or Flask.

A reasonable starting path

• Learn HTML, CSS, and basic JavaScript first. Frameworks are not a substitute for these.
• Build one small server with Express or Flask — just to see HTTP requests and responses clearly.
• Then add a front-end framework (React or Vue) if you need interactivity.
• Then try a meta-framework (Next.js, Nuxt, SvelteKit) once you understand both halves.

7. Glossary of terms & idioms

API — Application Programming Interface

A defined way for two pieces of software to talk. A web API is usually a set of URLs that return data (often JSON) rather than web pages.

Boilerplate

Repetitive code you must write before the interesting part. Frameworks exist largely to reduce it.

Batteries included

Idiom for a framework that ships with everything you need (ORM, auth, admin, mailer) rather than making you pick libraries. Django and Rails are the classic examples.

BFF — Backend For Frontend

A thin server dedicated to one specific client app, aggregating and reshaping data from other services.

CDN — Content Delivery Network

A global network of servers that cache your static files close to users, so pages load faster.

Component

A self-contained, reusable piece of UI. The fundamental building block in React, Vue, Svelte and Angular.

Controller

The part of an MVC app that receives a request, gets the needed data, and chooses what to send back.

CORS — Cross-Origin Resource Sharing

A browser security rule that blocks JavaScript on one domain from calling an API on a different domain unless the server explicitly allows it. The source of many beginner error messages.

CRUD — Create, Read, Update, Delete

The four basic operations on stored data. Most apps are mostly CRUD.

Dependency

An external package your project needs. Managed by a package manager (npm, pip, Bundler, Maven) and listed in a manifest file (package.json, requirements.txt, Gemfile).

Dependency Injection (DI)

Passing a component's dependencies in from outside instead of letting it create them. Improves testability.

Endpoint

A specific URL + HTTP method combination that your server responds to, e.g. GET /api/users.

Framework vs. library

A library is something your code calls. A framework is something that calls your code. The framework controls the flow.

Full-stack

Covering both the client (what users see) and the server (data and logic). Also used to describe frameworks that handle both.

Handler / Route handler

The function that runs when a particular route is hit.

Hydration

In SSR, the process where the browser takes server-rendered HTML and attaches JavaScript event listeners to make it interactive.

Idempotent

An operation that produces the same result whether you run it once or ten times. GET, PUT and DELETE should be idempotent; POST usually isn't.

JSX

A syntax extension that lets you write HTML-looking markup inside JavaScript. Used by React. TypeScript's version is TSX.

Middleware

A function that runs before (or after) your route handler and can inspect, modify, or block the request. Used for logging, authentication, CORS, and body parsing.

Migration

A versioned file describing a change to your database structure. Migrations let you evolve a schema safely across environments.

Monolith vs. microservices

A monolith is one deployable app containing everything. Microservices split it into many small apps that talk over the network. Start with a monolith.

MVC

Model–View–Controller. A way of organising an app into data (Model), presentation (View), and request handling (Controller).

Opinionated

Said of a framework that makes decisions for you (file layout, libraries, patterns). Faster to start, harder to deviate from. The opposite is unopinionated or flexible.

ORM

Object-Relational Mapper. Lets you query a database using objects and methods in your programming language instead of raw SQL.

Props

Data passed from a parent component to a child component. Read-only from the child's perspective.

Route

A rule connecting a URL pattern to the code that handles it.

Scaffolding

A generator that creates the files for a feature — model, controller, views, routes — all at once.

Serverless

Running code on demand without managing a server. You deploy functions; the provider scales them. Often used with frameworks like Next.js or FastAPI.

Session vs. token

A session stores login state on the server and gives the browser a session ID cookie. A token (e.g. JWT) stores the state in the token itself, which the client sends with each request.

SPA — Single-Page Application

A web app that loads one HTML page and then updates the view with JavaScript, without full page reloads.

State

Data that can change over time and that the UI must reflect. Managing state well is most of front-end development.

Static site

A site made of pre-built HTML files. Fast, cheap, and secure because there's no server logic to attack.

Template engine

Software that combines an HTML template with data to produce final HTML. Examples: Jinja2, EJS, Handlebars, Blade, ERB.

Virtual DOM

An in-memory representation of the UI that a framework compares against the previous version to compute the smallest possible set of real DOM changes.

8. Acronym cheat sheet

9. Common beginner traps

• Learning a framework before the fundamentals. If HTML, CSS, and basic JavaScript or Python are shaky, every framework will feel like magic you can't debug.
• Tutorial hell. Following ten tutorials without building anything of your own teaches recognition, not skill. Build something small and ugly, then improve it.
• Reaching for the heaviest tool. A portfolio site does not need a database, an ORM, and a SPA. Boring technology ships.
• Confusing client and server. Code in the browser is public. Database passwords go on the server, always.
• Ignoring error messages. Read them top to bottom. The first line usually names the file and line number. Searching the exact message is the single most useful debugging skill.
• Chasing new frameworks. The concepts — routing, HTTP, state, data modelling, authentication — are stable. Syntax is not.