VIPER ArchitectureBy: Ahmed Lotfy

VIPER OverviewVIPER Architecture approach for application development

Clean Architecture divides logical structure into distinct layers of responsibility.

VIPER Main GoalsResolve problems. Increase of test coverage

for the Presentation level.

Using Single Responsibility Principle

History●08 - 2012

⚪An article The Clean Architecture by Robert Martin.●12 - 2013

⚪An article Introduction to VIPER●06 - 2014

⚪Issue #13. objc.io Architecting iOS Apps with VIPER

●New architecture, introduced on 2014 at Mutual Mobile.

History

“We found that writing tests for iOS apps was difficult. We decided that if we were going to

improve the way we test our software, we would first need to come up with a better way to

architect our apps. We call that method VIPER”.

Note

“VIPER is not the list of rules and templates. It's the list of recommendations how to build

flexible, testable and reusable architecture.”

What is the problem?

Old ParadigmMy project is getting larger..

Best Architecture?

Big Project

Massive View Controller●What goes into View Controllers?

Application Flows

Transitions

Massive View ControllerLarge files (+1000 lines)

High complexity

Unstructured

code

Maybe VIPER Will Solve The Problem

VIPER Architecture

VIPER Components V(iew) I(nteractor) P(resenter) E(ntity) R(outer)

VIPER ComponentsComponents act like plugins to use cases.

VIPER is a way of describing: ○ What is the role of each of these

components?○ How they can interact with one

another?

Entity

Contains basic model objects.Don’t be surprised if your entities are just data

structures.Entities are only manipulated by the Interactor.

Example

Interactor

A single use case. Business logic to Entities to a specific task. Should be independent of any UI. The Interactor never passes entities to the

presentation layer.

InteractorThe same Interactor could be used in an iOS app or an OS X app.

Easy to develop using TDD.

Data Manage

Data Manager Role:⚪ Building fetch requests.⚪ Store/fetch data from

database.

This allows the Interactor to focus more on application logic and not have to know anything about how. Entities are gathered or persisted.

Interactor Example

Example

View

Passive Component (UILabel, UITableView, ..). Determine how the content is displayed.The Presenter give it contents to display.It never asks the Presenter for data.

Wireframes (Routing)

Own the UINavigationController and UIViewController

Create a View/ViewController and installing it in the window.

Contain navigation logic for describing which screens are shown in which order.

Routes from one screen to another are defined here.

Example

Presenter

●Contain view logic.●Do not know about UILabel, UIButton, etc. ●Know about the content and when it should be

displayed.

PresenterContain the logic to react to user inputs by

requesting new data from the Interactor.Receive results from an Interactor and Prepare

content to a form that is efficient to update the UI.

Entities are never passed.Simple data structures passed.Use the wireframe to perform the navigation and

present the UI.

Example

Example

Presenter and ViewThe communicate between Presenter and View by

a higher level of abstraction (a protocol) expressed in terms of its content,

and not how that content is to be displayed.

Presenter and Wireframe●The Presenter knows:

⚪When to navigate to another screen. ⚪Which screen to navigate to it.

●The wireframe knows:⚪How to navigate. ⚪Handle navigation transition animations.

Presenter and WireframeResponsibility for Routing is shared between two

objects: the Presenter, and the wireframe.

Together, they describe a route from one screen to the next.

Example

VIPER and Storyboard

VIPER tends not to use segues.The danger with segues is they make it very

difficult to keep the separation between UI and application logic – intact.

Using VIPER to Build ModulesA screen or set of screens tends to come together

as a module.A module can be described as a feature.Good simple way to organize code. Easy to find a class exactly where you

expected to look for it.

Designing your App as a set of Modules

Modules can have very clear and well-defined interfaces, as well as be independent of other modules.

This makes it much easier to add/remove features, or to change the way the interface presents various modules to the user.

ModulesA module might include a common application

logic layer of entities, interactors, and managers that can be used for multiple screens.

Depends on the interaction between these screens and how similar they are.

A module could just as easily represent only a single screen.

Testing with VIPERSeparation of concerns makes it easier to adopt TDD.

The Interactor contains pure logic.

The Presenter contains logic to prepare data for display.

They are independent of any UI

Generarted ToolsiOS Code generation:

Generamba ViperCode

VIPER gen

Boa

VIPER vs. MV(C/P)

AdvantagesStructure:

Lighter and Neat Code!Stricter classes.Isolate dependencies.Separated concerns.Conforms to “Single Responsibility Principle”.

AdvantagesHelp Team:

Helps developer to be more explicit about separation of code.

Excellent scalability of the tasks among developers.

●Easier to maintain.Test:

Easier to test the interactions at the boundaries between layers (No excuse for making tests).

AdvantagesTest:

Increase of testability for the application presentation layer.

Modules are independent from each other. It makes the separate development environment and increases the code reusability.

Main architecture approaches are defined. So it's much easier to add new developer into the team or move project to another team.

DisadvantagesVIPER looks difficult at first, especially for

developers without the team work experiences on large projects.

Highly increases of the number of class in the project, as well as the complexity of creating the new module.

Some principles don't work with UIKit out of the box (Segue).

Referenceshttps://www.objc.io/issues/13-architecture/viper/

Swift example.https://github.com/rambler-digital-solutions/The-Book-of-VIPER/blob/master/english/introduction-to-viper.mdhttp://www.slideshare.net/instinctools_EE_Labs/viper-architecture-59871979http://www.slideshare.net/HendyChristianto/introduction-to-viper-architecture

References#8 VIPER to be or not to be?https://brigade.engineering/brigades-experience-using-an-mvc-alternative-36ef1601a41f#.a0skcve7lhttps://github.com/rambler-digital-solutions/The-Book-of-VIPER/blob/master/english/contents.mdhttps://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.htmlAndroid Templates.

Thank you