VIPER - или то, о чем все говорят, но никто не рассказывает

VIPER - это подход к архитектуре слоя presentation iOS-приложений (то есть всеми любимых Massive View Controller'ов), основанный на разбитии логики на несколько основных составляющих с едиными ответственностями: view, presenter, interactor и router.

Выступление охватывает следующие темы:
- Структура VIPER-модуля
- Связь модулей
- Возможности, открываемые использованием VIPER

Transcript

1. VIPER
   то, о чем все говорят, но никто
   не рассказывает
   

   View Slide

2. Автор
   Егор Толстой
   Ведущий iOS разработчик
   Rambler&Co
   Twitter: @igrekde
   www.github.com/igrekde
   

   View Slide

3. CompositionViewController
   @interface
   

   View Slide

4. @interface
   [self updateContactsView];
   CompositionViewController
   

   View Slide

5. - (void)saveMessageToDraft {
   // Crash
   }
   CompositionViewController
   

   View Slide

6. - (void)sendMessage {
   // Crash
   }
   CompositionViewController
   

   View Slide

7. @end
   - (void)updateAddressBook {
   // Crash
   // Crash
   // Crash
   }
   CompositionViewController
   

   View Slide

8. - (void)updateAddressBook {
   if (invalidContacts) {
   return;
   }
   }
   @end
   CompositionViewController
   

   View Slide

9. @interface
   CompositionViewController
   

   View Slide

10. Хотим 100% crash-free!
    Хотим быстро и качественно!
    Хотим чистый код!
    Хотим модульность!
    

    View Slide

11. View Slide

12. •Структура VIPER модуля
    •Связь модулей
    •Возможности использования VIPER
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. VIEW PRESENTER INTERACTOR
    ROUTER
    E
    E
    

    View Slide

18. VIEW PRESENTER INTERACTOR
    ROUTER
    E
    E
    

    View Slide

19. VIEW PRESENTER INTERACTOR
    ROUTER
    E
    E
    

    View Slide

20. VIEW PRESENTER INTERACTOR
    ROUTER
    E
    E
    

    View Slide

21. VIEW PRESENTER INTERACTOR
    ROUTER
    E
    E
    

    View Slide

22. VIEW PRESENTER INTERACTOR
    ROUTER
    E
    E
    

    View Slide

23. VIEW PRESENTER INTERACTOR
    ROUTER
    E
    E
    

    View Slide

24. VIEW PRESENTER INTERACTOR
    ROUTER
    E
    E
    TABLEVIEW
    CELLFACTORY
    

    View Slide

25. View Presenter Interactor Router
    

    View Slide

26. - (void)viewDidLoad {
    [super viewDidLoad];
    }
    [self setupBarWithTitle:@"#mbltdev"];
    - (void)setupBarWithTitle:(NSString *)title {
    self.navigationItem.title = title;
    }
    View Presenter Interactor Router
    

    View Slide

27. [self setupBarWithTitle:@"#mbltdev"];
    - (void)setupBarWithTitle:(NSString *)title {
    self.navigationItem.title = title;
    }
    View Presenter Interactor Router
    Lifecycle
    

    View Slide

28. [self setupBarWithTitle:@"#mbltdev"];
    View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    

    View Slide

29. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events
    

    View Slide

30. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events
    BOOL valid = [self.inputValidator
    validatePhoneNumber:phoneNumber];
    if (valid) {
    } else {
    }
    [self processToNextScreen];
    [self showErrorAlertView];
    

    View Slide

31. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events
    if (valid) {
    } else {
    }
    [self processToNextScreen];
    [self showErrorAlertView];
    Data validation
    

    View Slide

32. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events
    if (valid) {
    } else {
    }
    [self showErrorAlertView];
    Data validation
    [self processToNextScreen];
    Module Routing
    

    View Slide

33. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events
    if (valid) {
    } else {
    }
    Data validation Module Routing
    [self showErrorAlertView];
    Shows data
    

    View Slide

34. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else
    

    View Slide

35. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else
    [rootSavingContext performBlock:^{
    Message *message =
    [Message MR_findFirst];
    }];
    

    View Slide

36. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    

    View Slide

37. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    NSURLSessionDataTask *dataTask =
    [self.session dataTaskWithRequest:request];
    [dataTask resume];
    

    View Slide

38. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    

    View Slide

39. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    - (void)prepareForSegue:(UIStoryboardSegue *)segue
    sender:(id)sender {
    segue.destinationViewController.inputData =
    @"inputData";
    }
    

    View Slide

40. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    Segues
    

    View Slide

41. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    - (UITableViewCell *)tableView:(UITableView *)tableView
    cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    MyCell *cell = [tableView dequeueReusableCell];
    [cell setupWithObject:cellObject];
    }
    Segues
    

    View Slide

42. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    Segues
    Table DataSource
    

    View Slide

43. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    - (void)panGestureRecognizerDidChangeState:(id)sender {
    CGPoint panPoint = [sender translationInView:self.view];
    self.view.frame = CGRectMake(panPoint.x,
    self.view.frame.origin.y,
    self.view.frame.size.width,
    self.view.frame.size.height);
    }
    Segues
    Table DataSource
    

    View Slide

44. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    Simple gestures
    Segues
    Table DataSource
    

    View Slide

45. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    Simple gestures
    if (panPoint.x > 100.0f) {
    }
    [self showSideMenu];
    Segues
    Table DataSource
    

    View Slide

46. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    Simple gestures
    if (panPoint.x > 100.0f) {
    }
    [self showSideMenu];
    Side Menu
    Segues
    Table DataSource
    

    View Slide

47. View Presenter Interactor Router
    Lifecycle
    Navbar Setup
    Handles events Data validation Module Routing
    Shows data
    if-else Data storage
    Networking
    Segues
    Table DataSource
    Simple gestures
    Side Menu
    if (panPoint.x > 100.0f) {
    }
    Complex gestures
    

    View Slide

48. VIEW PRESENTER INTERACTOR
    ROUTER
    E
    E
    

    View Slide

49. VIEW PRESENTER INTERACTOR
    ROUTER E
    SERVICE
    SERVICE
    SERVICE
    E
    

    View Slide

50. Роутер
    должен
    роутить
    

    View Slide

51. VIEW PRESENTER INTERACTOR
    ROUTER E
    SERVICE
    SERVICE
    SERVICE
    E
    ASSEMBLY
    

    View Slide

52. Экран
    =
    Модуль
    

    View Slide

53. Экран
    =
    Модуль
    

    View Slide

54. UIViewController
    UIView
    UITabBarController
    Daemon
    

    View Slide

55. VIEW PRESENTER INTERACTOR
    ROUTER E
    SERVICE
    SERVICE
    SERVICE
    E
    ASSEMBLY
    

    View Slide

56. VIEW PRESENTER INTERACTOR
    ROUTER E
    SERVICE
    SERVICE
    SERVICE
    E
    ASSEMBLY
    

    View Slide

57. View Slide

58. View Slide

59. PRESENTER
    INTERACTOR
    VIEW
    ROUTER
    VIEW
    PRESENTER
    INTERACTOR
    ROUTER
    Модуль 1 Модуль 2
    

    View Slide

60. PRESENTER
    INTERACTOR
    VIEW
    ROUTER
    VIEW
    PRESENTER
    INTERACTOR
    ROUTER
    @"Module2Segue"
    
    Модуль 1 Модуль 2
    

    View Slide

61. @implementation Router
    [[self.transitionHandler openModuleUsingSegue:SegueIdentifier]
    thenChainUsingBlock:^void(id moduleInput) {
    [moduleInput moduleConfigurationMethod];
    }];
    @end
    

    View Slide

62. MODULEVIEW
    MODULEPRESENTER
    MODULEINTERACTOR
    MODULEROUTER
    
    
    

    View Slide

63. View Slide

64. ~ 99% Code Coverage
    

    View Slide

65. VIEW
    

    View Slide

66. TEST
    

    View Slide

67. pod 'MyApp/Core', '1.2.2'
    pod 'MyApp/Modules/CalendarModule', '1.5'
    pod 'MyApp/Modules/SettingsModule', '1.0.1'
    pod 'SharedModules/Authorization', '2.3.4'
    

    View Slide

68. View Slide

69. •VIPER увеличивает тестируемость приложения,
    •VIPER увеличивает модульность приложения,
    •VIPER делает нашу жизнь немного прекраснее.
    

    View Slide

70. One more thing...
    

    View Slide

71. ❤
    VIPER
    

    View Slide

72. Open Source
    •Рамблер.Конференции - приложение
    •Generamba - генератор
    •VIPER McFlurry - библиотека
    •The Book of VIPER - сборник статей
    https://github.com/rambler-ios
    

    View Slide

73. Дизайн: студия «Рамблер Инфографика»
    

    View Slide