Scribd
Upload
8 views7 pages

MVC, MVVM, And MVP Design Patterns in Swift _ by Knyaz Harutyunyan _ Medium

The document explains three architectural patterns: MVC, MVVM, and MVP, used in app development with UIKit and SwiftUI. It details the roles of Model, View, and Controller/Presenter/ViewModel in each architecture, emphasizing the separation of concerns to enhance code maintainability and testability. Examples of each architecture are provided, showcasing how they manage data and user interactions effectively.

Uploaded by

uthaman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views7 pages

MVC, MVVM, And MVP Design Patterns in Swift _ by Knyaz Harutyunyan _ Medium

The document explains three architectural patterns: MVC, MVVM, and MVP, used in app development with UIKit and SwiftUI. It details the roles of Model, View, and Controller/Presenter/ViewModel in each architecture, emphasizing the separation of concerns to enhance code maintainability and testability. Examples of each architecture are provided, showcasing how they manage data and user interactions effectively.

Uploaded by

uthaman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

The MVC architecture is straightforward to understand and quite easy to

implement in UIKit. All architectures are created to make it easy, effective,


flexible, and fast to develop our app and prevent many mistakes that
developers can make without architecture.

Let’s dive into the MVC architecture and gain a deeper understanding of how
it works 🔥
# M — Model
The “Model” is responsible for business logic, network calls, parse data, and
so on. The “Model” does not need to know about the UI if you in the “Model”
use UI attributes it means your architecture goes wrong.

# V — View
The ‘View’ is responsible for representing UI elements such as UILabel,
UIView, UITextView, and so on. It should not have knowledge of the ‘Model.’
Including business logic and network calls within the ‘View’ indicates a
problem in your architecture.

# C — Controller
The “Controller” acts as an intermediary between the “Model” and the
“View”. It handles user input, communicates with the “Model” to fetch or
update data, and updates the “View” accordingly. You can see the above
image 🤷‍♂️
# The real example of MVC architecture in UIKit 🥶
You can check out my GitHub repository at the following link: 👉
TodoListApp. The ‘TodoListApp’ is built using the MVC architecture.

For the “Model” check out this page.


For the “View” check out this page.
For the “Controller” check out this page.

# MVVM stands for Model-View-ViewModel

The MVVM architecture is quite similar to the MVC design pattern. While it
shares many similarities with MVC, MVVM is widely used in SwiftUI, and it’s
especially beneficial when working with the Combine framework.

# M — Model
The “Model” in MVVM is similar to the “Model” in MVC. It represents the
data and business logic of the application. It defines how data is structured
and manipulated. In Swift, the “Model” can be implemented using classes,
structs, or enums.

# V — View
The “View” in MVVM is also similar to the “View” in MVC. It represents the
only UI elements and the “View” should only display data, and handle user
interactions, without containing application logic(business logic).

# VM — View-Model
The “ViewModel” acts as a mediator between the “Model” and the “View”.
The “ViewModel” is responsible for preparing and formatting data from the
“Model” for presentation in the “View”. “ViewModels” also handles user
input and interactions. They contain the business logic needed for specific
views.

# The real example of MVVM architecture in UIKit 🥶


# Model

struct Task {
var title: String
var completed: Bool
}

# ViewModel

class TaskListViewModel {
private var tasks: [Task] = [
Task(title: "Buy groceries", completed: false),
Task(title: "Read a book", completed: true),
Task(title: "Exercise", completed: false)
]

var taskCount: Int {


return tasks.count
}
func task(at index: Int) -> Task {
return tasks[index]
}

func addTask(title: String) {


let newTask = Task(title: title, completed: false)
tasks.append(newTask)
}

func toggleTask(at index: Int) {


tasks[index].completed.toggle()
}
}

# View

import UIKit

class TaskListViewController: UIViewController {


@IBOutlet private var tableView: UITableView!
@IBOutlet private var taskTextField: UITextField!

private var viewModel = TaskListViewModel()

override func viewDidLoad() {


super.viewDidLoad()
tableView.dataSource = self
}

@IBAction private func addButtonTapped() {


guard let taskTitle = taskTextField.text, !taskTitle.isEmpty else { retu
viewModel.addTask(title: taskTitle)
taskTextField.text = ""
tableView.reloadData()
}
}

extension TaskListViewController: UITableViewDataSource {


func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int)
return viewModel.taskCount
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)


let cell = tableView.dequeueReusableCell(withIdentifier: "TaskCell", for
let task = viewModel.task(at: indexPath.row)
cell.textLabel?.text = task.title
cell.accessoryType = task.completed ? .checkmark : .none
return cell
}
}

1. Task represents the “Model”, which defines the structure of a task.

2. TaskListViewModel is the “ViewModel”, responsible for managing tasks,


adding tasks, and updating their completion status.

3. TaskListViewController is the “View”, which displays the list of tasks in a


table view and allows the user to add new tasks. It communicates with
the ViewModel to perform these tasks.

# MVP stands for Model-View-Presenter

The MVP architecture is also similar to MVC architecture the same “Model”
layer, “View” layer, and additional “Presenter”. However, the MVP design
pattern has one difference from the MVC design pattern. Now the
ViewController(Controller layer) is considered as a view. which means it
will include only the view-related code, nothing more and all logic will be
implemented in the presenter.
View: The “View” includes both view and view controllers, taking care of
setting up the user interface and handling user interactions and all
events.

Presenter: The “Presenter” handles all the logic, such as responding to


user actions and updating the UI through the Protocols and Delegates. An
important aspect is that our presenter is UIKit-independent, making it
well-isolated and easily testable.

Model: The “Model” role will be exactly the same in MVC architecture.

# The real example of MVP architecture in UIKit 🥶


# Model

// Model: Represents a task


struct Task {
var title: String
var description: String
}

# View

// View: Displays task information


class TaskViewController: UIViewController {
@IBOutlet private var titleLabel: UILabel!
@IBOutlet private var descriptionLabel: UILabel!

private var presenter: TaskPresenterProtocol!

convenience init(presenter: TaskPresenterProtocol) {


self.init()
self.presenter = presenter
}

override func viewDidLoad() {


super.viewDidLoad()
configureView()
}

private func configureView() {


let task = presenter.fetchTask()
titleLabel.text = task.title
descriptionLabel.text = task.description
}

@IBAction private func completeButtonTapped() {


presenter.taskCompleted()
}
}

# Presenter

// Presenter: Manages the interaction between Model and View


protocol TaskPresenterProtocol {
func fetchTask() -> Task
func taskCompleted()
}

class TaskPresenter: TaskPresenterProtocol {


private var task: Task

init(task: Task) {
self.task = task
}

func fetchTask() -> Task {


return task
}

func taskCompleted() {
// Perform logic to mark the task as completed
}
}

Task: The task represents the “Model”, which defines the structure of a
task.

TaskPresenter: The TaskPresenter is the “Presenter”, which manages the


interaction between the “Model” and the “View”. It provides methods to
fetch task data and mark tasks as completed.

TaskViewController: The TaskViewController is the “View”, which


displays the task information and handles user interactions. It receives a
TaskPresenterProtocol instance and uses it to fetch and update task data.

You might also like