MVC, MVP & MVVM: So Sánh Các Pattern Tầng Trình Bày

// Spring MVC — Controller xử lý HTTP, ủy quyền cho service
@Controller
@RequestMapping("/products")
public class ProductController {
 
    private final ProductService productService;
 
    public ProductController(ProductService productService) {
        this.productService = productService;
    }
 
    @GetMapping
    public String listProducts(Model model) {
        // 1. Gọi service (tầng Model)
        List<Product> products = productService.findAll();
 
        // 2. Truyền dữ liệu cho View qua Spring's Model
        model.addAttribute("products", products);
 
        // 3. Trả về tên view — Spring resolve thành template
        return "products/list";
    }
 
    @GetMapping("/{id}")
    public String showProduct(@PathVariable Long id, Model model) {
        Product product = productService.findById(id)
                .orElseThrow(() -> new ResourceNotFoundException("Product not found"));
 
        model.addAttribute("product", product);
        return "products/detail";
    }
 
    @PostMapping
    public String createProduct(@Valid @ModelAttribute CreateProductForm form,
                                BindingResult result, Model model) {
        // Validate đầu vào
        if (result.hasErrors()) {
            return "products/create";  // Render lại form với lỗi
        }
 
        // Ủy quyền cho service
        productService.create(form.toCommand());
        return "redirect:/products";  // Post-Redirect-Get pattern
    }
}

// Tầng Model — logic nghiệp vụ, không biết gì về HTTP
@Service
public class ProductService {
 
    private final ProductRepository productRepository;
 
    public List<Product> findAll() {
        return productRepository.findAll();
    }
 
    public Product create(CreateProductCommand command) {
        // Business rule: tên sản phẩm phải duy nhất
        if (productRepository.existsByName(command.getName())) {
            throw new DuplicateProductException(command.getName());
        }
 
        Product product = new Product(
            command.getName(),
            command.getPrice(),
            command.getCategory()
        );
        return productRepository.save(product);
    }
}

<!-- View (Thymeleaf template) — render dữ liệu, không có business logic -->
<div th:each="product : ${products}">
    <h3 th:text="${product.name}">Product Name</h3>
    <p th:text="${product.formattedPrice}">$0.00</p>
    <a th:href="@{/products/{id}(id=${product.id})}">Xem Chi Tiết</a>
</div>

// Controller — xử lý HTTP requests
const productController = {
  async listProducts(req: Request, res: Response) {
    const products = await productService.findAll();
    res.render('products/list', { products });
  },
 
  async createProduct(req: Request, res: Response) {
    try {
      await productService.create(req.body);
      res.redirect('/products');
    } catch (error) {
      if (error instanceof DuplicateProductError) {
        res.render('products/create', { error: error.message });
        return;
      }
      throw error;
    }
  },
};
 
// Routes
router.get('/products', productController.listProducts);
router.post('/products', validateProduct, productController.createProduct);

// View interface — định nghĩa những gì Presenter có thể yêu cầu View làm
interface ProductListView {
    fun showProducts(products: List<ProductViewModel>)
    fun showLoading()
    fun hideLoading()
    fun showError(message: String)
    fun showEmptyState()
    fun navigateToDetail(productId: String)
}
 
// Presenter — toàn bộ presentation logic, không có Android dependency
class ProductListPresenter(
    private val productRepository: ProductRepository,
    private val dateFormatter: DateFormatter
) {
    private var view: ProductListView? = null
 
    fun attachView(view: ProductListView) {
        this.view = view
    }
 
    fun detachView() {
        this.view = null
    }
 
    fun loadProducts() {
        view?.showLoading()
 
        try {
            val products = productRepository.findAll()
 
            if (products.isEmpty()) {
                view?.showEmptyState()
            } else {
                // Presentation logic: chuyển đổi domain objects sang view models
                val viewModels = products.map { product ->
                    ProductViewModel(
                        id = product.id,
                        name = product.name,
                        price = "$${product.price}",
                        formattedDate = dateFormatter.format(product.createdAt),
                        isOnSale = product.discountPercent > 0,
                        saleBadge = if (product.discountPercent > 0)
                            "${product.discountPercent}% OFF" else null
                    )
                }
                view?.showProducts(viewModels)
            }
        } catch (e: Exception) {
            view?.showError("Failed to load products. Please try again.")
        } finally {
            view?.hideLoading()
        }
    }
 
    fun onProductClicked(productId: String) {
        view?.navigateToDetail(productId)
    }
}

// View implementation (Android Activity) — chỉ render UI
class ProductListActivity : AppCompatActivity(), ProductListView {
 
    private lateinit var presenter: ProductListPresenter
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_product_list)
 
        presenter = ProductListPresenter(
            ProductRepositoryImpl(database),
            AndroidDateFormatter()
        )
        presenter.attachView(this)
        presenter.loadProducts()
    }
 
    override fun showProducts(products: List<ProductViewModel>) {
        adapter.submitList(products)
        recyclerView.visibility = View.VISIBLE
        emptyView.visibility = View.GONE
    }
 
    override fun showLoading() {
        progressBar.visibility = View.VISIBLE
    }
 
    override fun hideLoading() {
        progressBar.visibility = View.GONE
    }
 
    override fun showError(message: String) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
    }
 
    override fun showEmptyState() {
        recyclerView.visibility = View.GONE
        emptyView.visibility = View.VISIBLE
    }
 
    override fun navigateToDetail(productId: String) {
        startActivity(ProductDetailActivity.intent(this, productId))
    }
 
    override fun onDestroy() {
        presenter.detachView()
        super.onDestroy()
    }
}

// Unit test — test Presenter không cần bất kỳ Android framework nào
class ProductListPresenterTest {
 
    private val mockView = mock<ProductListView>()
    private val mockRepository = mock<ProductRepository>()
    private val mockDateFormatter = mock<DateFormatter>()
    private val presenter = ProductListPresenter(mockRepository, mockDateFormatter)
 
    @Before
    fun setUp() {
        presenter.attachView(mockView)
    }
 
    @Test
    fun `should show products when loaded successfully`() {
        // Arrange
        val products = listOf(
            Product("1", "Widget", 9.99, createdAt = someDate, discountPercent = 0)
        )
        whenever(mockRepository.findAll()).thenReturn(products)
        whenever(mockDateFormatter.format(someDate)).thenReturn("Jan 20, 2026")
 
        // Act
        presenter.loadProducts()
 
        // Assert
        verify(mockView).showLoading()
        verify(mockView).showProducts(listOf(
            ProductViewModel("1", "Widget", "$9.99", "Jan 20, 2026", false, null)
        ))
        verify(mockView).hideLoading()
        verify(mockView, never()).showError(any())
    }
 
    @Test
    fun `should show empty state when no products`() {
        whenever(mockRepository.findAll()).thenReturn(emptyList())
 
        presenter.loadProducts()
 
        verify(mockView).showEmptyState()
    }
 
    @Test
    fun `should show error on failure`() {
        whenever(mockRepository.findAll()).thenThrow(RuntimeException("DB error"))
 
        presenter.loadProducts()
 
        verify(mockView).showError("Failed to load products. Please try again.")
    }
}

// Model — domain entity
interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  createdAt: Date;
  discountPercent: number;
}
 
// ViewModel (Angular Component class đóng vai trò ViewModel)
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
})
export class ProductListComponent implements OnInit {
  // State có thể quan sát — View bind vào những thuộc tính này
  products$: Observable<ProductViewModel[]>;
  isLoading$ = new BehaviorSubject<boolean>(false);
  error$ = new BehaviorSubject<string | null>(null);
  isEmpty$: Observable<boolean>;
 
  private searchQuery$ = new BehaviorSubject<string>('');
 
  constructor(private productService: ProductService) {
    // Luồng dữ liệu reactive: thay đổi search query → products tự động cập nhật
    this.products$ = this.searchQuery$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((query) => {
        this.isLoading$.next(true);
        this.error$.next(null);
        return this.productService.search(query).pipe(
          map((products) => products.map(this.toViewModel)),
          catchError((err) => {
            this.error$.next('Failed to load products');
            return of([]);
          }),
          finalize(() => this.isLoading$.next(false)),
        );
      }),
    );
 
    this.isEmpty$ = this.products$.pipe(map((products) => products.length === 0));
  }
 
  ngOnInit() {
    this.searchQuery$.next(''); // Kích hoạt load ban đầu
  }
 
  // Command — View gọi khi người dùng nhập
  onSearch(query: string) {
    this.searchQuery$.next(query);
  }
 
  // Presentation logic — chuyển đổi domain model sang format thân thiện với view
  private toViewModel(product: Product): ProductViewModel {
    return {
      id: product.id,
      name: product.name,
      displayPrice: `$${product.price.toFixed(2)}`,
      category: product.category,
      isOnSale: product.discountPercent > 0,
      saleBadge: product.discountPercent > 0
        ? `${product.discountPercent}% OFF`
        : null,
    };
  }
}

<!-- View (Angular template) — bind vào các observable của ViewModel -->
<div class="product-list">
  <input
    type="text"
    placeholder="Tìm kiếm sản phẩm..."
    (input)="onSearch($event.target.value)" />
 
  <!-- Trạng thái loading -->
  <div *ngIf="isLoading$ | async" class="loading">Đang tải...</div>
 
  <!-- Trạng thái lỗi -->
  <div *ngIf="error$ | async as error" class="error">{{ error }}</div>
 
  <!-- Trạng thái rỗng -->
  <div *ngIf="isEmpty$ | async" class="empty">Không tìm thấy sản phẩm.</div>
 
  <!-- Danh sách sản phẩm -->
  <div *ngFor="let product of products$ | async" class="product-card">
    <h3>{{ product.name }}</h3>
    <span class="price">{{ product.displayPrice }}</span>
    <span *ngIf="product.isOnSale" class="sale-badge">
      {{ product.saleBadge }}
    </span>
  </div>
</div>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useProductService } from '@/services/productService';
 
// ViewModel — reactive state
const searchQuery = ref('');
const products = ref<Product[]>([]);
const isLoading = ref(false);
const error = ref<string | null>(null);
 
const productService = useProductService();
 
// Computed properties — state phái sinh (presentation logic)
const productViewModels = computed(() =>
  products.value.map((product) => ({
    id: product.id,
    name: product.name,
    displayPrice: `$${product.price.toFixed(2)}`,
    isOnSale: product.discountPercent > 0,
    saleBadge:
      product.discountPercent > 0
        ? `${product.discountPercent}% OFF`
        : null,
  })),
);
 
const isEmpty = computed(
  () => !isLoading.value && products.value.length === 0,
);
 
// Watcher — luồng dữ liệu reactive
watch(
  searchQuery,
  async (query) => {
    isLoading.value = true;
    error.value = null;
    try {
      products.value = await productService.search(query);
    } catch (e) {
      error.value = 'Failed to load products';
    } finally {
      isLoading.value = false;
    }
  },
  { immediate: true },
);
</script>
 
<template>
  <div class="product-list">
    <input v-model="searchQuery" placeholder="Tìm kiếm sản phẩm..." />
 
    <div v-if="isLoading">Đang tải...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="isEmpty" class="empty">Không tìm thấy sản phẩm.</div>
 
    <div v-for="product in productViewModels" :key="product.id">
      <h3>{{ product.name }}</h3>
      <span>{{ product.displayPrice }}</span>
      <span v-if="product.isOnSale" class="badge">{{ product.saleBadge }}</span>
    </div>
  </div>
</template>

// Custom hook đóng vai trò ViewModel
function useProductList() {
  const [products, setProducts] = useState<Product[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
 
  // State phái sinh (presentation logic)
  const productViewModels = useMemo(
    () =>
      products.map((p) => ({
        id: p.id,
        name: p.name,
        displayPrice: `$${p.price.toFixed(2)}`,
        isOnSale: p.discountPercent > 0,
        saleBadge: p.discountPercent > 0 ? `${p.discountPercent}% OFF` : null,
      })),
    [products],
  );
 
  const isEmpty = !isLoading && products.length === 0;
 
  useEffect(() => {
    let cancelled = false;
    setIsLoading(true);
    setError(null);
 
    productService
      .search(searchQuery)
      .then((data) => {
        if (!cancelled) setProducts(data);
      })
      .catch(() => {
        if (!cancelled) setError('Failed to load products');
      })
      .finally(() => {
        if (!cancelled) setIsLoading(false);
      });
 
    return () => {
      cancelled = true;
    };
  }, [searchQuery]);
 
  return { productViewModels, isLoading, error, isEmpty, searchQuery, setSearchQuery };
}
 
// Component là View mỏng — chỉ render state từ ViewModel
function ProductList() {
  const { productViewModels, isLoading, error, isEmpty, searchQuery, setSearchQuery } =
    useProductList();
 
  return (
    <div>
      <input
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="Tìm kiếm sản phẩm..."
      />
 
      {isLoading && <div>Đang tải...</div>}
      {error && <div className="error">{error}</div>}
      {isEmpty && <div>Không tìm thấy sản phẩm.</div>}
 
      {productViewModels.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <span>{product.displayPrice}</span>
          {product.isOnSale && <span className="badge">{product.saleBadge}</span>}
        </div>
      ))}
    </div>
  );
}

// MVI trong Kotlin
sealed class ProductIntent {
    data class Search(val query: String) : ProductIntent()
    object Refresh : ProductIntent()
    data class SelectProduct(val id: String) : ProductIntent()
}
 
data class ProductState(
    val products: List<ProductViewModel> = emptyList(),
    val isLoading: Boolean = false,
    val error: String? = null,
)
 
class ProductViewModel : ViewModel() {
    private val _state = MutableStateFlow(ProductState())
    val state: StateFlow<ProductState> = _state
 
    fun processIntent(intent: ProductIntent) {
        when (intent) {
            is ProductIntent.Search -> search(intent.query)
            is ProductIntent.Refresh -> refresh()
            is ProductIntent.SelectProduct -> selectProduct(intent.id)
        }
    }
 
    private fun search(query: String) {
        _state.update { it.copy(isLoading = true, error = null) }
        viewModelScope.launch {
            try {
                val products = repository.search(query)
                _state.update { it.copy(products = products, isLoading = false) }
            } catch (e: Exception) {
                _state.update { it.copy(error = e.message, isLoading = false) }
            }
        }
    }
}

View → Action (Intent) → Reducer → Store (Model) → View

// ❌ Fat Controller — business logic trong controller
@Controller
public class OrderController {
    @PostMapping("/orders")
    public String createOrder(@ModelAttribute OrderForm form, Model model) {
        // Business rules trong controller
        if (form.getItems().isEmpty()) {
            model.addAttribute("error", "Order must have items");
            return "orders/create";
        }
 
        double total = 0;
        for (var item : form.getItems()) {
            Product product = productRepo.findById(item.getProductId());
            if (product.getStock() < item.getQuantity()) {
                model.addAttribute("error", "Insufficient stock");
                return "orders/create";
            }
            total += product.getPrice() * item.getQuantity();
        }
 
        if (total < 10.0) {
            model.addAttribute("error", "Minimum order is $10");
            return "orders/create";
        }
 
        // ... lưu order
    }
}

// ✅ Thin Controller — ủy quyền cho service
@Controller
public class OrderController {
    @PostMapping("/orders")
    public String createOrder(@Valid @ModelAttribute OrderForm form,
                              BindingResult result, Model model) {
        if (result.hasErrors()) return "orders/create";
 
        try {
            orderService.createOrder(form.toCommand());
            return "redirect:/orders";
        } catch (BusinessException e) {
            model.addAttribute("error", e.getMessage());
            return "orders/create";
        }
    }
}

// ❌ Business logic trong ViewModel
const useOrderForm = () => {
  const [items, setItems] = useState<CartItem[]>([]);
 
  // Đây là business logic, không phải presentation logic
  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const canCheckout = total >= 10 && items.length > 0;
  const shippingCost = total > 50 ? 0 : 5.99;
  const tax = total * 0.08;
  const grandTotal = total + shippingCost + tax;
 
  // ...
};

// ✅ Business logic trong Model/Service
class OrderCalculator {
  static calculate(items: CartItem[]): OrderSummary {
    const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
    return {
      subtotal,
      shippingCost: subtotal > 50 ? 0 : 5.99,
      tax: subtotal * 0.08,
      grandTotal: subtotal + (subtotal > 50 ? 0 : 5.99) + subtotal * 0.08,
      canCheckout: subtotal >= 10 && items.length > 0,
    };
  }
}
 
// ViewModel chỉ xử lý presentation
const useOrderForm = () => {
  const [items, setItems] = useState<CartItem[]>([]);
  const summary = useMemo(() => OrderCalculator.calculate(items), [items]);
 
  return {
    items,
    displayTotal: `$${summary.grandTotal.toFixed(2)}`,
    displayShipping: summary.shippingCost === 0 ? 'Miễn phí' : `$${summary.shippingCost}`,
    canCheckout: summary.canCheckout,
    // ...
  };
};