Introduction to VIPER
Architecture
Hendy Christianto
Why VIPER?
• MVC - Massive View Controller
• What goes into View Controllers?
• Data sources for Views (UITableViews)
• Business Logic
• Application Flows
• Transition between view controller
What is VIPER?
• Based on clean architecture to Uncle Bob’s
clean architecture.
• Basically a new architecture, introduced on 2014
• Used to resolve “Massive View Controller”
• Using “Single Responsibility” as a principle
Architecture of VIPER
View
• The View is passive
• Waits for the Presenter to give content to display
• Detect user interaction
• The view is an abstract interface
View Cont’d
@protocol SignInEmailView <NSObject>
- (void)setEmailLabelText:(NSString *)email;
- (void)setPasswordLabelText:(NSString *)password;
@end
#import <UIKit/UIKit.h>
#import "SignInEmailView.h"
@interface ViewController : UIViewController <SignInEmailView>
@end
only protocols, abstract interface
implements SignInEmailView interface
View Presenter
setPasswordLabelText:
Presenter
• Tells the view what to display
• Handle events
Presenter Cont’d
@implementation ViewController
#pragma mark -
#pragma mark View Interface
- (void)setEmailLabelText:(NSString *)email {
self.emailLabel.text = email;
}
- (void)setPasswordLabelText:(NSString *)password {
self.passwordLabel.text = password;
}
- (void)setErrorMessage:(NSString *)error {
self.errorLabel.text = error;
}
#pragma mark -
#pragma mark IBAction
- (IBAction)buttonLoginClicked:(id)sender {
[self.presenter didLoginWithEmail:self.emailTextField.text
password:self.passwordTextField.text];
}
PresenterView
buttonLoginClicked:
didLoginWithEmail: password:
Interactor
signInWithEmail:password:
@implementation SignInPresenter
#pragma mark -
#pragma mark Wireframe Update UI
- (void)presentSignInEmailView {
[self.view setPasswordLabelText:@"Password"];
[self.view setEmailLabelText:@"Email"];
}
- (void)didLoginWithEmail:(NSString *)email password:(NSString *)password {
[self.interactor signInWithEmail:email password:password];
}
@end
#import <Foundation/Foundation.h>
#import "SignInEmailView.h"
#import "SignInInteractorIO.h"
@interface SignInPresenter : NSObject
@property (nonatomic, weak) id <SignInEmailView> view;
@property (nonatomic, strong) id <SignInInteractorInput> interactor;
- (void)presentSignInEmailView;
- (void)didLoginWithEmail:(NSString *)email password:(NSString *)password;
@end
Interactor
• Perform business logic
• Carry out events that notified by presenter
(input)
• Produce output and notify back the presenter
Interactor Cont’d
InteractorPresenter
signInWithEmail:password:
didSignInWithResponse:
@implementation SignInPresenter
#pragma mark -
#pragma mark Wireframe Update UI
- (void)presentSignInEmailView {
[self.view setPasswordLabelText:@"Password"];
[self.view setEmailLabelText:@"Email"];
}
- (void)didLoginWithEmail:(NSString *)email password:(NSString *)password {
[self.interactor signInWithEmail:email password:password];
}
#pragma mark -
#pragma mark Interactor
- (void)didSignInWithResponse:(NSDictionary *)response {
NSError *error = response[@"error"];
if (error) {
[self.view setErrorMessage:error.domain];
} else {
[self.signInWireframe pushWelcomeView];
}
}
@interface SignInInteractor ()
@property (nonatomic, strong) SignInDataManager *dataManager;
@end
@implementation SignInInteractor
- (void)signInWithEmail:(NSString *)email password:(NSString *)password {
[self.dataManager userWithEmail:email password:password completion:^(User *user) {
NSMutableDictionary *response = [NSMutableDictionary new];
if (user) {
response[@"user"] = user;
} else {
response[@"error"] = [NSError errorWithDomain:@"User Not Found"
code:404 userInfo:nil];
}
[self.output didSignInWithResponse:response];
}];
}
@end
@interface SignInInteractor : NSObject <SignInInteractorInput>
@property (nonatomic, weak) id <SignInInteractorOutput> output;
@end
@protocol SignInInteractorInput <NSObject>
- (void)signInWithEmail:(NSString *)email password:(NSString *)password;
@end
@protocol SignInInteractorOutput <NSObject>
- (void)didSignInWithResponse:(NSDictionary *)response;
Data
Manager
userWithEmail:password:completion:
completion:^(User *user)
Data Manager
• Fetch data from database
• Restructure data to model / entities
• Store data
Data Manager Cont’d
Data
Manager
Interactor
@interface SignInInteractor ()
@property (nonatomic, strong) SignInDataManager *dataManager;
@end
@implementation SignInInteractor
- (void)signInWithEmail:(NSString *)email password:(NSString *)password {
[self.dataManager userWithEmail:email password:password completion:^(User *user) {
NSMutableDictionary *response = [NSMutableDictionary new];
if (user) {
response[@"user"] = user;
} else {
response[@"error"] = [NSError errorWithDomain:@"User Not Found"
code:404 userInfo:nil];
}
[self.output didSignInWithResponse:response];
}];
}
@end
Service
userWithEmail:password:completion:
@implementation SignInDataManager
- (void)userWithEmail:(NSString *)email password:(NSString *)password
completion:(void (^)(User *))completionBlock {
NSPredicate *predicate = [NSPredicate predicateWithFormat:@"(email == %@)", email];
[self.dataStore fetchEntriesWithPredicate:predicate sortDescriptors:@[]
completionBlock:^(NSArray *results) {
if (completionBlock) {
if (results.count == 0) {
completionBlock(nil);
} else {
completionBlock(results[0]);
}
}
}];
}
@end
fetchEntriesWithPredicate:sortDescriptors:completionBlock
results arrayrun completionBlock:
Service
• Execute requests related to Entities / Models
• Network/ API, Database (local)
Entities
• Represent data
• Passed between class
Entities Cont’d
@interface User : NSManagedObject
@property (nonatomic, strong) NSString *email;
@property (nonatomic, strong) NSString *name;
@end
@implementation User
@dynamic name;
@dynamic email;
@end
Wireframe
• Initialize view controllers, Presenter, Interactor
• Handles routing / navigation within Views
Wireframe Cont’d
@class SignInPresenter;
@class WelcomeWireframe;
@interface SignInWireframe : RootWireframe
@property (nonatomic, strong) WelcomeWireframe *welcomeWireframe;
- (void)pushWelcomeView;
- (void)presentSignInViewControllerOnWindow:(UIWindow *)window;
@end
static NSString *ViewControllerIdentifier = @"ViewController";
@interface SignInWireframe ()
@property (nonatomic, strong) SignInPresenter *presenter;
@property (nonatomic, strong) SignInInteractor *interactor;
@end
@implementation SignInWireframe
- (void)initializeClasses {
self.presenter = [[SignInPresenter alloc] init];
self.interactor = [[SignInInteractor alloc] init];
self.presenter.interactor = self.interactor;
self.interactor.output = self.presenter;
}
- (void)presentSignInViewControllerOnWindow:(UIWindow *)window {
[self initializeClasses];
ViewController *signInVC = [self signInViewController];
signInVC.presenter = self.presenter;
self.presenter.view = signInVC;
[self createNavigationControllerWithRootView:signInVC];
window.rootViewController = self.navigationController;
}
- (void)pushWelcomeView {
[self.welcomeWireframe pushWelcomeViewControllerOnNavigation:self.navigationController];
}
- (ViewController *)signInViewController {
UIStoryboard *storyboard = [self mainStoryboard];
ViewController *signInVC = [storyboard instantiateViewControllerWithIdentifier:ViewControllerIdentifier];
return signInVC;
}
Benefits of Viper
• Easy to iterate on
• Collaboration-friendly
• Separated concerns
• Easy to test
Conclusion
• Helps developer to be more explicit about
separation of code
• Single responsibility each class, easier to
maintain
• Neat Code!!
References
• http://mutualmobile.github.io/blog/2013/12/04/viper-
introduction/
• http://www.objc.io/issue-13/viper.html
• https://medium.com/brigade-engineering/brigades-
experience-using-an-mvc-alternative-36ef1601a41f
• http://blog.8thlight.com/uncle-bob/2012/08/13/the-clean-
architecture.html
• iOS viper presentation - http://www.slideshare.net/
RajatDatta1/i-os-viper-presentation
DEMOS
Q&A

Introduction to VIPER Architecture

  • 1.
  • 2.
    Why VIPER? • MVC- Massive View Controller • What goes into View Controllers? • Data sources for Views (UITableViews) • Business Logic • Application Flows • Transition between view controller
  • 3.
    What is VIPER? •Based on clean architecture to Uncle Bob’s clean architecture. • Basically a new architecture, introduced on 2014 • Used to resolve “Massive View Controller” • Using “Single Responsibility” as a principle
  • 4.
  • 5.
    View • The Viewis passive • Waits for the Presenter to give content to display • Detect user interaction • The view is an abstract interface
  • 6.
    View Cont’d @protocol SignInEmailView<NSObject> - (void)setEmailLabelText:(NSString *)email; - (void)setPasswordLabelText:(NSString *)password; @end #import <UIKit/UIKit.h> #import "SignInEmailView.h" @interface ViewController : UIViewController <SignInEmailView> @end only protocols, abstract interface implements SignInEmailView interface View Presenter setPasswordLabelText:
  • 7.
    Presenter • Tells theview what to display • Handle events
  • 8.
    Presenter Cont’d @implementation ViewController #pragmamark - #pragma mark View Interface - (void)setEmailLabelText:(NSString *)email { self.emailLabel.text = email; } - (void)setPasswordLabelText:(NSString *)password { self.passwordLabel.text = password; } - (void)setErrorMessage:(NSString *)error { self.errorLabel.text = error; } #pragma mark - #pragma mark IBAction - (IBAction)buttonLoginClicked:(id)sender { [self.presenter didLoginWithEmail:self.emailTextField.text password:self.passwordTextField.text]; } PresenterView buttonLoginClicked: didLoginWithEmail: password: Interactor signInWithEmail:password: @implementation SignInPresenter #pragma mark - #pragma mark Wireframe Update UI - (void)presentSignInEmailView { [self.view setPasswordLabelText:@"Password"]; [self.view setEmailLabelText:@"Email"]; } - (void)didLoginWithEmail:(NSString *)email password:(NSString *)password { [self.interactor signInWithEmail:email password:password]; } @end #import <Foundation/Foundation.h> #import "SignInEmailView.h" #import "SignInInteractorIO.h" @interface SignInPresenter : NSObject @property (nonatomic, weak) id <SignInEmailView> view; @property (nonatomic, strong) id <SignInInteractorInput> interactor; - (void)presentSignInEmailView; - (void)didLoginWithEmail:(NSString *)email password:(NSString *)password; @end
  • 9.
    Interactor • Perform businesslogic • Carry out events that notified by presenter (input) • Produce output and notify back the presenter
  • 10.
    Interactor Cont’d InteractorPresenter signInWithEmail:password: didSignInWithResponse: @implementation SignInPresenter #pragmamark - #pragma mark Wireframe Update UI - (void)presentSignInEmailView { [self.view setPasswordLabelText:@"Password"]; [self.view setEmailLabelText:@"Email"]; } - (void)didLoginWithEmail:(NSString *)email password:(NSString *)password { [self.interactor signInWithEmail:email password:password]; } #pragma mark - #pragma mark Interactor - (void)didSignInWithResponse:(NSDictionary *)response { NSError *error = response[@"error"]; if (error) { [self.view setErrorMessage:error.domain]; } else { [self.signInWireframe pushWelcomeView]; } } @interface SignInInteractor () @property (nonatomic, strong) SignInDataManager *dataManager; @end @implementation SignInInteractor - (void)signInWithEmail:(NSString *)email password:(NSString *)password { [self.dataManager userWithEmail:email password:password completion:^(User *user) { NSMutableDictionary *response = [NSMutableDictionary new]; if (user) { response[@"user"] = user; } else { response[@"error"] = [NSError errorWithDomain:@"User Not Found" code:404 userInfo:nil]; } [self.output didSignInWithResponse:response]; }]; } @end @interface SignInInteractor : NSObject <SignInInteractorInput> @property (nonatomic, weak) id <SignInInteractorOutput> output; @end @protocol SignInInteractorInput <NSObject> - (void)signInWithEmail:(NSString *)email password:(NSString *)password; @end @protocol SignInInteractorOutput <NSObject> - (void)didSignInWithResponse:(NSDictionary *)response; Data Manager userWithEmail:password:completion: completion:^(User *user)
  • 11.
    Data Manager • Fetchdata from database • Restructure data to model / entities • Store data
  • 12.
    Data Manager Cont’d Data Manager Interactor @interfaceSignInInteractor () @property (nonatomic, strong) SignInDataManager *dataManager; @end @implementation SignInInteractor - (void)signInWithEmail:(NSString *)email password:(NSString *)password { [self.dataManager userWithEmail:email password:password completion:^(User *user) { NSMutableDictionary *response = [NSMutableDictionary new]; if (user) { response[@"user"] = user; } else { response[@"error"] = [NSError errorWithDomain:@"User Not Found" code:404 userInfo:nil]; } [self.output didSignInWithResponse:response]; }]; } @end Service userWithEmail:password:completion: @implementation SignInDataManager - (void)userWithEmail:(NSString *)email password:(NSString *)password completion:(void (^)(User *))completionBlock { NSPredicate *predicate = [NSPredicate predicateWithFormat:@"(email == %@)", email]; [self.dataStore fetchEntriesWithPredicate:predicate sortDescriptors:@[] completionBlock:^(NSArray *results) { if (completionBlock) { if (results.count == 0) { completionBlock(nil); } else { completionBlock(results[0]); } } }]; } @end fetchEntriesWithPredicate:sortDescriptors:completionBlock results arrayrun completionBlock:
  • 13.
    Service • Execute requestsrelated to Entities / Models • Network/ API, Database (local)
  • 14.
    Entities • Represent data •Passed between class
  • 15.
    Entities Cont’d @interface User: NSManagedObject @property (nonatomic, strong) NSString *email; @property (nonatomic, strong) NSString *name; @end @implementation User @dynamic name; @dynamic email; @end
  • 16.
    Wireframe • Initialize viewcontrollers, Presenter, Interactor • Handles routing / navigation within Views
  • 17.
    Wireframe Cont’d @class SignInPresenter; @classWelcomeWireframe; @interface SignInWireframe : RootWireframe @property (nonatomic, strong) WelcomeWireframe *welcomeWireframe; - (void)pushWelcomeView; - (void)presentSignInViewControllerOnWindow:(UIWindow *)window; @end static NSString *ViewControllerIdentifier = @"ViewController"; @interface SignInWireframe () @property (nonatomic, strong) SignInPresenter *presenter; @property (nonatomic, strong) SignInInteractor *interactor; @end @implementation SignInWireframe - (void)initializeClasses { self.presenter = [[SignInPresenter alloc] init]; self.interactor = [[SignInInteractor alloc] init]; self.presenter.interactor = self.interactor; self.interactor.output = self.presenter; } - (void)presentSignInViewControllerOnWindow:(UIWindow *)window { [self initializeClasses]; ViewController *signInVC = [self signInViewController]; signInVC.presenter = self.presenter; self.presenter.view = signInVC; [self createNavigationControllerWithRootView:signInVC]; window.rootViewController = self.navigationController; } - (void)pushWelcomeView { [self.welcomeWireframe pushWelcomeViewControllerOnNavigation:self.navigationController]; } - (ViewController *)signInViewController { UIStoryboard *storyboard = [self mainStoryboard]; ViewController *signInVC = [storyboard instantiateViewControllerWithIdentifier:ViewControllerIdentifier]; return signInVC; }
  • 18.
    Benefits of Viper •Easy to iterate on • Collaboration-friendly • Separated concerns • Easy to test
  • 19.
    Conclusion • Helps developerto be more explicit about separation of code • Single responsibility each class, easier to maintain • Neat Code!!
  • 20.
    References • http://mutualmobile.github.io/blog/2013/12/04/viper- introduction/ • http://www.objc.io/issue-13/viper.html •https://medium.com/brigade-engineering/brigades- experience-using-an-mvc-alternative-36ef1601a41f • http://blog.8thlight.com/uncle-bob/2012/08/13/the-clean- architecture.html • iOS viper presentation - http://www.slideshare.net/ RajatDatta1/i-os-viper-presentation
  • 21.
  • 22.