4 min read

Getting Started with the VIPER Architecture Pattern for iOS Application Development

Getting Started with the VIPER Architecture Pattern for iOS Application Development

When you are planning to build an app, one of the most important decisions is to choose how to structure your app’s core.

Better saying, you need to decide which architecture you should adopt to build all your screens, features, and contexts. You need to know how to organize your app in order to make it maintainable for the long term, testable, scalable, and understandable by anyone who enters the project sometime later. In this article, we will get familiar with a design pattern called VIPER (View, Interactor, Presenter, Entity, and Router.) for iOS development.

What is VIPER?

VIPER is an architectural pattern like MVC or MVVM, but it separates the code further by single responsibility.
One feature, one module. For each module, VIPER has five different classes with distinct roles. No class goes beyond its sole purpose.

Each of the letters in VIPER stand for a component of the architecture: View, Interactor, Presenter, Entity and Router.

  • View is the user interface. This layer is the ViewController together with the UIView(or xib/storyboard)
  • Interactor contains business logic related to the data (Entities) or networking, like creating new instances of entities or fetching them from the server. For those purposes you’ll use some Services and Managers which are not considered as a part of VIPER module but rather an external dependency
  • Presenter is directing data between the view and interactor, taking user actions and calling to router to move the user between views.The only class to communicate with all the other components.
  • Entity is your plain data objects, not the data access layer, because that is a responsibility of the Interactor.
  • Router handles navigation between the VIPER modules.
VIPER

Below I will explain an example of VIPER

Protocols

I have created a separate file for all the protocols

protocol NewsListView: AnyObject {
}

protocol NewsListPresenter: AnyObject {
    func viewDidLoad(view: NewsListView)
}

protocol NewsListInteractorInput: AnyObject {
}

protocol NewsListInteractorOutput: AnyObject {
}

protocol NewsListRouter: AnyObject {
}

protocol NewsListRepo: AnyObject {

}

As you can see from the above code, this is the main contract agreement between VIPER layers.

Presenter

PresenterImplementation is an implementation of NewsListPresenter protocol and confirm the NewsListInteractorOutput.

In this layer presenter has a reference object from View, Router and Interactor

final class NewsListPresenterImplementation: NewsListPresenter {
    private weak var view: NewsListView?
    private let router: NewsListRouter
    private let interactor: NewsListInteractorInput
    
    init(router: NewsListRouter, interactor: NewsListInteractorInput) {        self.router = router
        self.interactor = interactor
    }
    
    func viewDidLoad(view: NewsListView) {
        self.view = view
    }
}

extension NewsListPresenterImplementation: NewsListInteractorOutput {
}

Interactor

Interactor is an implementation of NewsListInteractorInput protocol

NewsListRepo is responsible to fetch the data from network or Data provider

final class NewsListInteractor: NewsListInteractorInput {
    weak var output: NewsListInteractorOutput?
    private let repo: NewsListRepo
    init(repo: NewsListRepo) {
        self.repo = repo
    }
}

View

View is a view with a confirmation of NewsListView protocol and it has reference to the presenter

final class NewsListViewController: UIViewController, NewsListView {

    private let presenter: NewsListPresenter    
    init(presenter: NewsListPresenter) {
        self.presenter = presenter
        super.init(nibName: nil, bundle: nil)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        presenter.viewDidLoad(view: self)
    }
}

Entity

struct News {
    let title: String
    let url: URL
}

Router

final class NewsListRouterImplementation: NewsListRouter {  
   weak var viewController: UIViewController?
}

Now we need to update our VIPER module to fetch the news data, yes as you are thinking right now, we need to update our contract protocols first

protocol NewsListView: AnyObject {
    func show(newsList: [News])
}

protocol NewsListPresenter: AnyObject {
    func viewDidLoad(view: NewsListView)
}

protocol NewsListInteractorInput: AnyObject {
    func fetchNewsList()
}

protocol NewsListInteractorOutput: AnyObject {
    func fetchNewsListSuccess(newsList: [News])
    func fetchNewsListFailure(error: Error?)
}

protocol NewsListRepo: AnyObject {
    func fetchNewsList(completion: @escaping ([News]?, Error?) -> Void)
}

protocol NewsListRouter: AnyObject {
}

Let’s now add implementation for theses added funcs in the protocols

Interactor

final class NewsListRepoImplementationl: NewsListRepo {
    func fetchNewsList(completion: @escaping ([News]?, Error?) -> Void) {
        // Fetch the data with completion
    }
}
final class NewsListInteractor: NewsListInteractorInput {
    
    weak var output: NewsListInteractorOutput?

    private let repo: NewsListRepo

    init(repo: NewsListRepo) {
        self.repo = repo
    }
    
    func fetchNewsList() {
        repo.fetchNewsList { news, error in
            if let newsList = news {
                self.output?.fetchNewsListSuccess(newsList: newsList)
            } else {
                self.output?.fetchNewsListFailure(error: error)
            }
        }
    }
}

Presenter

final class NewsListPresenterImplementation: NewsListPresenter{

    private weak var view: NewsListView?
    private let router: NewsListRouter
    private let interactor: NewsListInteractorInput

    init(router: NewsListRouter, interactor: NewsListInteractorInput) {
        self.router = router
        self.interactor = interactor
    }

    func viewDidLoad(view: NewsListView) {
        self.view = view
        // Fetch the list from the interactor
        interactor.fetchNewsList()
    }
}

extension NewsListPresenterImplementation: NewsListInteractorOutput {
    func fetchNewsListSuccess(newsList: [News]) {
        self.view?.show(newsList: newsList)
    }
    
    func fetchNewsListFailure(error: Error?) {
        // show Error
    }
}

View

final class NewsListViewController: UIViewController, NewsListView {

    private let presenter: NewsListPresenter

    init(presenter: NewsListPresenter) {
        self.presenter = presenter

        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        presenter.viewDidLoad(view: self)
    }

    func show(newsList: [News]) {
        // show the news in the UI 
    }
}

Now, we are fetching the news list from the interactor layer, then update the presenter with the result and the presenter is prepare the data for the View and boom pass it

Last piece from the puzzle here is to build our module, so I have created a builder class to launch my module

final class NewsListBuilder {

    func build() -> UIViewController {
        let router = NewsListRouterImplementation()
        let repo = NewsListRepoImplementation()
        let interactor = NewsListInteractor(repo: repo)
        let presenter = NewsListPresenterImplementation(router: router, interactor: interactor)
        let view = NewsListViewController(presenter: presenter)

        router.viewController = view
        interactor.output = presenter
        return view
    }
}

Conclusion

VIPER is sounds complex in the beginning but it’s very clean architecture. It isolates each module from others. So changing or fixing bugs is very easy as you only have to update a specific module. Also for having a modular approach VIPER creates a very good environment for unit testing. As each module is independent of others, it maintains low coupling very well. So, dividing work among co-developers is also pretty simple.

My advice if you are going to use VIPER in your project, the smartest thing would be to use an automatic module structure generator. Otherwise creating files for modules will be a big hustle, There are few generators available online.

Thank you for reading!

Happy coding :v: