Full-Stack Architecture Patterns

Chapter 2: MVC Architecture

2.1 Model-View-Controller Pattern

The Model-View-Controller (MVC) pattern separates an application into three interconnected components, improving code organization and maintainability.

MVC Components:

Model:

• Represents data and business logic
• Manages database interactions
• Validates data
• Independent of user interface
• Example: User model handles user data and database operations

View:

• Presents data to the user
• Handles user interface
• Receives data from model
• No business logic
• Example: HTML templates, React components

Controller:

• Handles user input
• Coordinates between model and view
• Processes requests
• Updates model and view
• Example: Route handlers, API endpoints

MVC Flow:

1. User interacts with View
2. View sends request to Controller
3. Controller processes request and updates Model
4. Model notifies Controller of changes
5. Controller updates View with new data

2.2 MVC Implementation

Implementing MVC requires careful separation of concerns and proper communication between components.

Back-End MVC Example (Node.js/Express):

// Model (models/user.js)
class User {
    static async findById(id) {
        // Database query
        return await db.query('SELECT * FROM users WHERE id = ?', [id]);
    }
    
    static async create(data) {
        // Create user in database
        return await db.query('INSERT INTO users SET ?', data);
    }
}

// Controller (controllers/userController.js)
class UserController {
    async getUser(req, res) {
        const user = await User.findById(req.params.id);
        res.json(user);
    }
    
    async createUser(req, res) {
        const user = await User.create(req.body);
        res.status(201).json(user);
    }
}

// Routes (routes/users.js)
router.get('/users/:id', userController.getUser);
router.post('/users', userController.createUser);

Front-End MVC Example (React):

// Model (data/UserService.js)
class UserService {
    async fetchUser(id) {
        const response = await fetch(`/api/users/${id}`);
        return response.json();
    }
}

// View (components/UserProfile.jsx)
function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    
    useEffect(() => {
        UserService.fetchUser(userId).then(setUser);
    }, [userId]);
    
    return <div>{user?.name}</div>;
}

// Controller logic is in the component or custom hooks

2.3 MVC Benefits

MVC pattern provides several advantages for application development.

Separation of Concerns:

• Each component has a specific responsibility
• Changes to one component don't affect others
• Easier to understand and maintain

Code Reusability:

• Models can be reused across different views
• Views can display data from different models
• Controllers can handle multiple views

Testability:

• Each component can be tested independently
• Models can be tested without UI
• Controllers can be tested with mock data

Team Collaboration:

• Front-end and back-end developers can work separately
• Clear boundaries between components
• Easier to assign tasks

2.4 MVC Variations

Several variations of MVC exist, each with different approaches.

MVP (Model-View-Presenter):

• View is passive, Presenter handles all logic
• Stronger separation than MVC
• Common in Android development

MVVM (Model-View-ViewModel):

• ViewModel mediates between Model and View
• Two-way data binding
• Common in frameworks like Vue.js, Angular

MVC Frameworks:

• Back-End: Laravel (PHP), Ruby on Rails, Django (Python), Express.js
• Front-End: Angular, Ember.js, Backbone.js