Clean Swift(VIP Architecture) Tutorial in UIKit for beginners — Part 2

Before To Start

In the Part 1, we covered the basic concepts of Clean Swift (VIP architecture).

And now I will show you how the VIP architecture operates using a very simple code example.

Let’s suppose that we are creating a scene where the user enters three numbers into a text field, clicks the calculation button, and displays some message of calculation result on the screen. Here, the calculation would be a summation of three integer numbers.

Note that I am writing this article at a level that even beginners, like me experiencing VIP architecture for the first time, can easily understand. This is not for advanced users.

Step 1: Playground Project Settings

Create new blank project.

First, let’s make a blank Xcode Playground project and remember this figure introduced in the Part 1.

Then, let’s create View, ViewController, NextViewController(this is optional and necessary for navigation to the next scene), Interactor, Worker, Presenter, Router and Configurator. Also, we need Model, too.

In a real project, we would separate files for each component, but since we are practicing with the easiest example code, we will write all classes or structures in one playground file as below.

Finally, don’t forget to make View and ViewController inherit UIView and UIViewController, respectively.

Step 2: Configure The Model

In this step, let’s create a model that will be used for communication between VIP components as follows.

In the Model, there should be one object for each use case. For each use case consists of Request, Response, and ViewModel.

Data cycle [source: https://zonneveld.dev/the-clean-swift-architecture-explained/]

• Request: When the ViewController asks the interactor to request an action, the ViewController will add a Request object. This object contains data for the interactor’s business logic.
• Response: Once the data has been processed by Interactor, it will return a Response object to the Presenter.
• ViewModel: The Presenter will parse the Response received from Interactor. And this will be sent to the ViewController to display something.

In this tutorial, Request has firstNumber, secondNumber and thirdNumber since the app should receive three integer numbers through user’s input. This Request will be sent from ViewController To Interactor.

Then the answer will be also an integer number which is the sum of the given three numbers. This answer will be contained by Response.

The Presenter will receive the Response from the Interactor and reproduce data into a form that can be displayed on the screen.

For example, if the answer(integer) is 10, resultMessage contained by ViewModel would be “The answer is 10.”(string)

Step 3: Define Protocols

When implementing the VIP architecture, we should design protocols and ensure that each component conforms to a specific protocol. This will help us to improve the maintainability, scalability, and testability of application.

If you want to know more about this, please refer to my previous post.

Basics of Dependency Injection (DI) and Dependency Inversion Principle (DIP) in Swift

Then, let’s define the protocols for ViewController, Interactor, and Presenter as follows.

ViewController

• BusinessProcessable: Lists the properties or methods for the Interactor to perform business logic using the request received from the ViewController.
• RoutingProcessable: Lists the properties or methods for the Router to perform navigation logic.

Interactor

• PresentationProcessable: Lists the properties or methods for Presenter to perform parsing the Response received from the Interactor.

Presenter

• DisplayProcessable: Lists the properties or methods for ViewController to perform displaying with ViewModel data received from the Presenter.

We have defined the model and protocol so far. Note that the tutorial Step 4 will be continued in Part 3.

Clean Swift(VIP Architecture) Tutorial in UIKit for beginners — Part 3