What is MVC architecture pattern?
Model-View-Controller separates concerns.
Components
Model: Data and business logic
javascript
class UserModel {
async getUser(id) {
return await db.users.findById(id);
}
async updateUser(id, data) {
return await db.users.update(id, data);
}
}View: UI/Presentation
javascript
function UserView({ user }) {
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}Controller: Handles input
javascript
class UserController {
constructor(model, view) {
this.model = model;
this.view = view;
}
async showUser(id) {
const user = await this.model.getUser(id);
this.view.render(user);
}
async updateUser(id, data) {
await this.model.updateUser(id, data);
const user = await this.model.getUser(id);
this.view.render(user);
}
}Benefits
- Separation of concerns
- Easier testing
- Reusable components
- Parallel development
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.