Computer Science
Grade 9
20 min
Frontend vs Backend
Frontend vs Backend
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define frontend and backend development.
Differentiate between client-side and server-side operations.
Identify common technologies for frontend (HTML, CSS, JavaScript) and backend (Python, Node.js, SQL).
Explain how the frontend and backend communicate using an API.
Define the role of a full stack developer.
Trace the flow of data from a user action on a website to the database and back.
Ever wonder how clicking 'Like' on a photo instantly updates a counter for everyone to see? 🤔 Let's uncover the magic behind the screen!
In this lesson, we'll explore the two main parts of any web application: the frontend (what you see and interact with) and the backend (the hidden engine that makes it all work). Understanding this is the first ste...
2
Key Concepts & Vocabulary
TermDefinitionExample
Frontend (Client-Side)The part of a web application that the user interacts with directly. It's everything you see and click on in your browser, like buttons, text, and images.The layout of your favorite social media page, the search bar on Google, and the 'Add to Cart' button on an online store.
Backend (Server-Side)The part of the application that runs on a server and is hidden from the user. It handles the application's logic, database interactions, and user authentication.When you log into a website, the backend code checks if your username and password are correct by looking them up in a database.
DatabaseAn organized collection of data, like user information, posts, or product details, stored electronically on a server.A spreadsheet of all t...
3
Core Syntax & Patterns
The Client-Server Model
Client sends a Request -> Server processes the Request -> Server sends a Response.
This is the fundamental pattern of the web. The frontend (client) always initiates communication by asking for something (a webpage, data), and the backend (server) responds with what was asked for.
API Request/Response Cycle
Frontend makes an API call (e.g., GET /users/123) -> Backend receives the call, finds data in the database -> Backend sends data back as JSON.
Use this pattern whenever the frontend needs to get, create, update, or delete data without reloading the entire page. The data is usually formatted in JSON (JavaScript Object Notation) because it's easy for JavaScript to read.
Separation of Concerns
Frontend handles presentation and u...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A developer writes frontend JavaScript that tries to directly run an SQL query like `SELECT * FROM users WHERE id = 123;`. Based on the tutorial, what two major principles are being violated?
A.Using JavaScript for logic and not using Python for the backend.
B.Not using an API and not styling the page with CSS.
C.Mixing frontend/backend logic and not using HTML forms.
D.Mixing frontend/backend logic and storing sensitive data (database credentials) on the frontend.
Challenging
In the 'Liking a Photo' example, if a user's internet disconnects right after they click 'Like' (after the API request is sent but before the response is received), what is the most likely state of the system?
A.The like is saved in the database, but the user's screen doesn't show the updated count.
B.The like is not saved, and the user's screen shows an error message immediately.
C.The database and the user's screen are both updated successfully.
D.The like is saved in the browser but not the database, and will be sent later.
Challenging
A social media site wants to display the number of 'currently online' users. Why is it a poor design for the frontend to calculate this, and what is the correct full stack approach?
A.Frontend can't do math; the backend must receive a list of all users from the frontend and count them.
B.It's too slow; the frontend should just guess a number to display.
C.The frontend only knows about one user (itself) and has no global view; the backend should maintain the count and provide it via an API.
D.It's a security risk; the database should connect directly to the frontend to provide the count.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free