VIPER greatest practices for iOS builders

This submit is a bit of bit outdated, please count on a brand new model coming quickly…

Getting began with VIPER

To start with, it is best to learn my earlier (extra theoretical) article in regards to the VIPER structure itself. It is a fairly first rate writing explaining all of the VIPER elements and reminiscence administration. I’ve additionally polished it a bit of bit, final week. ⭐️

The issue with that article nevertheless was that I have never present you the actual deal, aka. the Swift code for implementing VIPER. Now after a full yr of initiatives utilizing this structure I can lastly share all my greatest practices with you.

So, let’s begin by making a model new Xcode undertaking, use the only view app template, identify the undertaking (VIPER greatest practices), use Swift and now you are able to take the following step of creating an superior “enterprise grade” iOS app.

Producing VIPER modules

Lesson 1: by no means create a module by hand, at all times use a code generator, as a result of it is a repetative process, it is fuckin’ boring plus it is best to give attention to extra necessary issues than making boilerplate code. You should utilize my light-weight module generator referred to as:

VIPERA

Simply obtain or clone the repository from github. You’ll be able to set up the binary instrument by operating swift run set up --with-templates. This can set up the vipera app below /usr/native/bin/ and the essential templates below the ~/.vipera listing. You should utilize your individual templates too, however for now I am going to work with the default one. 🔨

I normally begin with a module referred to as Important that is the foundation view of the applying. You’ll be able to generate it by calling vipera Important within the undertaking listing, so the generator can use the right undertaking identify for the header feedback contained in the template information.

Clear up the undertaking construction a bit of bit, by making use of my conventions for Xcode, because of this sources goes to an Belongings folder, and all of the Swift information into the Sources listing. These days I additionally change the AppDelegate.swift file, and I make a separate extension for the UIApplicationDelegate protocol.

Create a Modules group (with a bodily folder too) below the Sources listing and transfer the newly generated Important module below that group. Now repair the undertaking points, by deciding on the Information.plist file from the Belongings folder for the present goal. Additionally do take away the Important Interface, and after that you may safely delete the Important.storyboard and the ViewController.swift information, as a result of we’re not going to wish them in any respect.

Contained in the AppDelegate.swift file, you need to set the Important module’s view controller as the foundation view controller, so it ought to look considerably like this:

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder {

    var window: UIWindow?
}

extension AppDelegate: UIApplicationDelegate {

    func utility(_ utility: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        self.window = UIWindow(body: UIScreen.essential.bounds)
        self.window?.rootViewController = MainModule().buildDefault()
        self.window?.makeKeyAndVisible()

        return true
    }
}

Congratulations, you have created your very first VIPER module! 🎉

UITabBarController & VIPER

I’ve a brilliant easy answer for utilizing a tab bar controller in a VIPER module. First let’s generate a couple of new modules, these are going to be the tabs. I’ll use the JSONPlaceholder service, so we could say a separate tab for every of those sources: posts, albums, photographs, todos (with the identical module identify). Generate all of them, and transfer them into the modules folder.

Now, let’s generate yet another module referred to as Dwelling. This can implement our tab bar controller view. In order for you you should utilize the Important module for this objective, however I prefer to hold that for animation functions, to have a neat transition between the loading display and my Dwelling module (all of it will depend on your wants).

So the principle logic that we will implement is that this: the principle view will notify the presenter in regards to the viewDidAppear occasion, and the presenter will ask the router to show the Dwelling module. The Dwelling module’s view shall be a subclass of a UITabBarController, it’s going to additionally notify it is presenter about viewDidLoad, and the presenter will ask for the right tabs, through the use of its router.

Right here is the code, with out the interfaces:

class MainDefaultView: UIViewController {

    var presenter: MainPresenter?

    override func viewDidAppear(_ animated: Bool) {
        tremendous.viewDidAppear(animated)

        self.presenter?.viewDidAppear()
    }
}

extension MainDefaultPresenter: MainPresenter {

    func viewDidAppear() {
        self.router?.showHome()
    }
}

extension MainDefaultRouter: MainRouter {

    func showHome() {
        let viewController = HomeModule().buildDefault()
        self.viewController?.current(viewController, animated: true, completion: nil)
    }
}


extension HomeDefaultView: HomeView {

    func show(_ viewControllers: [UIViewController]) {
        self.viewControllers = viewControllers
    }
}



extension HomeDefaultPresenter: HomePresenter {

    func setupViewControllers() {
        guard let controllers = self.router?.getViewControllers() else {
            return
        }
        self.view?.show(controllers)
    }

}

extension HomeDefaultRouter: HomeRouter {

    func getViewControllers() -> [UIViewController] {
        return [
            PostsModule().buildDefault(),
            AlbumsModule().buildDefault(),
            PhotosModule().buildDefault(),
            TodosModule().buildDefault(),
        ].map { UINavigationController(rootViewController: $0) }
    }
}

class HomeModule {

    func buildDefault() -> UIViewController {
        

        presenter.setupViewControllers()

        return view
    }
}

There may be one further line contained in the Dwelling module builder operate that triggers the presenter to setup correct view controllers. That is simply because the UITabBarController viewDidLoad technique will get referred to as earlier than the init course of finishes. This behaviour is kind of undocumented however I assume it is an UIKit hack so as to preserve the view references (or only a easy bug… is anybody from Apple right here?). 😊

Anyway, now you’ve a correct tab bar contained in the undertaking built-in as a VIPER module. It is time to get some knowledge from the server and right here comes one other necessary lesson: not all the things is a VIPER module.

Providers and entities

As you may observed there isn’t any such factor as an Entity inside my modules. I normally wrap APIs, CoreData and plenty of extra knowledge suppliers as a service. This manner, all of the associated entities might be abstracted away, so the service might be simply changed (with a mock for instance) and all my interactors can use the service via the protocol definition with out figuring out the underlying implementation.

One other factor is that I at all times use my promise library if I’ve to take care of async code. The rationale behind it’s fairly easy: it is far more elegant than utilizing callbacks and optionally available consequence components. It is best to study guarantees too. So right here is a few a part of my service implementation across the JSONPlaceholder API:

protocol Api {

    func posts() -> Promise<[Post]>
    func feedback(for submit: Put up) -> Promise<[Comment]>
    func albums() -> Promise<[Album]>
    func photographs(for album: Album) -> Promise<[Photo]>
    func todos() -> Promise<[Todo]>
}



struct Put up: Codable {

    let id: Int
    let title: String
    let physique: String
}



class JSONPlaceholderService {

    var baseUrl = URL(string: "https://jsonplaceholder.typicode.com/")!

    enum Error: LocalizedError {
        case invalidStatusCode
        case emptyData
    }

    non-public func request<T>(path: String) -> Promise<T> the place T: Decodable {
        let promise = Promise<T>()
        let url = baseUrl.appendingPathComponent(path)
        print(url)
        URLSession.shared.dataTask(with: url) { knowledge, response, error in
            if let error = error {
                promise.reject(error)
                return
            }
            guard let httpResponse = response as? HTTPURLResponse, httpResponse.statusCode == 200 else {
                promise.reject(Error.invalidStatusCode)
                return
            }
            guard let knowledge = knowledge else {
                promise.reject(Error.emptyData)
                return
            }
            do {
                let mannequin = strive JSONDecoder().decode(T.self, from: knowledge)
                promise.fulfill(mannequin)
            }
            catch {
                promise.reject(error)
            }
        }.resume()
        return promise
    }
}

extension JSONPlaceholderService: Api {

    func posts() -> Promise<[Post]> {
        return self.request(path: "posts")
    }

    
}

Often I’ve a mock service implementation subsequent to this one, so I can simply take a look at out all the things I would like. How do I swap between these companies? Effectively, there’s a shared (singleton – do not hate me it is utterly high-quality 🤪) App class that I exploit principally for styling functions, however I additionally put the dependency injection (DI) associated code there too. This manner I can move round correct service objects for the VIPER modules.

class App {

    static let shared = App()

    non-public init() {

    }

    var apiService: Api {
        return JSONPlaceholderService()
    }
}



class PostsModule {

    func buildDefault() -> UIViewController {
        let view = PostsDefaultView()
        let interactor = PostsDefaultInteractor(apiService: App.shared.apiService)

        

        return view
    }
}



class PostsDefaultInteractor {

    weak var presenter: PostsPresenter?

    var apiService: Api

    init(apiService: Api) {
        self.apiService = apiService
    }
}

extension PostsDefaultInteractor: PostsInteractor {

    func posts() -> Promise<[Post]> {
        return self.apiService.posts()
    }

}

You are able to do this in a 100 different methods, however I at present want this method. This manner interactors can straight name the service with some further particulars, like filters, order, type, and so on. Principally the service is only a excessive idea wrapper across the endpoint, and the interactor is creating the fine-tuned (higher) API for the presenter.

Making guarantees

Implementing the enterprise logic is the duty of the presenter. I at all times use guarantees so a primary presenter implementation that solely masses some content material asynchronously and shows the outcomes or the error (plus a loading indicator) is just some strains lengthy. I am at all times attempting to implement the three primary UI stack components (loading, knowledge, error) through the use of the identical protocol naming conventions on the view. 😉

On the view aspect I am utilizing my good outdated assortment view logic, which considerably reduces the quantity of code I’ve to jot down. You’ll be able to go together with the normal method, implementing a couple of knowledge supply & delegate technique for a desk or assortment view will not be a lot code in any case. Right here is my view instance:

extension PostsDefaultPresenter: PostsPresenter {

    func viewDidLoad() {
        self.view?.displayLoading()
        self.interactor?.posts()
        .onSuccess(queue: .essential) { posts  in
            self.view?.show(posts)
        }
        .onFailure(queue: .essential) { error in
            self.view?.show(error)
        }
    }
}



class PostsDefaultView: CollectionViewController {

    var presenter: PostsPresenter?

    init() {
        tremendous.init(nibName: nil, bundle: nil)

        self.title = "Posts"
    }

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

    override func viewDidLoad() {
        tremendous.viewDidLoad()

        self.presenter?.viewDidLoad()
    }
}

extension PostsDefaultView: PostsView {

    func displayLoading() {
        print("loading...")
    }

    func show(_ posts: [Post]) {
        let grid = Grid(columns: 1, margin: UIEdgeInsets(all: 8))

        self.supply = CollectionViewSource(grid: grid, sections: [
            CollectionViewSection(items: posts.map { PostViewModel($0) })
        ])
        self.collectionView.reloadData()
    }

    func show(_ error: Error) {
        print(error.localizedDescription)
    }
}

The cell and the ViewModel is outdoors the VIPER module, I are inclined to dedicate an App folder for the customized utility particular views, extensions, view fashions, and so on.

class PostCell: CollectionViewCell {

    @IBOutlet weak var textLabel: UILabel!
}


class PostViewModel: CollectionViewViewModel<PostCell, Put up> {

    override func config(cell: PostCell, knowledge: Put up, indexPath: IndexPath, grid: Grid) {
        cell.textLabel.textual content = knowledge.title
    }

    override func dimension(knowledge: Put up, indexPath: IndexPath, grid: Grid, view: UIView) -> CGSize {
        let width = grid.width(for: view, gadgets: grid.columns)
        return CGSize(width: width, top: 64)
    }
}

Nothing particular, if you would like to know extra about this assortment view structure, it is best to learn my different tutorial about mastering assortment views.

Module communication

One other necessary lesson is to discover ways to talk between two VIPER modules. Usually I’m going with easy variables – and delegates if I’ve to ship again some form of information to the unique module – that I move round contained in the construct strategies. I’ll present you a extremely easy instance for this too.

class PostsDefaultRouter {

    weak var presenter: PostsPresenter?
    weak var viewController: UIViewController?
}

extension PostsDefaultRouter: PostsRouter {

    func showComments(for submit: Put up) {
        let viewController = PostDetailsModule().buildDefault(with: submit, delegate: self)
        self.viewController?.present(viewController, sender: nil)
    }
}

extension PostsDefaultRouter: PostDetailsModuleDelegate {

    func toggleBookmark(for submit: Put up) {
        self.presenter?.toggleBookmark(for: submit)
    }
}




protocol PostDetailsModuleDelegate: class {
    func toggleBookmark(for submit: Put up)
}

class PostDetailsModule {

    func buildDefault(with submit: Put up, delegate: PostDetailsModuleDelegate? = nil) -> UIViewController {
        let view = PostDetailsDefaultView()
        let interactor = PostDetailsDefaultInteractor(apiService: App.shared.apiService,
                                                      bookmarkService: App.shared.bookmarkService)
        let presenter = PostDetailsDefaultPresenter(submit: submit)

        

        return view
    }
}

class PostDetailsDefaultRouter {

    weak var presenter: PostDetailsPresenter?
    weak var viewController: UIViewController?
    weak var delegate: PostDetailsModuleDelegate?
}

extension PostDetailsDefaultRouter: PostDetailsRouter {

    func toggleBookmark(for submit: Put up) {
        self.delegate?.toggleBookmark(for: submit)
    }
}


class PostDetailsDefaultPresenter {

    var router: PostDetailsRouter?
    var interactor: PostDetailsInteractor?
    weak var view: PostDetailsView?

    let submit: Put up

    init(submit: Put up) {
        self.submit = submit
    }
}

extension PostDetailsDefaultPresenter: PostDetailsPresenter {

    func reload() {
        self.view?.setup(with: self.interactor!.bookmark(for: self.submit))

        
        self.interactor?.feedback(for: self.submit)
        .onSuccess(queue: .essential) { feedback in
            self.view?.show(feedback)
        }
        .onFailure(queue: .essential) { error in
            
        }
    }

    func toggleBookmark() {
        self.router?.toggleBookmark(for: self.submit)
        self.view?.setup(with: self.interactor!.bookmark(for: self.submit))
    }
}

Within the builder technique I can entry each part of the VIPER module so I can merely move across the variable to the designated place (similar applies for the delegate parameter). I normally set enter variables on the presenter and delegates on the router.

It is normally a presenter who wants knowledge from the unique module, and I prefer to retailer the delegate on the router, as a result of if the navigation sample adjustments I haven’t got to alter the presenter in any respect. That is only a private choice, however I like the way in which it appears to be like like in code. It is actually onerous to jot down down these items in a single article, so I might suggest to obtain my completed pattern code from github.

Abstract

As you possibly can see I am utilizing varied design patterns on this VIPER structure tutorial. Some say that there isn’t any silver bullet, however I imagine that I’ve discovered a extremely wonderful methodology that I can activate my benefit to construct high quality apps in a short while.

Combining Guarantees, MVVM with assortment views on high of a VIPER construction merely places each single piece into the appropriate place. Overengineered? Possibly. For me it is definitely worth the overhead. What do you consider it? Be at liberty to message me via twitter. You can even subscribe to my month-to-month e-newsletter under.