# MVC Architecture (Model-View-Controller)
## ๐ เธชเธฒเธฃเธเธฑเธ
1. [เธซเธฅเธฑเธเธเธฒเธฃเธเธทเนเธเธเธฒเธ](#เธซเธฅเธฑเธเธเธฒเธฃเธเธทเนเธเธเธฒเธ)
2. [เนเธเธฃเธเธชเธฃเนเธฒเธ MVC](#เนเธเธฃเธเธชเธฃเนเธฒเธ-mvc)
3. [เธเนเธญเธเธต เนเธฅเธฐเธเนเธญเนเธชเธตเธข](#เธเนเธญเธเธต-เนเธฅเธฐเธเนเธญเนเธชเธตเธข)
4. [MVC Flow](#mvc-flow)
5. [Code Examples](#code-examples)
6. [Real World Examples](#real-world-examples)
7. [Best Practices](#best-practices)
---
## ๐ฏ เธซเธฅเธฑเธเธเธฒเธฃเธเธทเนเธเธเธฒเธ
### MVC Architecture เธเธทเธญเธญเธฐเนเธฃ?
**เธเธดเธขเธฒเธก:** เธชเธเธฒเธเธฑเธเธขเธเธฃเธฃเธกเธเธตเนเนเธเนเธเนเธญเธเธเธฅเธดเนเธเธเธฑเธเธญเธญเธเนเธเนเธ 3 เธชเนเธงเธ:
- **Model:** เธเนเธญเธกเธนเธฅเนเธฅเธฐ business logic
- **View:** เธเธฒเธฃเนเธชเธเธเธเธฅ (UI)
- **Controller:** เธเธฑเธงเธเธฑเธเธเธฒเธฃ request เนเธฅเธฐ response
### เธเธฃเธฐเธงเธฑเธเธดเธจเธฒเธชเธเธฃเน
```
1978: Introduced by Trygve Reenskaug (Smalltalk)
โ
1988: Used in web frameworks (Ruby on Rails)
โ
2000s: Standard in web development
โ
2010s-Present: Still widely used, evolved
```
### เธซเธฅเธฑเธเธเธฒเธฃเธซเธฅเธฑเธ
```
1๏ธโฃ Separation of Concerns
- Model: Business logic
- View: Presentation
- Controller: Flow control
- Each has specific responsibility
2๏ธโฃ Data-View Separation
- View doesn't know about data structure
- Model doesn't know how it's displayed
- Easy to change UI without changing logic
3๏ธโฃ Reusability
- Controllers reusable with different views
- Models reusable with different controllers
- Views can be swapped
4๏ธโฃ Testability
- Models tested separately
- Controllers tested with mock views
- Views tested independently
```
---
## ๐๏ธ เนเธเธฃเธเธชเธฃเนเธฒเธ MVC
### MVC Components
```
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ CLIENT (Browser) โ
โ โโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ HTML / CSS / JS โ โ
โ โโโโโโโโโโโโฌโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโโโ
โ HTTP Request
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ SERVER (Express.js) โ
โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ CONTROLLER โ โ
โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
โ โ โ 1. Receive HTTP request โ โ โ
โ โ โ 2. Parse parameters โ โ โ
โ โ โ 3. Call Model methods โ โ โ
โ โ โ 4. Select View โ โ โ
โ โ โ 5. Pass data to View โ โ โ
โ โ โ 6. Send HTTP response โ โ โ
โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
โ โโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโ โ
โ โ โ โ
โ calls โ โ requests data โ
โ โ โ โ
โ โโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโ โ
โ โ MODEL โ โ VIEW โ โ
โ โโโโโโโโโโโโโโโโโโโโค โโโโโโโโโโโโโโโโโโโโค โ
โ โ User class โ โ Templates โ โ
โ โ โโ createUser โ โ โโ user.ejs โ โ
โ โ โโ getUser โ โ โโ list.ejs โ โ
โ โ โโ updateUser โ โ โโ form.ejs โ โ
โ โ โโ deleteUser โ โ โ โ
โ โ โ โ Rendering: โ โ
โ โ Database logic โ โ โโ Insert data โ โ
โ โ Validations โ โ โโ Loop through โ โ
โ โ Business rules โ โ โโ Conditional โ โ
โ โ โ โ display โ โ
โ โโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ HTML Response
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ CLIENT RENDERS VIEW โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
### Detailed MVC Architecture
#### Model (เธเนเธญเธกเธนเธฅเนเธฅเธฐ Business Logic)
```javascript
// Model: Database objects + business logic
class User {
constructor(email, name, password) {
this.email = email;
this.name = name;
this.password = password;
}
// Business logic
isValidEmail() {
return this.email.includes("@");
}
async save() {
if (!this.isValidEmail()) {
throw new Error("Invalid email");
}
// Save to database
return await db.insert("users", this);
}
static async findById(id) {
return await db.query("SELECT * FROM users WHERE id = ?", [id]);
}
static async findAll() {
return await db.query("SELECT * FROM users");
}
}
```
**Responsibilities:**
- Data persistence
- Business validations
- Database queries
- Object relationships
#### View (เธเธฒเธฃเนเธชเธเธเธเธฅ)
```html
Users List
Users
<% if (users.length === 0) { %>
No users found
<% } else { %>
| ID |
Email |
Name |
Actions |
<% users.forEach(user => { %>
| <%= user.id %> |
<%= user.email %> |
<%= user.name %> |
View
Edit
Delete
|
<% }); %>
<% } %>
Add New User
```
**Responsibilities:**
- Display data
- User interface
- HTML/CSS/JavaScript
- No business logic
#### Controller (Flow Control)
```javascript
// Controller: Route handlers
class UserController {
// GET /users - List all users
async list(req, res) {
try {
const users = await User.findAll();
res.render("users/list", { users });
} catch (error) {
res.status(500).render("error", { error });
}
}
// GET /users/:id - Show single user
async show(req, res) {
try {
const user = await User.findById(req.params.id);
if (!user) {
return res.status(404).render("error", { error: "User not found" });
}
res.render("users/show", { user });
} catch (error) {
res.status(500).render("error", { error });
}
}
// GET /users/new - Form to create user
async form(req, res) {
res.render("users/form");
}
// POST /users - Create new user
async create(req, res) {
try {
const user = new User(req.body.email, req.body.name, req.body.password);
await user.save();
res.redirect(`/users/${user.id}`);
} catch (error) {
res.status(400).render("users/form", { error: error.message });
}
}
// GET /users/:id/edit - Edit form
async editForm(req, res) {
try {
const user = await User.findById(req.params.id);
res.render("users/form", { user });
} catch (error) {
res.status(500).render("error", { error });
}
}
// PUT /users/:id - Update user
async update(req, res) {
try {
const user = await User.findById(req.params.id);
user.email = req.body.email;
user.name = req.body.name;
await user.save();
res.redirect(`/users/${user.id}`);
} catch (error) {
res.status(400).render("users/form", { user, error: error.message });
}
}
// DELETE /users/:id - Delete user
async delete(req, res) {
try {
const user = await User.findById(req.params.id);
await user.delete();
res.redirect("/users");
} catch (error) {
res.status(500).render("error", { error });
}
}
}
module.exports = new UserController();
```
**Responsibilities:**
- Receive HTTP requests
- Validate input
- Call model methods
- Select and render views
- Return HTTP responses
---
## โ
เธเนเธญเธเธต เนเธฅเธฐเธเนเธญเนเธชเธตเธข
### โ
เธเนเธญเธเธต
| เธเนเธญเธเธต | เธญเธเธดเธเธฒเธข |
| ---------------------- | ------------------------------- |
| **Simplicity** | เธเนเธฒเธขเนเธเนเธฒเนเธ, เธเธณเนเธเนเนเธฃเนเธง |
| **Separation** | เธเธฑเธเนเธเธ separation of concerns |
| **Reusability** | Controllers/Views reusable |
| **Testing** | Model เธเธเธชเธญเธเนเธขเธเธเธฒเธ UI |
| **Rapid Development** | Quick to prototype |
| **Familiar** | Standard pattern, wide adoption |
| **Scalable to Medium** | Good for small-medium projects |
| **Team Organization** | Clear role division |
### โ เธเนเธญเนเธชเธตเธข
| เธเนเธญเนเธชเธตเธข | เธญเธเธดเธเธฒเธข |
| ------------------------ | ---------------------------------- |
| **Fat Models** | Models can become bloated |
| **Fat Controllers** | Controllers can grow large |
| **View Logic** | Templates can have business logic |
| **Monolithic** | Difficult to scale to many servers |
| **Tight Coupling** | Models โ Controllers coupled |
| **Limited Testing** | Integration testing difficult |
| **Migration Difficulty** | Hard to evolve to microservices |
| **Performance** | Single database bottleneck |
### เนเธกเธทเนเธญเนเธเธเธงเธฃเนเธเน MVC?
```
โ
เนเธเนเนเธกเธทเนเธญ:
- Traditional web applications
- Server-side rendering needed
- Small-medium projects
- Fast prototyping
- Limited team
- Simple business logic
- HTML-based user interfaces
โ เนเธกเนเนเธเนเนเธกเธทเนเธญ:
- Single Page Applications (SPAs)
- Microservices architecture
- Need independent scaling
- Multiple client types
- High-traffic systems
- Real-time applications
- GraphQL API
```
---
## ๐ MVC Flow
### Typical MVC Request-Response Cycle
```
1. USER INTERACTION
User clicks: "Edit Profile"
โโ Browser: GET /users/5/edit
2. ROUTING
Express routes to: UserController.editForm(req, res)
3. CONTROLLER
UserController.editForm():
โโ Extract ID from req.params
โโ Call Model.findById(5)
โโ Pass to view
4. MODEL
User.findById(5):
โโ Query database
โโ Validate permissions
โโ Return user object
5. CONTROLLER
UserController.editForm() continues:
โโ Call: res.render('users/edit', { user })
6. VIEW
Template 'users/edit.ejs':
โโ Receive user object
โโ Render form with user data
โโ Generate HTML
7. RESPONSE
Controller sends HTML to browser
8. BROWSER
โโ Renders HTML
โโ Shows edit form
โโ User modifies and submits
9. POST REQUEST
User submits form:
โโ Browser: POST /users/5
โโ Form data in body
10. CONTROLLER
UserController.update():
โโ Extract form data
โโ Validate input
โโ Call Model.update()
11. MODEL
User.update():
โโ Validate business rules
โโ Update database
โโ Return updated user
12. RESPONSE
Redirect: res.redirect('/users/5')
13. BROWSER
โโ Follow redirect
โโ Show updated user profile
```
### Data Flow Diagram
```
Request Flow:
โโโโโโโโโโโ
โ Browser โ HTTP GET /users/5/edit
โโโโโโฌโโโโโ
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Express Router โ
โ Maps route to controller method โ
โโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ UserController.editForm() โ
โ - Receive request โ
โ - Extract parameters (id=5) โ
โ - Call Model โ
โโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ User.findById(5) โ
โ - Query database โ
โ - Return user object โ
โ { id: 5, name: "John", ... } โ
โโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ UserController.editForm() โ
โ - Receive user object โ
โ - Select view: 'users/edit' โ
โ - Pass data: { user } โ
โ - Call: res.render() โ
โโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ View: users/edit.ejs โ
โ - Receive { user } โ
โ - Render HTML form โ
โ - Pre-fill with user data โ
โ - Generate HTML string โ
โโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ HTTP Response โ
โ Content-Type: text/html โ
โ Body: ... โ
โโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ
โโโโโโโโโโโ
โ Browser โ Renders HTML
โโโโโโโโโโโ
```
---
## ๐ป Code Examples
### Complete MVC Example (Express.js)
```javascript
// ============================================
// CONFIG
// ============================================
// config/database.js
const mysql = require('mysql2/promise');
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: 'password',
database: 'myapp'
});
module.exports = pool;
// ============================================
// MODEL
// ============================================
// models/User.js
const db = require('../config/database');
const bcrypt = require('bcryptjs');
class User {
constructor(email, name, password) {
this.email = email;
this.name = name;
this.password = password; // Will be hashed
}
// Validation
isValid() {
if (!this.email.includes('@')) {
throw new Error('Invalid email format');
}
if (this.password.length < 8) {
throw new Error('Password must be at least 8 characters');
}
if (!this.name || this.name.trim() === '') {
throw new Error('Name is required');
}
}
// Create
async save() {
this.isValid();
// Hash password
const hashedPassword = await bcrypt.hash(this.password, 10);
const [result] = await db.query(
'INSERT INTO users (email, name, password_hash) VALUES (?, ?, ?)',
[this.email, this.name, hashedPassword]
);
this.id = result.insertId;
return this;
}
// Read
static async findById(id) {
const [rows] = await db.query(
'SELECT id, email, name, created_at FROM users WHERE id = ?',
[id]
);
return rows.length > 0 ? rows[0] : null;
}
static async findAll() {
const [rows] = await db.query('SELECT id, email, name FROM users');
return rows;
}
static async findByEmail(email) {
const [rows] = await db.query(
'SELECT * FROM users WHERE email = ?',
[email]
);
return rows.length > 0 ? rows[0] : null;
}
// Update
async update() {
this.isValid();
await db.query(
'UPDATE users SET email = ?, name = ? WHERE id = ?',
[this.email, this.name, this.id]
);
return this;
}
// Delete
async delete() {
await db.query('DELETE FROM users WHERE id = ?', [this.id]);
}
// Authentication
static async authenticate(email, password) {
const user = await User.findByEmail(email);
if (!user) {
throw new Error('User not found');
}
const isMatch = await bcrypt.compare(password, user.password_hash);
if (!isMatch) {
throw new Error('Invalid password');
}
return user;
}
}
module.exports = User;
// ============================================
// CONTROLLER
// ============================================
// controllers/UserController.js
const User = require('../models/User');
class UserController {
// GET /users
async list(req, res) {
try {
const users = await User.findAll();
res.render('users/list', { users });
} catch (error) {
res.status(500).render('error', { error: error.message });
}
}
// GET /users/:id
async show(req, res) {
try {
const user = await User.findById(req.params.id);
if (!user) {
return res.status(404).render('error', { error: 'User not found' });
}
res.render('users/show', { user });
} catch (error) {
res.status(500).render('error', { error: error.message });
}
}
// GET /users/new
new(req, res) {
res.render('users/form', { user: null });
}
// POST /users
async create(req, res) {
try {
const user = new User(req.body.email, req.body.name, req.body.password);
await user.save();
res.redirect(`/users/${user.id}`);
} catch (error) {
res.status(400).render('users/form', {
user: req.body,
error: error.message
});
}
}
// GET /users/:id/edit
async edit(req, res) {
try {
const user = await User.findById(req.params.id);
if (!user) {
return res.status(404).render('error', { error: 'User not found' });
}
res.render('users/form', { user });
} catch (error) {
res.status(500).render('error', { error: error.message });
}
}
// PUT /users/:id
async update(req, res) {
try {
const user = await User.findById(req.params.id);
if (!user) {
return res.status(404).render('error', { error: 'User not found' });
}
user.email = req.body.email;
user.name = req.body.name;
await user.update();
res.redirect(`/users/${user.id}`);
} catch (error) {
res.status(400).render('users/form', {
user: req.body,
error: error.message
});
}
}
// DELETE /users/:id
async delete(req, res) {
try {
const user = await User.findById(req.params.id);
if (!user) {
return res.status(404).render('error', { error: 'User not found' });
}
await user.delete();
res.redirect('/users');
} catch (error) {
res.status(500).render('error', { error: error.message });
}
}
}
module.exports = new UserController();
// ============================================
// ROUTES
// ============================================
// routes/users.js
const express = require('express');
const router = express.Router();
const UserController = require('../controllers/UserController');
router.get('/', UserController.list.bind(UserController));
router.get('/new', UserController.new.bind(UserController));
router.get('/:id', UserController.show.bind(UserController));
router.get('/:id/edit', UserController.edit.bind(UserController));
router.post('/', UserController.create.bind(UserController));
router.put('/:id', UserController.update.bind(UserController));
router.delete('/:id', UserController.delete.bind(UserController));
module.exports = router;
// ============================================
// VIEWS
// ============================================
// views/users/list.ejs
Users
Users
<% if (users.length === 0) { %>
No users found.
<% } else { %>
| ID |
Email |
Name |
Actions |
<% users.forEach(user => { %>
| <%= user.id %> |
<%= user.email %> |
<%= user.name %> |
View |
Edit |
|
<% }); %>
<% } %>
Add New User
// views/users/form.ejs
<%= user ? 'Edit' : 'Create' %> User
<%= user ? 'Edit' : 'Create' %> User
<% if (error) { %>
Error: <%= error %>
<% } %>
// ============================================
// MAIN APP
// ============================================
// app.js
const express = require('express');
const methodOverride = require('method-override');
const userRoutes = require('./routes/users');
const app = express();
// Middleware
app.use(express.urlencoded({ extended: true }));
app.use(methodOverride('_method'));
app.set('view engine', 'ejs');
// Routes
app.use('/users', userRoutes);
// Error handler
app.use((err, req, res, next) => {
console.error(err);
res.status(500).render('error', { error: err.message });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
```
---
## ๐ Real World Examples
### Example 1: Ruby on Rails (Classic MVC)
```
Rails follows MVC strictly:
Model:
- app/models/user.rb
- Active Record ORM
- Validations, associations
Controller:
- app/controllers/users_controller.rb
- RESTful actions: index, show, new, create, edit, update, destroy
View:
- app/views/users/index.html.erb
- app/views/users/show.html.erb
- app/views/users/form.html.erb
Routes:
- config/routes.rb
- resources :users (generates all routes)
Result:
- Very productive framework
- Rapid development
- Clear structure
```
### Example 2: Django (Python MVC)
```
Django Framework:
Model:
- models.py - Define data structures
- Django ORM
- Automatic admin interface
View (Template in MVC):
- templates/ - HTML files
- Template language: Django Templates
- Template tags, filters
View (Logic in MVC called View):
- views.py - Handle requests/responses
- Class-based views or function-based views
URLs:
- urls.py - URL routing
Example Flow:
URL: /users/5/
โ
urls.py: path('users//', views.user_detail)
โ
views.py: def user_detail(request, id):
user = User.objects.get(id=id)
return render(request, 'user/detail.html', {'user': user})
โ
templates/user/detail.html:
{{ user.name }}
{{ user.email }}
```
### Example 3: Laravel (PHP MVC)
```
Laravel Framework:
Model:
- app/Models/User.php
- Eloquent ORM
- Relationships, validation
Controller:
- app/Http/Controllers/UserController.php
- Resource controller (CRUD)
- Dependency injection
Route:
- routes/web.php
- Route::resource('users', UserController)
- Automatic routes
View:
- resources/views/users/
- Blade template engine
- {{ }} for echoing variables
- @if, @foreach, etc.
Controller Example:
public function show($id)
{
$user = User::find($id);
return view('users.show', ['user' => $user]);
}
View Template:
{{ $user->name }}
{{ $user->email }}
```
---
## ๐ก๏ธ Best Practices
### 1. Fat Model, Skinny Controller
```javascript
// โ
GOOD: Business logic in model
class User {
isValidEmail() {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email);
}
async save() {
if (!this.isValidEmail()) {
throw new Error('Invalid email');
}
// Save logic
}
}
// In Controller - just call model
async create(req, res) {
try {
const user = new User(req.body);
await user.save();
res.redirect('/users/' + user.id);
} catch (error) {
res.render('form', { error });
}
}
// โ BAD: Business logic in controller
async create(req, res) {
if (!req.body.email.includes('@')) {
return res.render('form', { error: 'Invalid email' });
}
// ... more validation
const user = new User(req.body);
await db.query('INSERT INTO...');
}
```
### 2. Use Services for Complex Logic
```javascript
// โ
GOOD: Extract to service layer
class UserService {
async createUserWithEmail(userData) {
// Complex logic
const user = new User(userData);
await user.save();
// Send email
await emailService.sendWelcome(user);
// Log to analytics
await analyticsService.log('user.created', user.id);
return user;
}
}
// Controller is thin
async create(req, res) {
const user = await userService.createUserWithEmail(req.body);
res.redirect('/users/' + user.id);
}
```
### 3. Keep Views Simple
```html
<% if (user) { %>
<%= user.name %>
<%= user.email %>
<% } %>
<% if (user.accountBalance > 1000 && user.membershipLevel === 'gold' &&
user.lastPurchaseDate > Date.now() - 30*24*60*60*1000) { // Complex business
logic in template } %>
```
### 4. Validation in Multiple Layers
```javascript
// โ
GOOD: Validate at all levels
// Client-side
// Route middleware
router.post('/users', validateInput, controller.create);
// Model
class User {
validate() {
if (!this.email.includes('@')) throw new Error('Invalid email');
}
}
// Database
CREATE TABLE users (
email VARCHAR(100) UNIQUE NOT NULL,
CHECK (email LIKE '%@%')
);
```
### 5. Use Authentication Middleware
```javascript
// โ
GOOD: Protect routes with middleware
const auth = require("./middleware/auth");
router.get("/:id/edit", auth, UserController.edit);
router.put("/:id", auth, UserController.update);
// Middleware
async function auth(req, res, next) {
const token = req.cookies.token;
if (!token) {
return res.redirect("/login");
}
const user = jwt.verify(token, process.env.JWT_SECRET);
req.user = user;
next();
}
```
### 6. Use Response Objects
```javascript
// โ
GOOD: Consistent response handling
class Response {
static success(data, message = "Success") {
return { success: true, data, message };
}
static error(error, statusCode = 400) {
return { success: false, error, statusCode };
}
}
// In controller
res.json(Response.success(user, "User created"));
```
---
## ๐ MVC Variants
### MVP (Model-View-Presenter)
```
Similar to MVC but:
- Presenter (not Controller) handles all UI logic
- View is passive (just displays)
- Model is unchanged
Use case: Desktop applications (WinForms, WPF)
```
### MVVM (Model-View-ViewModel)
```
Used in:
- WPF (Windows Presentation Foundation)
- Xamarin
- Angular applications
Features:
- Two-way data binding
- ViewModel bridges Model and View
- Automatic sync between View and ViewModel
```
---
## โ
เธเธฃเธงเธเธชเธญเธเธเธงเธฒเธกเนเธเนเธฒเนเธ
**เธเธณเธเธฒเธกเธเธฑเธงเนเธญเธ:**
1. โ MVC เธเธทเธญเธญเธฐเนเธฃ? เนเธเธฃเธเธชเธฃเนเธฒเธ 3 เธชเนเธงเธ?
2. โ Model เธซเธเนเธฒเธเธตเนเธญเธฐเนเธฃ?
3. โ View เธซเธเนเธฒเธเธตเนเธญเธฐเนเธฃ?
4. โ Controller เธซเธเนเธฒเธเธตเนเธญเธฐเนเธฃ?
5. โ Request flow เธเนเธฒเธ MVC เธญเธขเนเธฒเธเนเธฃ?
6. โ Fat Model, Skinny Controller เธเธทเธญเธญเธฐเนเธฃ?
7. โ เนเธกเธทเนเธญเนเธเธเธงเธฃเนเธเน MVC?
---
## ๐ เธชเธฃเธธเธ
### Key Takeaways
```
โ
MVC = Separation of concerns
โ
Simple, clear, proven pattern
โ
Good for web applications
โ
Easy to test
โ
Quick to develop
โ
Wide adoption
โ Can become monolithic
โ Limited scaling
โ Not for real-time applications
```
### เนเธกเธทเนเธญเนเธเธเธงเธฃเนเธฅเธทเธญเธ MVC
```
โ
USE IF:
- Traditional web applications
- Server-side rendering
- Small-medium projects
- HTML-based UI
- Fast prototyping
- Learning/teaching
- Team familiar with MVC
โ DON'T USE IF:
- Single Page Applications (SPAs)
- Microservices architecture
- Real-time applications
- Distributed systems
- GraphQL needed
- Multiple client types
```
---