A Model View Controller diyagramı yalnızca teknik bir çizim değildir; uygulamanızın mimarisi için bir taslaktır. Karmaşık bir sistemin üç ayrı ama bağlantılı parçaya nasıl ayrılabileceğini gösterir: Model (veri ve temel mantık), View (kullanıcının gördüğü) ve Controller (aracı). Bu ayrım kodu daha ölçeklenebilir, test edilebilir ve bakımının daha kolay olmasını sağlar.¹

MVC Mimari Desenini Parçalayarak Anlamak

Deseni somutlaştırmak için bir restoranı hayal edin.

• Model mutfaktır: içindeki malzemeler (veri) ve tarifler (iş kuralları) bulunur.
• View menü ve masa düzenidir: konuklara seçenekleri ve hazır yemeği sunar.
• Controller garsondur: View'den sipariş alır, Model'den hazırlamasını ister ve sonuçları View'e geri döner.

Bu “endişelerin ayrılması” MVC'nin temel avantajlarından biridir ve değişmesi ya da test edilmesi zor, sıkı bağlı (tightly coupled) koddan kaçınmaya yardımcı olur.²

Uygulamada, MVC diyagramları geliştiriciler, ürün yöneticileri ve paydaşlar arasında uygulamanın nasıl çalıştığı konusunda ortak bir dil görevi görür. Net diyagramlar işe alımı hızlandırır ve ekipler arasındaki yanlış iletişimi azaltır.³

Temel MVC Bileşenlerini Parçalara Ayırmak

Model: İşlemin Beyni

Model veriyi, durumu ve iş kurallarını yönetir. O tek doğruluk kaynağıdır ve HTML veya CSS gibi sunum ayrıntılarından hiçbir şey bilmemelidir. Sorumlulukları arasında doğrulama, kalıcılık ve sistemin geri kalanının ihtiyaç duyduğu işlemleri açığa çıkarma bulunur.

View: Uygulamanın Yüzü

View'in tek görevi sunumdur. Model'den (genellikle Controller aracılığıyla) gelen veriyi alır, UI'ı render eder ve kullanıcı etkileşimlerini yakalar. View uygulama verisini doğrudan değiştirmemelidir; yalnızca kullanıcı eylemlerini Controller'a bildirmelidir.

Controller: Trafik Yöneticisi

Controller kullanıcı girdisini yorumlar, Model güncellemelerini koordine eder ve View'in nasıl yanıt vereceğini seçer. Controller'ları ince tutun: ağır işleri modellere veya servis sınıflarına devretmelidirler ve karmaşık iş mantığını içinde barındırmaktan kaçınmalıdırlar.

Roller ve Sorumluluklar (Hızlı Referans)

MVC Bir Kullanıcı İsteğini Nasıl Ele Alır — Adım Adım

Tipik bir iletişim formu gönderimini takip ederek MVC'nin nasıl çalıştığını görün:

1. Kullanıcı View ile etkileşime girer (formu doldurur ve “Submit” tuşuna basar).
2. View toplanan girdiyi Controller'a bildirir.
3. Controller doğrulama yapar ve işlemi Model'e devreder.
4. Model doğrulama yapar, veriyi kaydeder ve durumu günceller.
5. View yeni durumu göstermek için yeniden render edilir (örneğin, “Mesajınız için teşekkürler!” onayı).

Bu tek yönlü akış bağımlılığı azaltır ve sistem hakkında akıl yürütmeyi basitleştirir. View'in doğrudan Model ile konuşmasını engellemek gizli bağımlılıkları ve “spagetti kodu”nu önler.²

Modern Kod ile MVC'yi Uygulamaya Koymak

Tipik bir Node.js + Express backend ile React frontend temiz bir şekilde MVC'ye uyar. Basit bir klasör yapısı şöyledir:

/project-root ├── /src │ ├── /controllers # Handles incoming requests and orchestrates responses │ ├── /models # Manages data and business rules │ └── /views_or_components # React components or server-side views

Example controller (TypeScript + Express):

// src/controllers/userController.ts
import { Request, Response } from 'express';
import { User } from '../models/userModel';

export const getUserProfile = (req: Request, res: Response) => {
  const userId = req.params.id;
  const user = User.findById(userId);

  if (user) {
    res.status(200).json(user);
  } else {
    res.status(404).send('User not found');
  }
};

Example model (conceptual):

// src/models/userModel.ts
const users = [
  { id: '1', name: 'Alex Doe', email: 'alex@example.com' },
  { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
];

export class User {
  static findById(id: string) {
    return users.find(user => user.id === id);
  }
}

React component (View):

// src/components/UserProfile.tsx
import React, { useState, useEffect } from 'react';

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);

  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

Bu yapı her katmanı odaklı ve test edilebilir tutar ve ekiplerin kod tabanını karışık bağımlılıklar yaratmadan ölçeklendirmesine yardımcı olur. MVC temelleri hakkında daha fazla bilgi için Codecademy özetine bakın.¹

MVC'yi Diğer Tasarım Desenleri ile Karşılaştırmak

MVC klasik bir modeldir, ancak bazen UI karmaşıklığına ve test hedeflerine bağlı olarak MVP veya MVVM daha uygun olabilir.

• MVP (Model–View–Presenter): Presenter sunum mantığını üstlenir ve pasif bir View'u yönlendirir. UI test edilebilirliğini maksimize etmek istediğinizde iyidir.
• MVVM (Model–View–ViewModel): ViewModel bağlanabilir verileri ve komutları açığa çıkarır; View bunlara bağlanır. Veri bağlama ve reaktif güncellemeler sayesinde modern UI framework'lerinde popülerdir.⁵

Her desen farklı ödünler için optimize eder: ayrım ve netlik (MVC), test edilebilirlik (MVP) veya UI reaktivitesi ve azaltılmış tekrar kodu (MVVM).

Yaygın MVC Hataları ve Nasıl Düzeltileceği

Doğru bir MVC diyagramı olsa bile, ekipler teknik borç biriktiren anti-pattern'lere kayabilir.

Şişman (Fat) Controller'lar

Controller'lar iş mantığı, hesaplamalar veya doğrudan DB işleri içerdiğinde test edilmesi ve yeniden kullanılabilir olması zorlaşır. Karmaşık mantığı modellere veya adanmış servis sınıflarına taşıyın ve controller'ları koordine ediciler olarak tutun.

Anemik Modeller

Modeller yalnızca veri tutup davranış içermediğinde, iş kuralları controller ve servisler arasında dağılır. Davranışı modellere geri kazandırın ve onların kendi invariant'larından ve operasyonlarından sorumlu olmalarını sağlayın. Martin Fowler'ın anemic domain model tartışması faydalıdır.⁴

View'in doğrudan Model ile konuşmasına izin vermekten kaçının; tüm etkileşimler Controller üzerinden akmalıdır ki endişelerin ayrımı korunabilsin.²

SSS — Yaygın MVC Soruları

React gibi framework'lerle MVC hâlâ geçerli mi?

Evet. React View katmanını kapsar, ancak uygulama durumu ve iş kuralları (Model) için hala bir yere ve durum değişikliklerini UI'ya bağlamanın bir yoluna (Controller veya eşdeğeri) ihtiyaç vardır. Bu rollerin ayrı tutulması React bileşenlerinin şişmesini engeller.

MVC'yi benimserken ekiplerin yaptığı en büyük hata nedir?

En yaygın hata şişman controller'lar oluşturmaktır. Doğrulamayı ve iş mantığını modellere veya servislere devrederek controller'ları ince tutun.

Bir MVC diyagramı ekip iş birliğine nasıl yardımcı olur?

Net bir diyagram ortak bir kroki sağlar. Belirsizliği azaltır, işe alımı hızlandırır ve ekiplerin birbirlerinin sorumluluklarına çarpmadan paralel çalışmasına izin verir.

At Clean Code Guy, bu prensipleri uygulayarak uzun ömürlü yazılımlar inşa etmelerine yardımcı oluyoruz. Kılavuzlarımızı ve hizmetlerimizi keşfetmek için https://cleancodeguy.com adresini ziyaret edin.