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
Top Related