Kinds of frameworks and how to choose
Lesson 2 of 6
2Kinds of frameworks and how to choose
The big pictureYou will hear dozens of names: React, Vue, Angular, Django, Laravel, Spring, Next.js... and they look like an endless list. But they all fall into three boxes by where they run: in the browser on the user's device, on the server, or in both. Once you know the box, you know what the framework does before you read a line about it.
What the picture shows: Three boxes by where they run, then simple questions to pick from each box, then the four frameworks you will build with in this track.
Map of this part
The concepts in order, click any one to jump to it:
Two ways into the same idea
Think of a restaurant. The dining room is what the customer sees: the tables, the menu and the waiter. That is the interface, and its frameworks, like React, design the room and make it respond. The kitchen is hidden from the customer: it takes orders, cooks and stores. That is the server, and its frameworks, like Express and FastAPI, organise the kitchen. Some companies sell you a complete ready restaurant, dining room and kitchen together: that is a full-stack framework like Next.js. And some kitchens come empty for you to fill as you like (a small flexible framework), while others come fully equipped from day one (a "batteries included" framework).
The main classification is by runtime: client-side frameworks run in the browser and manage state and DOM rendering (React, Vue, Angular, Svelte). Server frameworks manage the HTTP request/response cycle, routing, middleware and data access (Express, Fastify, NestJS on Node; FastAPI, Flask, Django in Python; Spring Boot, ASP.NET Core, Laravel, Rails). Full-stack or "meta" frameworks build on a UI framework and add the server: server-side rendering, static generation, file-based routing and API routes (Next.js on React, Nuxt on Vue, SvelteKit). The second axis is philosophy: micro frameworks give you the core and leave the choices to you, while "batteries included" frameworks ship an ORM, authentication, an admin panel and strict conventions (Django, Rails, Laravel, NestJS, Angular).
Before You Start
🧰What a framework is
From the previous part: a framework calls your code.
🌍Client and server
You know the browser asks and the server answers.
The Core Idea
1Three boxes by where they run
The first question about any framework: where does it run? The answer puts it in one of three boxes:
| The box | Where it runs | What it does | Examples |
|---|---|---|---|
| Front-end frameworks | In the user's browser | Draws the page and updates it when the user clicks or the data changes | React, Vue, Angular, Svelte |
| Back-end frameworks | On the server | Receives requests, validates, talks to the database, and replies | Express, FastAPI, Django, Flask, Spring, Laravel |
| Full-stack frameworks | In both | Builds the page on the server, then carries on the interaction in the browser, in one project | Next.js, Nuxt, SvelteKit |
Most real apps use two boxes: a front-end framework talking to a server framework through a REST API, like React with FastAPI. A full-stack framework joins them in one project when that fits.
2Other families you will hear about
The word "framework" is used outside the web too. You will not need these now, but when you hear one you will know its box: mobile frameworks like React Native and Flutter build an Android and iPhone app from one codebase. Testing frameworks like pytest and Jest run your tests, and you will meet pytest in the quality track. Styling frameworks like Tailwind and Bootstrap give you ready CSS. And AI frameworks like PyTorch build and train models.
3Small and flexible, or "batteries included"?
Inside each box there are two kinds. A small flexible framework gives you only the core (routes, request and reply) and you pick the rest: Express, Flask and FastAPI. Easy to start and clear, but you decide and assemble many things yourself. A batteries-included framework comes with the database, authentication, an admin panel and one way to do everything: Django, Rails, Laravel, NestJS and Angular. Slower to learn, but it speeds up big projects and keeps a team consistent.
4The same idea in different languages
Here is the same route, "give me the café menu", in three server frameworks. Do not try to memorise them now, just notice the shape is the same: a verb, a path and a function that replies. That is what you built in the previous part with your tiny framework.
// Express (JavaScript)
app.get("/menu", (req, res) => {
res.json(["latte", "mocha", "v60"]);
});# FastAPI (Python)
@app.get("/menu")
def menu():
return ["latte", "mocha", "v60"]# Flask (Python), which you met in the REST lesson
@app.route("/menu")
def menu():
return ["latte", "mocha", "v60"]The biggest difference between them is the language, not the idea. So half of the choice is settled by one simple question: which language do you or your team know?
5Five questions to choose with
When you face a framework choice, ask in order: (1) which language do I or my team know? (2) what am I building: an API only, an interactive interface, or pages Google must find? (3) are the docs and community big enough to find an answer when I am stuck? (4) what do jobs ask for in my market? (5) is the framework alive and updated regularly? Here is a small function that applies the first two questions; run it and change the needs:
def suggest(language, api=False, interactive=False, seo_pages=False):
picks = []
if api:
picks.append("FastAPI" if language == "python" else "Express")
if seo_pages:
picks.append("Next.js (React with a server)")
elif interactive:
picks.append("React")
return picks or ["no framework: a script or plain HTML is enough"]
print("cafe app, python team:", suggest("python", api=True, interactive=True))
print("menu page google must find:", suggest("javascript", seo_pages=True))
print("mobile app backend, js team:", suggest("javascript", api=True))
print("rename files in a folder:", suggest("python"))6Why these four in Darb?
After these two parts the track enters the frameworks in this order, each for a reason: Express first because it is the simplest server framework and uses the JavaScript you learned in the front end, and it installs the Node you need later for React. Then FastAPI in your first language, Python, on the same orders API so you can compare the two. Then React, the most in-demand interface tool in the job market, which automates the render() you wrote by hand. And finally Next.js, which joins the interface and the server in one project. That way you will have touched all three boxes.
Worked example
Three projects, three choices. Apply the five questions to each project before you read the answer:
| The project | What it needs | A sensible choice |
|---|---|---|
| An ordering app for a café, the team writes Python | An API and an interactive screen | FastAPI for the server and React for the interface |
| A menu website that must show up on Google | Pages the server builds and light interaction | Next.js on its own |
| A server for a mobile app, the team writes JavaScript | An API only, no pages | Express |
| A script that sorts the café photos into folders | No requests and no interface | No framework: Python alone |
There is no single right answer. A JavaScript team might pick Express with React for the café, and that is fine too. What matters is choosing for a reason you can say out loud.
Myth vs Reality
| Myth | Reality |
|---|---|
| You must learn every framework to get a job. | Companies ask for one or two frameworks in depth. A server framework and a front-end framework you know well beat ten you know by name. |
| React, Vue and Angular are completely different things. | They are all in the same box and solve the same problem: drawing the interface from state. Whoever masters one moves to another in weeks. |
| A full-stack framework like Next.js removes the need to understand the server. | It only hides the boundary. When something breaks you will need to know whether it is in the browser or on the server, which is why you learn Express and FastAPI first. |
Test your understanding
A framework that runs in the user's browser and updates the page on a click. Which box is it in?
It runs in the browser and its job is drawing the interface, so it is a front-end framework like React.
What sets Next.js apart from React?
Next.js is a full-stack framework built on React: it builds pages on the server and adds routing and API routes.
Your team writes Python and needs only an API. What is the closest choice?
The language is Python and only a server is needed, and FastAPI is a Python server framework.
Quick review cards
Check Your Understanding
What is the first question you ask to know the kind of any framework?
Where does it run: in the browser, on the server, or in both?
Why is a beginner advised to start with a small framework?
Because they see every piece and understand its role, and then understand a big framework as pre-assembled pieces.
A friend is torn between Vue and React for a first project. What do you advise?
Both sit in the same box and solve the same problem. Pick the one whose docs are clearer to them or that jobs in their market ask for, and learn it deeply instead of hopping.
Resources for this lesson
Grouped by type. Start with the official docs for precision, or an article or video for the explanation.
Official docs2
Done with this lesson?
Sign in to save your progress.