MVC, MVP & MVVM: Presentation Layer Patterns Compared

// Spring MVC — Controller handles HTTP, delegates to 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. Call the service (Model layer)
        List<Product> products = productService.findAll();
 
        // 2. Pass data to the View via Spring's Model
        model.addAttribute("products", products);
 
        // 3. Return the view name — Spring resolves to a 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) {
        // Input validation
        if (result.hasErrors()) {
            return "products/create";  // Re-render form with errors
        }
 
        // Delegate to service
        productService.create(form.toCommand());
        return "redirect:/products";  // Post-Redirect-Get pattern
    }
}

// Model layer — business logic, knows nothing about HTTP
@Service
public class ProductService {
 
    private final ProductRepository productRepository;
 
    public List<Product> findAll() {
        return productRepository.findAll();
    }
 
    public Product create(CreateProductCommand command) {
        // Business rule: product name must be unique
        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) — renders data, no 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})}">View Details</a>
</div>

// Controller — handles 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 — defines what the Presenter can tell the View to do
interface ProductListView {
    fun showProducts(products: List<ProductViewModel>)
    fun showLoading()
    fun hideLoading()
    fun showError(message: String)
    fun showEmptyState()
    fun navigateToDetail(productId: String)
}
 
// Presenter — all presentation logic, no Android dependencies
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: transform domain objects to 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) — only UI rendering
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 without any Android framework
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 acts as ViewModel)
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
})
export class ProductListComponent implements OnInit {
  // Observable state — View binds to these
  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) {
    // Reactive data flow: search query changes → products update automatically
    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(''); // Trigger initial load
  }
 
  // Command — View calls this on user input
  onSearch(query: string) {
    this.searchQuery$.next(query);
  }
 
  // Presentation logic — transform domain model to view-friendly format
  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) — binds to ViewModel observables -->
<div class="product-list">
  <input
    type="text"
    placeholder="Search products..."
    (input)="onSearch($event.target.value)" />
 
  <!-- Loading state -->
  <div *ngIf="isLoading$ | async" class="loading">Loading...</div>
 
  <!-- Error state -->
  <div *ngIf="error$ | async as error" class="error">{{ error }}</div>
 
  <!-- Empty state -->
  <div *ngIf="isEmpty$ | async" class="empty">No products found.</div>
 
  <!-- Product list -->
  <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 — derived state (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 — reactive data flow
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="Search products..." />
 
    <div v-if="isLoading">Loading...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="isEmpty" class="empty">No products found.</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 acts as ViewModel
function useProductList() {
  const [products, setProducts] = useState<Product[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
 
  // Derived state (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 is a thin View — just renders ViewModel state
function ProductList() {
  const { productViewModels, isLoading, error, isEmpty, searchQuery, setSearchQuery } =
    useProductList();
 
  return (
    <div>
      <input
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="Search products..."
      />
 
      {isLoading && <div>Loading...</div>}
      {error && <div className="error">{error}</div>}
      {isEmpty && <div>No products found.</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 in 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 in the controller
@Controller
public class OrderController {
    @PostMapping("/orders")
    public String createOrder(@ModelAttribute OrderForm form, Model model) {
        // Business rules in the 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";
        }
 
        // ... save order
    }
}

// ✅ Thin Controller — delegates to 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 in ViewModel
const useOrderForm = () => {
  const [items, setItems] = useState<CartItem[]>([]);
 
  // This is business logic, not 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 in 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 only handles 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 ? 'Free' : `$${summary.shippingCost}`,
    canCheckout: summary.canCheckout,
    // ...
  };
};