VIPER Architecture on iOS Apps.

Hi everyone,

In today’s world software project development becoming more complicated then we thought before starting a project. Adding new feature implementation to the project can make everything complicate. Reading the code and developing the project becoming harder than before. In this situation, we have a solution named “Multi-Layer Architecture”.

In iOS development, Apple recommends an architecture to us named “MVC” but when we develop big projects with big features, MVC can not be enough to make code clean. Apple’s MVC has 3 layers named “Model-View-Controller”. In big projects, the Controller Layer can have more than 1000 lines of code. Code complexity on Controller Layer is pulling us down. In this situation, we need to separate the Controller Layer to other layers. There are more other Architectures doing this separation but today we will focus on VIPER Architecture. Let’s start then,

What VIPER means?

VIPER architecture has 5 different layers and in VIPER names each character represents a layers first letter. These layers are:

View: View class keeps all UI components and user response of these UI components.

Interactor: Interactor class mostly has business logic and primarily makes API calls to network or taking data from locale databases.

Presenter: Presenter class is the main core of VIPER Architecture. It communicates all of each layer and organizes them.

Entity(Model): More people like me names this layer with the “Model” name. Model classes take data modeling rules.

Router(Wireframe): More people names this layer with the “Wireframe” name but I prefer to use the “Router” name. Router class builder class of the other layers. Another main role of it is navigation and presentation staff.

For any ViewController you need to create all of these layers but this will take lots of time for us. For this problem, Xcode has a solution. You can create your own code templates and you can easily create all layers with one move or you can download a ready to use a template. I searched the internet and took a best-fit template for me and edited that for my use habits. You can download it if you want.

How these layers communicate with others?

In VIPER Architecture layers can not communicate directly to each other. Each layer has to communicate via the Presenter Layer as the main core layer. To communicate with Presenter mostly VIPER Architecture use protocol orientation.

If you want to work all with protocols together you can create a new file named “Protocols”. I mostly prefer this way.

Here is how should they communicate with each other:

Example Project

I build a news project using VIPER and protocol orientation as an example. Before to dive into codes you can download it from here. I build 2 pages of example. Let’s start with the news list page:

Protocols: We need to first create our protocols to create communication between these classes. Here is our implementation of it:

Router: Router class of this page has 2 functions. The first function is a static builder function named “createModule”. We create and build the other layers classes on this function. Also if the controller class needs a UINavigationController as root controller itself, we create that navigation on here and resign it to class to use it back later. The other function is named “routeToDetail”. This function helps us to route a detail page with a news data. Here how it implemented:

Entity(Model): Our model class is represented response model of API Call. Here how its implemented:

Presenter: After creating protocols and models we can create the Presenter Layer.

In this example, the Presenter Layer has 6 protocol delegation functions for communication with other layers. 2 of its help to communicate with Interactor Class and other 4 help to communicate with View Class. After getting data from Interactor, Presenter Layer talks with View Layer to present data to UI elements. Here is how it implement:

Interactor: Interactor class is the business logic of the app pages. It talks with API or locale databases and makes response mapping. In this example, we fetch news on “newsapi.org” with a “bitcoin” query. After the API call finish, Interactor sends data-error to the Presenter Layer. Here how it implemented:

View-Controller: When using VIPER architecture we can prefer to use .xib files to storyboard files. It helps to manage each page as a file by self. Then we project does not have huge Storyboard files. Also our Controller Class only responsible for UI elements and their user responses like UITableViewDelegate functions. Here how it is implemented:

Conclusion

Now, after these implementations, we can easily see our Controller Class has less than 100 lines of code. Every logic of a page has own class. Managing big projects can be really easy with this kind of Multi-Layer Architectures.