VIPER-Architecture for iOS project with simple demo example.

Bipin Pandey
Resume and CV Builder App
4 min readJul 4, 2018

--

While creating apps we may need to face the different Design Architectural Patterns depends upon the project type and behavior.We always need to figure out the best architecture depends upon the project requirements and it’s behavior before initiating the project. Being an app developer, we need to know different design pattern and architectures. Some of the patterns that most of the app developers are used to are Model-View-Controller(MVC), Model-View-Presenter(MVP), Model-View-ViewModel(MVVM), and the one which we are going to learn VIPER(View-Interactor-Presenter-Entity-Router) etc.

Architecture means a lot to a project. It’s well known in the field of architecture that we shape our buildings, and afterward our buildings shape us. As all programmers eventually learn, this applies just as well to building software. These architecture helps us to minimize code duplication, prevents high coupling and standardize a common way of writing code that provides a general solution for reoccurring situation while developing a software.

So, What is VIPER architecture?

VIPER is a backronym for View, Interactor, Presenter, Entity, and Router.

This architecture is based on Single Responsibility Principle which leads to a clean architecture.

  • View: The responsibility of the view is to send the user actions to the presenter and shows whatever the presenter tells it.
  • Interactor: This is the backbone of an application as it contains the business logic.
  • Presenter: Its responsibility is to get the data from the interactor on user actions and after getting data from the interactor, it sends it to the view to show it. It also asks the router/wireframe for navigation.
  • Entity: It contains basic model objects used by the Interactor.
  • Router: It has all navigation logic for describing which screens are to be shown when. It is normally written as a wireframe.

Building iOS application with VIPER architecture

I have created a detailed sample app using VIPER architecture for iOS which you can download on Github. Let see the project structure for better understanding.

After the completion of the project you will get the result like:

Rest API used in the project

REST APIs is often used in mobile applications, social networking Web sites, mashup tools, and automated business processes. The REST style emphasizes that interactions between clients and services is enhanced by having a limited number of operations. Using this link that are mentioned below we are trying to fetch the json data.

Screen 1- Notice-Module: When you open the app you will get the notice list result containing notice-title, notice-brief, notice-filesource which is fetched using Alamofire using this notice-api.

Notice-Module-API: https://api.myjson.com/bins/1bsqcn/

Screen 2- Movie-Module: If you click any of the item of the table list you will push to another movie-view-controller which contains image, title and brief which is fetched using Alamofire using this movie-api.

Movie-Module-API: https://api.myjson.com/bins/1h87n6

Podfile:

In the podfile we have included the Alamofire to call rest apis, AlamofireImage to load images in the tableView and AlamofireObjectMapper to map the model or entity.

AppConstants.swift

NoticeModel.swift

Entity layer provides a model which interactor use to create objects from the fetched data. The Entity is probably the simplest element inside a VIPER structure. One important thing to notice is that the Entity is different from the Data Access Layer, which should be handled by the Interactor. Here, we use object mapper to map the response JSON object and the MODEL object.

NoticeProtocol.swift

We use protocols to define the methods that a module component can call from other components on the same module. Simply we can say, protocols are use to communicate between the different layers .

NoticePresenter.swift

NoticeInteractor.swift

Interactor is the main integral section where all the business login resides. We create a instance of InteractorToPresenterProtocol to send the success or error response came through the APIs to Presenter.

NoticeViewController.swift

NoticeViewController only shows the data in the tableView that came through the APIs response. Here we implement the PresenterToViewProtocol as extension to receive the data came through the presenter. And we create the instance of presenter:ViewToPresenterProtocol for network APIs calls.

NoticeRouter.Swift

Router layer is responsible for wireframing of the application like changing between the different screens. In this project routing happen when the app first time launches. So inside AppDelegate’s ‘didFinishLaunchingWithOptions router’s createModule() function is called which returns a module. UIWindow class then show the view of that module.

AppDelegate.swift

In AppDelegate, we just create the instance of UINavigationViewController by passing the NoticeViewController instance and set this UINavigationView Controller as the root view controller.

Please clone or download the whole project from GITHUB. And finally, congratulation you learned the basics of VIPER. Happy Coding. If you find this article is helpful please do not forget to share, recommend and clap.

--

--